Katashin .info

ハイブリッドアプリの WKWebView で Service Worker を使用する方法

ハイブリッドアプリは Web 技術で開発したコンテンツをネイティブアプリの WebView で動作させることで、クロスプラットフォーム対応を実現する開発手法です。しかし、単に Web アプリを表示するだけでなく、ネイティブ側の設定が必要になる場合があります。たとえば iOS の WKWebView では、デフォルトで Service Worker が動作しません。この記事では、WKWebView で Service Worker を有効にする設定方法を解説します。

App-Bound Domains の設定 #

iOS/iPadOS 14.0 で導入された App-Bound Domains の設定が必要です。これは、WKWebView の強力な API を使用できるドメインを事前に指定することで、アプリ内ブラウザでのトラッキングを防ぐ機能です。

App-Bound Domains を設定するには、アプリの Info.plist に WKAppBoundDomains キーを追加し、許可するドメインのリストを配列で指定します。

<plist version="1.0">
<dict>
<key>WKAppBoundDomains</key>
<array>
    <string>example.com</string>
    <string>api.example.com</string>
    <string>localhost</string>
</array>
</dict>

この設定により、指定されたドメイン以外では JavaScript/CSS の挿入や Cookie 操作などが制限されます。次に説明する limitsNavigationsToAppBoundDomains を設定することで、App-Bound Domains に登録したドメインで Service Worker が使用可能になり、制限された機能もまた使えるようになります。

limitsNavigationsToAppBoundDomains の設定 #

WKWebViewConfiguration の limitsNavigationsToAppBoundDomains を true に設定すると、App-Bound Domains 以外へのアクセスは制限されますが、Service Worker が有効になります。

let configuration = WKWebViewConfiguration()

// App-Bound Domains 以外へのアクセスを制限
configuration.limitsNavigationsToAppBoundDomains = true

// WKWebView を初期化するときに設定オブジェクトを渡す
let webView = WKWebView(frame: .zero, configuration: configuration)

設定が正しく完了すると、Service Worker が利用可能になります。JavaScript コンソールで以下を実行して確認できます。

console.log('serviceWorker' in navigator) // true と表示されれば OK

WKWebView 上で動く Service Worker のデバッグ方法 #

ローカル開発サーバーで Web アプリを起動し、iOS シミュレータの WKWebView から localhost にアクセスする場合を例に、Service Worker のデバッグ方法を説明します。

WKWebView のデバッグには macOS の Safari を使用します。Safari の設定画面で「詳細」→「Webデベロッパ用の機能を表示」にチェックを入れ、開発メニューを有効にしてください。

Safari の詳細設定画面のスクリーンショット。「Webデベロッパ用の機能を表示」にチェックが入っている。

WKWebView インスタンスの isInspectable を true に設定すると、Web Inspector でデバッグ可能になります。デバッグビルドでのみ有効にするため、#if DEBUG ディレクティブを使いましょう。

#if DEBUG
// デバッグビルドでのみ Web Inspector を有効化
webView.isInspectable = true
#endif

シミュレータでアプリを起動後、Safari の開発メニューからデバイス（シミュレータ）を選択すると、Service Worker の項目が表示されます。通常の Web Inspector と同様に、コンソール、ネットワーク、ソースコードなどを確認できます。

Safari の開発メニューを開いたスクリーンショット。シミュレータの項目内に Service Worker がある。

結論 #

WKWebView で Service Worker を使用するには、App-Bound Domains と limitsNavigationsToAppBoundDomains の設定が必要です。この設定により App-Bound Domains 外へのアクセスは制限されますが、Service Worker の利用が可能になります。