プレキャッシュは Service Worker で最もよく行う処理の一つです。Workbox では、Workbox のビルドツールのどれを選択しても、この重要なタスクを完了させる方法を柔軟に選択できます。このガイドでは、generateSW
と injectManifest
の両方を使用してアセットを事前キャッシュに保存する方法と、どの方法がプロジェクトに適しているかについて説明します。
generateSW
を使用したプレキャッシュ
Workbox でアセットを事前キャッシュするには、generateSW
を使用するのが最も簡単な方法です。generateSW
について覚えておくべき重要な点は、独自の Service Worker を記述しているのではなく、Workbox に生成を指示しているということです。ただし、さまざまな構成オプションでその動作に影響を与えることはできます。
generateSW
のデフォルトでは、使用するビルドツールに応じて異なる処理が行われます。workbox-webpack-plugin
を使用する場合、構成オプションを指定する必要はありません。デフォルトでは、プラグインは webpack 内の依存関係グラフに含まれるすべてを事前キャッシュし、service-worker.js
という名前の Service Worker を output.path
で指定されたディレクトリに書き込みます。
一方、workbox-build
または workbox-cli
を使用する場合、デフォルトでプリキャッシュされるのは、ローカル ファイルシステムから読み取られた HTML、CSS、JavaScript のアセットのみです。構成の点では、事前キャッシュが機能するように、generateSW
構成で swDest
と globDirectory
オプションを指定する必要があります。Service Worker の動作に影響する追加のオプションを構成したいと思うこともあるかと思います。ドキュメントをご覧ください。
injectManifest
を使用したプレキャッシュ
injectManifest
は、generateSW
を使用するほど簡単ではありませんが、使いやすさと引き換えに柔軟性が向上します。generateSW
が Service Worker の全世代を処理する場合、injectManifest
は、作成した Service Worker をソースとして受け取り、URL のリストをプリキャッシュに挿入します。Service Worker の残りの部分は何もする必要はありません。
injectManifest
を使用する場合は、プレキャッシュ ロジックを接続する必要があります。injectManifest
は、入力 Service Worker を調べるときに、特別な self.__WB_MANIFEST
変数を探してプリキャッシュ マニフェストに置き換えます。この変数が存在しない場合、injectManifest
はエラーをスローします。
プリキャッシュ マニフェストのエントリのリストは、追加の構成オプションで調整できます。
横並びでの比較
以下の各タブをクリックして、generateSW
メソッドと injectManifest
メソッドの使用法を比較します。
generateSW
によって Service Worker が生成されるため、指定する必要があるのは構成のみです。workbox-build
を使用した例を以下に示します。
// build-sw.js
import {generateSW} from 'workbox-build';
generateSW({
swDest: './dist/sw.js',
globDirectory: './dist',
globPatterns: [
'**/*.js',
'**/*.css',
'**/*.svg'
]
});
その後、Node を使用してコマンドラインで Service Worker を構築できます。
node build-sw.js
injectManifest
にはソース Service Worker が必要なため、最小限の実用例にはソース Service Worker ファイルが必要です。必要なことがプレキャッシュのみの場合、入力 Service Worker は次のようになります。
import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute(self.__WB_MANIFEST);
self.__WB_MANIFEST
文字列をメモします。これは、Workbox がプリキャッシュ マニフェストに置き換えるプレースホルダです。このユースケースに有効な構成は次のとおりです。
// build-sw.js
import {injectManifest} from 'workbox-build';
injectManifest({
swSrc: './src/sw.js',
swDest: './dist/sw.js',
globDirectory: './dist',
globPatterns: [
'**/*.js',
'**/*.css',
'**/*.svg'
]
});
injectManifest
は、高度なルーティングやカスタム キャッシュ戦略など、generateSW
が提供するオプションではカバーされない複雑な要件がある場合に適しています。
まとめ
特にバンドラによってコンパイルされたバージョニングされたアセットが関係する場合は、独自にプリキャッシュを管理する場合よりも、ワークボックスでのプレキャッシュの方がはるかにシンプルです。しかし、Service Worker で行うのはプレキャッシュだけではありません。その過程で、ランタイム キャッシュなど、他の手法も学習します。