What's new in WKWebView
の日本語要約。内容はすべて以下の内容になります。
webViewの種類
アプリの中でシンプルなブラウザーの場合はSFSafariViewControllerを使いたいと思います。
もしアプリがまだ非推奨のUIWebViewを使っているなら、今こそより高速で応答性の高いWKWebViewに移行する時です。
UIWebView は将来のリリースで削除される予定です。
WKWebView はウェブコンテンツとインタラクションするアプリケーションを書くために使う API です。
CSSベースのUIに使用したり、JavaScriptでアプリの一部を書いたりすることができます。
アプリバウンドドメインを使用して、あなた自身のWebコンテンツと対話することができます。
また、独自のブラウザを開発している場合もあるでしょう。
どのような用途であっても、私たちは常に新しい機能を追加し、よりリッチなWebアプリケーションを作ることができるようにします。
WKWebViewの新機能
今年の WKWebView の新機能は以下４つ
・Web コンテンツの新しい操作方法
・コンテンツブロッカーの新機能暗号化メディア
・リモート
・Web インスペクタの使用
Web コンテンツの新しい操作方法
iOS 16では、フルスクリーンAPI、新しいCSSビューポートユニット、検索インタラクションの3つの方法で、 アプリケーションがウェブコンテンツとインタラクトすることができます。
まず、フルスクリーンについて説明します。
何年も前から、JavaScript はブラウザでビデオや canvas ゲームなどの HTML 要素をフルスクリーン表示することができました。
簡単な例として、携帯電話では次のように表示されます。JavaScript がフルスクリーンを要求し、ユーザーまたは JavaScript がフルスクリーンを終了することができます。
アプリで必要なことは、WKPreferences .isElementFullscreenEnabled を true に設定し、webkitRequestFullscreen などのフルスクリーン API を使用する Web コンテンツを読み込むことだけです。
しかし、アプリの遷移をカスタマイズしたい場合は、WKWebView.fullscreenState の値を監視することで、Web コンテンツがフルスクリーンになるか、戻るかをアプリに知らせることができます。
また、動的なビューポートのサイズに応じてウェブコンテンツをレイアウトできるようにするための新しい CSS ユニットも用意されています。
これらの新しい CSS ユニットには、svh、lvh、dvh などのユニットが含まれます。
これらのユニットにより、ウェブ開発者は最小、最大、および動的なビューポートサイズに基づいてレイアウトを変更することができます。
例えば、Safariで最初にページを開くと、ウェブページのホストと下部にいくつかのボタンが表示されます。
スクロールすると、ボタンが邪魔にならないようにスライドして、ビューポートのサイズが大きくなります。
Svh、lvh、dvhは、これらの異なるサイズのビューポートを測定するのに便利な単位です。
アプリケーションが WKWebView のビューポートを変更する場合、ビューポートのサイズの範囲が何であるかを前もって WebKit に通知する必要があります。
Swift では、1 つの関数呼び出しで WebKit に最大および最小のエッジインセットを通知し、アプリでこのウェブコンテンツを正しくレイアウトできるようにします。
iOS 16ではWKWebView内の検索のサポートを導入
多くのWKWebViewアプリケーションは、多くのテキストを読み込み、ユーザーはこのテキストを検索したいと思います。
WKWebView .findInteractionEnabled を true に設定すると、ユーザーは使い慣れた UI と Command-F のようなショートカットを使って、開いているページのテキストを検索できるようになります。
この1行のコードだけで機能をオンにできますが、 WKWebView .findInteraction を通じて UIFindInteraction オブジェクトにアクセスし、検索パネルの表示と非表示、または次や前の結果への移動をプログラムで行うこともできます。
コンテンツブロック
コンテンツ・ブロックについては、Safari でコンテンツ・ブロッカーを実装するために使用される API である WKContentRuleList に新しい機能が追加されました。
ここでは、サンプルサイトの iframe に Wikipedia を埋め込んでいます。
以前は、リクエストされた URL とトップフレームの URL に対して正規表現を実行し、読み込みをブロックするか、その他のアクションを実行するかを決定することができました。
しかし、時には、あるルールを特定のiframe内のロードにのみ適用したい場合があります。
このように、現在のフレームのURLに対して正規表現を実行することができます。
ここでは、Wikipediaを含むフレームからの画像のみをブロックするルールを書こうと思います。
これを行うには、次のようにJSONにif-frame-urlを追加します。
そして、先程と同じようにJSONをコンパイルして、WKWebViewConfigurationに適用します。
そして、リクエストを行うフレームのURLに対して、正規表現を実行します。
このブロックルールは、if-frame-url の正規表現にマッチするフレームからのリクエストにのみ適用されるようになります。
ここでは、Wikipediaのiframe内の画像のロードをブロックしていることがわかります。
もしあなたがコンテンツブロッカーの実装を真剣に考えているなら、 「What’s new in Safari Web Extensions」 セッションをチェックすべきです。
iPadOS 16のWKWebViewのもう一つの新機能は、暗号化されたメディアです。
Encrypted Media ExtensionsとMedia Source Extensions APIを使用するコンテンツがあれば、iPadOS上のアプリでそれを使用することができるようになりました。
つまり、AppleTV+のようなプレミアムコンテンツがあれば、iPadOSでもmacOSの時と同じように使えるようになるのです。
アプリがWebブラウザのエンタイトルメントを持っている場合、リモートWebインスペクタは、iOSのSafariでそうであったように、あなたのプロダクションアプリで動作するだけです；コードを追加または変更する必要はありません。
サードパーティーブラウザで Web Inspector を有効にするには、Safari の場合と同じ手順で行います。
まず、iOS デバイスの Safari の設定で Web Inspector をオンにし、Mac の Safari の「詳細設定」で「開発」メニューを有効にする必要があります。
携帯電話をMacに取り付け、macOSのSafariの「開発」メニューでデバイスを探します。
Webインスペクタには、Webコンテンツをデバッグするためのツールが多数用意されています。
DOMの探索、JavaScriptの実行とデバッグ、ページロードのタイムラインの表示などを行えます。
ウェブサイトを持っている場合、リモートWebインスペクタを使って、iOS上のサードパーティブラウザで自分で検査とデバッグを行えるようになりました。
