WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Discover WKWebView enhancements

Discover WKWebView enhancements

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

ハイライト

Apple は、iOS 14 および macOS Big Sur の WKWebView に、コンテンツ世界の分離、callAsyncJavaScript、ページ スケーリング、PDF/WebArchive エクスポート、デフォルトで有効になっている ITP、およびアプリ バインド ドメインを追加し、アプリがより安全に Web コンテンツをネイティブ エクスペリエンスに埋め込めるようにしました。

主要内容

多くのアプリはウェブサイトをUIWebView。ページを表示してビジネスを実行することはできますが、アプリがスクロールを制御したり、複数のサイトを結合したり、ページ イベントをリッスンしたり、コンテンツをエクスポートしたりすると、古い WebView の境界があいまいになり始めます。 Web スクリプトとアプリ インジェクション スクリプトは同じ JavaScript ワールドを共有しており、変数が相互に上書きされる可能性があり、悪意のあるページではアプリが公開したくない状態に遭遇する可能性もあります。

このセッションでは、架空のブラウザ ペット アプリを使用してこれらの質問を結び付けます。 2 つの社内 Web サイトを 1 つのニュース フローに統合します。アプリはネイティブ ナビゲーション、検索、共有、セキュリティ ポリシーを担当し、Web ページは引き続き既存のコンテンツを担当します。に移行しますWKWebView最後に、開発者は Web コンテンツをネイティブ アプリ管理に組み込むための一連の機能を取得します。

Apple の変更は 5 つのカテゴリに分類されます。 1 つ目のタイプは分離です。ページ自体の JavaScript がオフになっていても、アプリは引き続き独自のスクリプトを実行できます。WKContentWorldApp Script を別の JavaScript ワールドに配置することもできます。 2 番目のカテゴリはブリッジです。callAsyncJavaScriptそして返信付きでpostMessageネイティブ コードと最新の非同期 JavaScript の間に記述する文字列とメッセージ追跡コードが少なくなります。 3 番目のカテゴリはレンダリングです。pageZoomまた、カスタム メディア タイプにより、アプリが Web ページのパフォーマンスを調整するときに挿入する CSS を減らすことができます。 4 番目のカテゴリはエクスポートです。検索、PDF、WebArchive、および macOS 印刷の完全な共通ドキュメント機能です。 5 番目のカテゴリはプライバシーです。ITP はデフォルトで有効になっており、アプリバインド ドメインはホワイトリストを使用して、深いやり取りが行われるサイトを制限します。

詳細

1. ナビゲーションを押してページを閉じます。

(05:58) 古い慣習は次のとおりです。WKPreferencesのjavaScriptEnabledに設定false。問題は、WKWebView でのアプリの対話の多くも JavaScript の実行によって完了することです。 iOS 14 および macOS Big Sur で導入WKWebPagePreferences.allowsContentJavaScript、Web ページのコンテンツに付属するスクリプトのみがオフになり、アプリ側の JavaScript は引き続き使用できます。

API: WKWebPagePreferences.allowsContentJavaScript
Scope: per-navigation web page preferences
Disables: inline scripts, remote JavaScript files, JavaScript URLs
Keeps: JavaScript evaluated by the app
Use case: disable a feed page's custom scrolling script while keeping app logic active

キーポイント:

  • WKWebPagePreferencesスコープの範囲は 1 つのナビゲーションであり、ページごとにスクリプト戦略を決定するのに適しています。 -allowsContentJavaScriptWeb コンテンツ自体については、App と WKWebView の間のスクリプトの対話は中断されません。
  • セッションの例では、JavaScript を使用してニュース フロー ページのスクロールをカスタマイズします。アプリが閉じた後、ネイティブのスクロール エクスペリエンスが復元されます。
  • この機能は、アプリがプレゼンテーション層を制御し、Web ページがコンテンツのみを提供するシナリオに適しています。

2. WKContentWorld を使用してアプリ スクリプトを分離する

(09:03) ブラウザ ペットで遭遇する 2 番目の問題は、名前の競合です。ウェブページにありますcommentDetails関数、アプリによって挿入されたスクリプトも同じシンボルを使用しており、その結果、Web ページのコメント領域が空白になります。WKContentWorldスタンドアロンの JavaScript サンドボックスを提供します。ページ ワールドは Web ページ自体のスクリプトを表し、クライアント ワールドはアプリのスクリプトを表します。

Problem: page JavaScript and app JavaScript both define commentDetails
API: WKContentWorld
Page world: web content's own JavaScript state
Client world: app JavaScript state
Adoption path: run evaluateJavaScript calls in the default client world
Also supported: install WKScriptMessageHandler in a specific content world

キーポイント:

  • WKContentWorld分離されているのは JavaScript グローバル オブジェクトであり、ページ スクリプトはアプリ スクリプトによって設定された状態を確認できません。
  • アプリ スクリプトは引き続き DOM API を呼び出して DOM を変更できます。 -evaluateJavaScriptページ独自のシンボルとの競合を避けるために、デフォルトのクライアント ワールドを指定できます。 -WKScriptMessageHandlerまた、指定したコンテンツ ワールドにインストールして、メッセージ エントリをまとめて分離することもできます。

3. 文字列のスペルを減らし、非同期 JavaScript を直接呼び出します。

(11:43) 古いevaluateJavaScriptこれを記述する一般的な方法は、パラメータを新しい JavaScript 文字列に記述することです。パラメータがネイティブ辞書または数値から取得される場合、それらは手動でシリアル化する必要があります。callAsyncJavaScriptJavaScript の固定部分を再利用し、名前付きパラメーターを使用して値を渡すことができます。

API: callAsyncJavaScript
Input style: constant JavaScript string plus named arguments
Automatic bridge: Cocoa string -> JavaScript string
Automatic bridge: number -> JavaScript number
Automatic bridge: Cocoa dictionary -> JavaScript object
Return rule: JavaScript must explicitly return a value
Promise rule: if the return value is a Promise, completion waits until it resolves

キーポイント:

  • JavaScript 文字列をパラメーターのセットごとに再連結する必要がなくなりました。
  • API はパラメーター タイプのシリアル化と逆シリアル化を担当し、数値、文字列、辞書間の手動変換を削減します。
  • 完了ハンドラーは明示的な場合にのみ使用できます。returnそうして初めて意味のある値が得られます。
  • 戻るPromise、完了ハンドラーは Promise の履行を待機します。fetchこのタイプの非同期 Web API は、ネイティブ コードを受け取りやすいです。

4. postMessage に独自の返信チャネルを持たせる

（14:18）WKScriptMessageHandler元々は一方通行のようでした。 JavaScript がメッセージを送信した後、ネイティブ側が応答したい場合は、メッセージ ID、コールバック テーブル、および競合状態の処理を維持する必要があります。 iOS 14 および macOS Big Sur では、JavaScriptpostMessage戻るPromise、新しいハンドラー フォームは完了ハンドラーを受け取ります。

JavaScript side: postMessage returns a Promise
Native side: WKScriptMessageHandler receives a completion handler
Reply path: native code calls the completion handler
JavaScript result: the Promise returned by postMessage resolves

キーポイント:

  • メッセージ返信では、開発者が一連の ID とコールバック追跡メカニズムを手書きする必要がなくなりました。 ・ネイティブ側の補完ハンドラの呼び出しは、JavaScript側のPromise解決のタイミングとなります。 ・コメント通知や権限チェック、コンテンツ選択など、ページイベントがアプリ側の判定結果を待つ必要があるシナリオに適しています。

5. WKWebView API のレンダリング、検索、エクスポート

(16:56) Browser Pets は、古い Web ページを最新の iPhone 画面にアップスケーリングしたいと考えています。 CSSを挿入するzoomこれは可能ですが、ページ スタイルと制御を競合することになり、ナビゲーションで競合状態が発生する可能性もあります。WKWebView.pageZoomページ全体のズームを WebView 自体のプロパティに変換します。

(18:39) 別の例は、Web ページの元のヘッダーとフッターを非表示にすることです。 Mac WebView は以前、特定のメディア タイプとして自身をレンダリングできましたが、WKWebView は 2020 年にこの機能をすべてのプラットフォームに提供します。アプリがカスタム メディア タイプを設定した後、Web ページ上の既存の CSS メディア クエリをアプリ固有の表示に切り替えることができます。

(19:43) コンテンツ レイヤーの機能も向上しました。 WKWebView は、構成可能な向き、大文字と小文字の区別、折り返しを使用した、プラットフォームと一貫したページ検索を提供します。結果が見つかった場合は選択され、スクロールされて表示されます。輸出に関して言えば、createPDF完全なオフスクリーン コンテンツを検索可能な PDF として保存できます。createWebArchiveData現在の DOM とサブリソースを保存して、後のデバッグやテストを容易にすることができます。

Rendering: WKWebView.pageZoom
Rendering: custom media type on WKWebView
Find: built-in WKWebView find functionality
Export: createPDF with default or custom configuration
Export: createWebArchiveData for DOM plus sub-resources
Load archive: load(data, mimeType)
Mac addition: WKWebView printing on macOS Big Sur

キーポイント:

  • pageZoomページ全体のスケーリングの問題を解決するのは、ナビゲーションのたびに CSS を挿入する必要がないことです。
  • カスタム メディア タイプにより、CSS を使用して Web ページをアプリ コンテナに適応させることができます。これは、複数のプレゼンテーションを保持する既存のサイトに適しています。
  • 組み込みの検索機能は、AppKit および UIKit の検索習慣に従い、長い記事、コメント、ドキュメント ページに適しています。 -createPDF共有とアーカイブの場合は、現在の画面外のコンテンツを含めることができます。 -createWebArchiveDataデバッグ、テスト、およびペーストボードのシナリオでは、Web コンテンツのスナップショットが保存されます。

6. デフォルトで ITP を有効にし、アプリバインド ドメインを使用して深いやり取りを制限します

(25:15) インテリジェント追跡防止 (ITP) は、iOS 14 および macOS Big Sur 以降のすべての WKWebView アプリでデフォルトで機能します。ユニバーサル ブラウザ アプリの場合、互換性の問題に対処するために、ユーザーは Safari と同じようにアプリを閉じることができます。

(26:46) アプリバインド ドメインは、どのドメイン名がアプリのコア実装の一部であるかを記述するために使用されます。ブラウザ ペットは、Safari 上の WebKittens と Pups のみをホワイトリストに登録します。他のコメント リンクは引き続き読み込むことができますが、アプリおよび導入されたフレームワークはこれらのサイトと深く対話することはできません。これは、最小特権の原則に従っています。

Default privacy: ITP enabled for all WKWebView apps
Configuration key: WKAppBoundDomains in Info.plist
Value: array of domains that are core to the app
Outside domains: loading still works
Outside domains: deep interaction is blocked
Strict mode: add WKAppBoundDomains with an empty array

キーポイント:

  • ITP はデフォルトのプライバシー保護であり、アプリがそれをアクティブに開く必要はありません。 -WKAppBoundDomainsに書かれていますInfo.plist、アプリの信頼性と深いインタラクションを表現するサイトのコレクション。
  • ホワイトリスト外のページも開くことはできますが、アプリによる詳細な読み取りや操作はできません。
  • アプリが Web ページをロードするが、Web ページのコンテンツと対話する必要がない場合は、空の配列を使用して、すべてのドメイン名に対する詳細な対話をオフにすることができます。

重要ポイント

  • 安全なマルチサイト情報フローを作成: 複数の独自 Web サイトのコンテンツを同じネイティブ フィードに配置します。実行する価値がある理由:WKContentWorld、allowsContentJavaScriptまた、アプリバインド ドメインでは、アプリ スクリプト、ページ スクリプト、およびホワイトリストに登録された外部リンクを個別に管理できます。開始方法: 最初にコア サイトを構成しますWKAppBoundDomainsをクリックし、アプリ インジェクション スクリプトをデフォルトのクライアント ワールドに移動します。

  • 組み込みの Web ページ問題再発パッケージを作成します: アプリのベータ版に「現在の Web ステータスをエクスポート」エントリを追加します。実行する価値がある理由:createWebArchiveData現在の DOM とサブリソースを保存できるため、スクリーンショットよりもページ構造の問題を再現するのに適しています。開始方法: デバッグ メニューで WebArchive エクスポートを呼び出してデータをディスクに保存するか、比較のために別の WKWebView にロードします。

  • ネイティブなドキュメント検索と共有エクスペリエンスを作成: ヘルプ センター、契約ページ、または長いコメント ページに検索と PDF 共有を追加します。実行する価値がある理由: WKWebView の検索機能は結果を選択してスクロールします。createPDF完全なコンテンツを画面外にエクスポートする機能。開始方法: ネイティブ ナビゲーション バーに検索ボタンと共有ボタンを配置して、それぞれ検索プロセスと PDF 生成プロセスをトリガーします。

  • スクリプトの少ないコンテンツ読み取りコンテナを作成します: 情報、お知らせ、記事ページのリモート ページ スクリプトをオフにし、アプリ独自のスクリプト機能のみを保持します。実行する価値がある理由:allowsContentJavaScriptカスタム スクロール、広告スクリプト、または制御されていないインタラクションは、アプリから重要なコントロールを遮断することなく、ページから削除できます。開始方法: ナビゲーション ポリシー デリゲートの URL によって設定WKWebPagePreferences。

  • 古いサイト用にアプリ固有の表示レイヤーを作成します: アプリ内の既存の Web ページのヘッダー/フッターを非表示にし、適切なサイズに拡大します。実行する価値がある理由:pageZoomカスタム メディア タイプにより、競合状態や挿入された CSS の副作用を軽減できます。開始方法: まず Web インスペクターを使用して、ページにメディア クエリまたは CSS クラスがすでに存在するかどうかを確認し、次にズームとメディア タイプを WKWebView 構成レイヤーに追加します。

関連セッション

  • Web Inspector の新機能 — このセッションでは、WKWebView のページの問題をトラブルシューティングするために Web Inspector を何度も使用しました。 10646 2020 年のデバッグ ツールの更新について引き続き学習できます。
  • Web 開発者向けの新機能 - 10188 最後に、Safari と WebKit の Web API、CSS、メディア、および JavaScript の更新をカバーする Web 向けの機能を引き続き検討することをお勧めします。
  • Web 用の Face ID と Touch ID について — どちらも Safari & Web に属しており、Safari Web サイトのログイン プロセスに Web 認証 API を導入します。
  • より優れたプライバシーを通じて信頼を構築する - 10188 ITP およびアプリバインド ドメインはプライバシー境界設計であり、10676 Apple のプライバシー原則とプラットフォーム機能についてさらに説明しています。

コメント

GitHub Issues · utterances