ウィンドウからキャッシュにアクセスする

window の外部で行ってきたすべての作業から、Cache インスタンスには Service Worker のスコープ内でしかアクセスできないと思われているかもしれません。実際、Service Worker スコープと window で実行されているウェブアプリの従来のコードの両方で Cache インスタンスにアクセスできます。これにより、ユーザーは Service Worker のキャッシュを直接操作したり、キャッシュの状態に基づいてユーザー インターフェースを更新したりしやすくなります。

考えられるユースケースの 1 つは、ユーザーが後で読みたいが、その時点ではオフラインの可能性があるとわかるページに「オフライン用に保存」機能を提供することです。以下の Glitch の埋め込みは、Workbox でこれを行う方法を示しています。

上記の埋め込みでは、「オフライン用に保存」ボタンをクリックすると、app.js スクリプトが window コンテキストからオフライン キャッシュに書き込みを行うことがわかります。Service Worker では、ページの静的アセットがオフライン アクセス用に事前キャッシュされます。NetworkOnly 戦略は、キャッシュに保存されたページのオフライン アクセスを管理する特別なハンドラで使用され、NavigationRoute に渡されます。

Glitch 埋め込みの機能をテストするには、次の手順を行います。

1. 新しいブラウザ ウィンドウを開き、https://save-for-offline-test.glitch.me/ にアクセスします。
2. [オフラインのリーディング リストに追加] ボタンをクリックします。
3. Firefox または Chrome で、ブラウザのデベロッパー ツールを開きます。Chrome を使用している場合は、アプリケーション パネルに移動します。Firefox でストレージ パネルに移動します。
4. どちらのブラウザのデベロッパー ツールでも、左側のペインに [Cache Storage] の項目が表示されます。クリックして展開します。[offline-cache] エントリの右側のペインに、先ほど追加したページの URL が表示されます。
5. ページの下部にあるその他のページのリンクをクリックします。
6. いずれかのブラウザでオフライン モードを切り替えて、オフライン接続をシミュレートします。
7. オフライン キャッシュに追加したページのリンクをクリックします。オフラインの場合でも表示されるはずです。
8. オフライン キャッシュに追加しなかったページのリンクをクリックします。リクエストは失敗します。

これは、window で Cache インスタンスを操作する唯一のユースケースではありません。たとえば、ユーザーが特定の操作を行う必要があることがわかっているアセットを予測的にプリフェッチしてキャッシュに保存できます。これにより、これらのアセットをオンデマンドでダウンロードする際のレイテンシが短縮または回避されます。

他にも有利な可能性のあるユースケースがあります。Service Worker がなくても Cache インスタンスを操作できるため、すべてのユースケースに 1 つのインストールが必要とは限りません。