WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
What's new in WKWebView

What's new in WKWebView

WWDC 2022Safari & WebWebKit
元の動画を見る

ハイライト

WKWebView は、フルスクリーン要素、動的ビューポート範囲、ページ検索、iframe レベルのコンテンツ ブロック、iPad 暗号化メディア再生、および iOS 16 および iPadOS 16 の Web ブラウザ権限を備えた運用環境向けのリモート検査機能を追加します。

主要内容

多くのアプリは、インターフェイスの一部として Web ページを使用します。 CSS で書かれた UI、JavaScript で書かれたビジネス ページ、または完全なブラウザーである場合があります。 WKWebView は、このようなアプリと Web コンテンツの間の橋渡しとなります。

このセッションでは、最初に境界を指定します。ブラウザーに近いアプリにページを配置するだけで、深いカスタマイズが必要ない場合は、それを優先する必要があります。SFSafariViewController。プロジェクトが放棄されたものをまだ使用している場合UIWebView、現在はより高速で応答性の高いものに移行中ですWKWebView、なぜならUIWebView将来のバージョンでは削除される予定です。

iOS 16 と iPadOS 16 の変更点は 6 つのことに焦点を当てています。最初の 3 つは、アプリとページ間の対話を改善するものです。JavaScript は HTML 要素を全画面表示にすることができ、Web ページは最小、最大、動的ビューポート サイズに従って入力でき、ユーザーは使い慣れた検索 UI を使用してページ テキストを検索できます。 4 番目の部分では、コンテンツ ブロック ルールが現在の iframe の URL を参照できるようにします。最後の 2 つの部分では、メディアとデバッグについて説明します。iPadOS 用の WKWebView は、暗号化されたメディア拡張機能とメディア ソース拡張機能をサポートしています。web-browser資格付与アプリは、Safari リモート Web インスペクターを使用して運用環境の Web ページをデバッグできます。

これらの機能はすべて同じシナリオに役立ちます。アプリはもはや単に「Web ページに埋め込まれている」だけでなく、Web ページがネイティブ インターフェイスと同様に全画面表示、レイアウト、検索、フィルタリング、再生、デバッグのプロセスに参加できるようになります。

詳細

Web 要素を全画面表示にします

(02:26) ブラウザーの一般的な全画面 API が WKWebView に導入されました。ビデオやキャンバス ゲームなどの HTML 要素は、JavaScript によって全画面表示するように要求できます。最初にアプリ側を開く必要がありますWKPreferences.isElementFullscreenEnabled。

webView.configuration.preferences.isElementFullscreenEnabled = true

webView.loadHTMLString("""
<script>
    button.addEventListener('click', () => {
        canvas.webkitRequestFullscreen()
    }, false);
</script>
…
""", baseURL:nil)

let observation = webView.observe(\.fullscreenState, options: [.new]) { object, change in
    print("fullscreenState: \(object.fullscreenState)")
}

キーポイント:

  • isElementFullscreenEnabled = true: ページ内の要素が全画面 API を使用できるようにします。 -button.addEventListener('click', ...): 全画面リクエストをユーザーのクリック イベントにバインドする例。 -canvas.webkitRequestFullscreen(): ページ内のキャンバス要素は全画面表示を要求します。 -webView.observe(\.fullscreenState, ...): アプリは WKWebView の全画面ステータスの変化を監視します。 -print("fullscreenState: ..."): 状態の変化により、カスタム遷移アニメーションやインターフェイスの同期を実行できます。

アプリにビデオ プレーヤー、WebGL キャンバス、リモート デスクトップ、またはゲーム インターフェイスがある場合、このスイッチによりネイティブ レイヤーと Web レイヤー間の手書きブリッジを減らすことができます。

WebKit に動的ビューポート範囲を事前に通知する

(03:50) iOS 16 のサポートsvh、lvh、dvhなど CSS ビューポート ユニット。これらはそれぞれ、より小さい、より大きい、および動的に変化するビューポートの高さに対応します。これらのユニットは、Safari の下部ツールバーが表示されて折りたたまれ、ページの利用可能な高さが変更されるときに、このレイアウト用に準備されます。

WKWebView シナリオでは、アプリ自体が WebView の表示範囲を変更する場合、事前にこの範囲の上限と下限を WebKit に通知する必要があります。

let minimum = UIEdgeInsets(top: 0, left: 0, bottom: 30, right: 0)
let maximum = UIEdgeInsets(top: 0, left: 0, bottom: 200, right: 0)
webView.setMinimumViewportInset(minimum, maximumViewportInset: maximum)

キーポイント:

  • minimum: ページが遭遇できる最小のビューポート インセットを宣言します。 -maximum: ページが遭遇できる最大ビューポート インセットを宣言します。 -bottom: 30そしてbottom: 200: この例では、下部インセットを使用して、下部コントロールが折りたたまれたときと展開されたときの高さの違いを表現しています。 -setMinimumViewportInset: ページ内のダイナミック ビューポート ユニットに正しい入力が与えられるように、範囲を WebKit に渡します。

この API に適したシナリオには、下部ツールバーが折りたたまれたリーダー、カスタム ブラウザー、ドラッグ可能なコントロール パネルを備えた Web アプリ コンテナーが含まれます。

システム検索 UI を WKWebView に追加します

(04:17) 多くの WKWebView アプリは長いテキストを読み込みます。ユーザーは自然に Command-F を押すか、ページ内検索エントリを探します。 iOS 16 の WKWebView は検索インタラクションをサポートしており、アプリはプロパティを開くだけで済みます。

webView.findInteractionEnabled = true

if let interaction = webView.findInteraction {
  interaction.presentFindNavigator(showingReplace:false)
}

キーポイント:

  • findInteractionEnabled = true: WKWebView の検索対話を有効にします。 -webView.findInteraction: 最下層を取得しますUIFindInteraction物体。 -presentFindNavigator(showingReplace:false): アプリは自動的に検索パネルを表示します。 -showingReplace:false注: この例では検索を開くだけで、置換インターフェイスは表示されません。

開くと、ユーザーは使い慣れた UI と Command-F ショートカットを使用して現在のページを検索できます。アプリも通過可能UIFindInteraction検索パネルを表示して閉じるか、結果のジャンプをプログラムで制御します。

特定の iframe 内のリクエストのみをブロックする

（05:46）WKContentRuleListリクエストURLとトップフレームURLからマッチングできることが分かりました。問題は埋め込みコンテンツで発生します。同じページに複数の iframe が存在する可能性があり、開発者はルールを特定の iframe 内にのみ適用したい場合があります。

iOS 16の新機能if-frame-url。ルールは、リクエストが行われた現在のフレーム URL と一致できます。ビデオの例では、サンプル ページに Wikipedia の iframe を埋め込み、Wikipedia フレーム内の画像のみをブロックします。

let json = """
[{
    "action":{"type":"block"},
    "trigger":{
        "resource-type":["image"],
        "url-filter":".*",
        "if-frame-url":["https?://([^/]*\\\\.)wikipedia.org/"]
    }
}]
"""

WKContentRuleListStore.default().compileContentRuleList(forIdentifier: "example_blocker",
    encodedContentRuleList: json) { list, error in
    guard let list = list else { return }
    let configuration = WKWebViewConfiguration()
    configuration.userContentController.add(list)
}

キーポイント:

  • "action":{"type":"block"}: ルールがヒットした後のリソースの読み込みを防ぎます。 -"resource-type":["image"]: ルールは画像リソースにのみ適用されます。 -"url-filter":".*": リクエスト URL 自体がすべて一致します。 -"if-frame-url": 新しい条件を追加して、ルールが一致するフレーム内でのみ有効になるように制限します。 -wikipedia.orgRegex: この例では、ルールを Wikipedia の iframe に限定しています。 -compileContentRuleList: JSON をコンパイルして、WKContentRuleList。
  • configuration.userContentController.add(list): ルールを WKWebView 構成にインストールします。

この機能は、よりきめ細かいエンタープライズ コンテンツ フィルタリング、埋め込みドキュメント セキュリティ ポリシー、およびサードパーティ iframe のリソース制御に適しています。

iPadOS の暗号化されたメディアと実稼働環境のチェック

(06:33) iPadOS 16 の WKWebView は、暗号化メディア拡張機能 (EME) とメディア ソース拡張機能 (MSE) をサポートしています。コンテンツがすでにこれらの Web API に依存している場合、iPadOS アプリの WKWebView は、macOS と同じ効果でこのタイプの保護されたメディアを再生できます。セッションで挙げた例は、Apple TV+などのプレミアムコンテンツです。

(06:57) リモート Web インスペクターweb-browser資格アプリが有効になり、新しいコードは必要ありません。起動プロセスは Safari と同じです。まず iOS デバイスの Safari 設定で Web Inspector を開き、次に Mac Safari の詳細設定で [開発] メニューを有効にし、デバイスを接続した後、[開発] メニューから対象のページを選択します。

キーポイント:

  • EME と MSE は Web ページ上の既存のメディア API であり、セッションではアプリ側に WKWebView コードを追加する必要はありません。
  • リモート Web インスペクターは、DOM を検査し、JavaScript を実行およびデバッグし、ページ読み込みタイムラインを表示できます。
  • このデバッグ機能は、実稼働アプリの Web コンテンツ用です。ただし、アプリにweb-browser entitlement。

重要ポイント

  • フルスクリーンのWebゲームコンテナを作成: ゲーム画面をキャンバスに配置し、アプリ側で開きますisElementFullscreenEnabled、ユーザーがクリックしてゲームを開始すると、Web 側が呼び出されます。webkitRequestFullscreen()、次に使用しますfullscreenStateネイティブボタンとステータスバーを同期します。

  • 格納可能なツールバーを備えたリーダーを作成: 下部のコメント バーは、展開すると高さを占め、格納するとスペースが空きます。使用setMinimumViewportInset2 つの境界を宣言して、記事ページのコンテンツがsvh、lvh、dvhレイアウトは実際の表示領域に従います。

  • 組み込みのドキュメント検索ポータルを作成: ナレッジ ベース、プロトコル、ヘルプ センターなどの長文ページを開きます。findInteractionEnabled、ネイティブ ナビゲーション バーに検索ボタンを配置して呼び出しますpresentFindNavigator(showingReplace:false)。

  • iframe レベルのコンテンツ フィルターを作成します: サードパーティのページを埋め込む場合は、次を使用します。if-frame-urlメイン ページやその他の埋め込みコンテンツが誤って損傷することを避けるために、画像、スクリプト、またはその他のリソース ルールを指定された iframe に制限します。

  • 運用 Web コンテンツのトラブルシューティング プロセス: アプリがブラウザー タイプのシナリオに準拠しており、web-browser資格を取得し、Remote Web Inspector をカスタマー サービスおよび QA プロセスに統合し、Safari の [開発] メニューを使用して DOM、JavaScript、およびユーザー パスの読み込みタイムラインを直接検査します。

関連セッション

  • Safari と WebKit の新機能 — 同じ年に完了できる Safari と WebKit プラットフォームのアップデートの概要svh、lvh、dvhなど Web プラットフォーム機能の背景。
  • Safari Web Extensions の新機能 - セッション 10049 コンテンツ ブロックの段落で名前で推奨されており、Safari 拡張機能と declarativeNetRequest を引き続き理解するのに適しています。
  • Safari Web Inspector Extensions の作成 - Remote Web Inspector のデバッグ機能に関連し、カスタム ツールを Web Inspector に統合する方法の詳細。
  • Safari の Web Push について - Safari と WebKit の両方のトピックでは、Web API が Apple プラットフォーム アプリケーションのシナリオにどのように組み込まれるかを示しています。

コメント

GitHub Issues · utterances