Workbox は、あらゆるプロジェクトのビルドプロセスに対応できる柔軟性を備えています。つまり、Workbox には複数の使用方法があり、プロジェクトに適した統合を選択できます。Workbox との統合方法に関係なく、さまざまなツールが同様の API を提供します。
generateSW
対 injectManifest
Workbox のビルドツールの 2 つのコアメソッド(generateSW
または injectManifest
)のいずれかを使用します。どちらを使用すべきかは、どの程度の柔軟性が必要かによって異なります。generateSW
では、柔軟性と引き換えに、使いやすさとシンプルさが重視されています。構成オプションのセットを宣言することで、完全に機能する Service Worker を利用できるようになります。
injectManifest
は、ある程度は単純ですが、柔軟性が優れています。これは、最終的に Service Worker のコードを記述することになるため、injectManifest
は Workbox のプレキャッシュ メソッドで使用できるプリキャッシュ マニフェストを提供します。
generateSW
を使用するケース
次の場合は generateSW
を使用する必要があります。
- ビルドプロセスに関連するファイル(事前に把握していない可能性があるハッシュが URL に含まれているファイルなど)を事前キャッシュしたいとします。
generateSW
のオプションで構成できる、シンプルなランタイム キャッシュが必要な場合。
generateSW
を使用しない場合
逆に、次の場合は generateSW
を使用しないでください。
- Service Worker のその他の機能(Web push など)を使用したい場合。
- 追加のスクリプトをインポートしたり、特定の Workbox モジュールを使用してアプリケーションのニーズに合わせて Service Worker を微調整したりするには、さらに柔軟性が必要です。
injectManifest
を使用するケース
次の場合は injectManifest
を使用する必要があります。
- ファイルを事前キャッシュしたいが、独自の Service Worker を作成したいとします。
generateSW
の構成オプションでは表現できない複雑なキャッシュ保存またはルーティングのニーズがある- Service Worker で他の API(ウェブ push など)を使用したい場合。
injectManifest
は generateSW
と異なり、ソースの Service Worker ファイルを指定する必要があります。このワークフローでは、injectManifest
がプリキャッシュ マニフェストに置き換えることができるように、ソース Service Worker ファイルに特別な self.__WB_MANIFEST
文字列を含める必要があります。
injectManifest
を使用しない場合
次の場合は、injectManifest
を使用しないでください。
- Service Worker で事前キャッシュを使用したくない。
- Service Worker の要件はシンプルであり、
generateSW
とその構成オプションで対応できます。 - 柔軟性よりも使いやすさを優先します。
Workbox のビルドツールを使用する
フレームワークに依存しない方法でビルドプロセスで Workbox を使用するには、次の 3 つの方法があります。
workbox-cli
workbox-build
。コマンドライン ツール。- バンドラを使用する(
workbox-webpack-plugin
など)。
これらのビルドツールにはそれぞれ、generateSW
モードと injectManifest
モードの両方があり、オプション セットも類似しています。Workbox を利用する Service Worker を特定のフレームワークに関連付けたくない場合は、これらはすべて適切な選択肢となります。どの方法が最適なのかを知るために、それぞれを簡単に見てみましょう。
workbox-cli
Workbox で導入へのハードルを可能な限り低く抑えたい場合は、CLI が最適です。
npm install workbox-cli --save-dev
CLI の使用を開始するには、npx workbox wizard
を指定してウィザードを実行します。ウィザードでいくつか質問します。その回答を基に、ニーズに合わせてカスタマイズできる workbox-config.js
ファイルを使用してプロジェクトを設定します。次のようになります。
// A config for `generateSW`
export default {
globDirectory: 'dist/',
globPatterns: [
'**/*.{css,woff2,png,svg,jpg,js}'
],
swDest: 'dist/sw.js'
};
構成ファイルが作成されると、CLI で generateSW
メソッドまたは injectManifest
メソッドを実行できます。詳細情報と使用例については、CLI のヘルプテキストをご覧ください。
workbox-build
workbox-cli
は workbox-build
モジュールのラッパーであり、代わりに workbox-build
を直接使用することもできます。workbox-build
を使用する場合は、workbox-config.js
ファイルを使用してオプションを指定するのではなく、Node スクリプトの一部として generateSW
メソッドまたは injectManifest
メソッドを直接使用して、同様のオプション セットを渡します。
// build-sw.mjs
import {generateSW} from 'workbox-build';
generateSW({
globDirectory: 'dist/',
globPatterns: [
'**/*.{css,woff2,png,svg,jpg,js}'
],
swDest: 'dist/sw.js'
});
上記の例では、node build-sw.mjs
コマンドを実行すると、workbox-build
は生成された Service Worker を dist
ディレクトリに書き込みます。
バンドラの使用
さまざまなバンドラに独自の Workbox プラグインがありますが、Workbox チームが公式にサポートしているバンドラは workbox-webpack-plugin
の webpack のみです。workbox-cli
や workbox-build
と同様に、workbox-webpack-plugin
は generateSW
メソッドまたは injectManifest
メソッドを実行しますが、プラグインはこれらのメソッド名を GenerateSW
または InjectManifest
と大文字にします。それ以外の場合、使用方法は workbox-build
のようになります。
// webpack.config.js
import {GenerateSW} from 'workbox-webpack-plugin';
export default {
// Other webpack config options omitted for brevity...
plugins: [
new GenerateSW({
swDest: './dist/sw.js'
})
]
};
GenerateSW
または InjectManifest
に渡すオプションは generateSW
や injectManifest
とは異なりますが、かなりの部分が重複しています。特に、GenerateSW
の globDirectory
オプションを指定する必要はなく、指定もできません。Webpack は、製品版アセットがバンドルされている場所をすでに認識しています。
フレームワークを使用する
ここまでの内容はすべて、フレームワークの設定に関係なく Workbox を使用することに重点を置いています。ただし、開発が容易であれば、特定のフレームワーク内で Workbox を使用できます。たとえば、create-react-app
にはデフォルトで Workbox が付属しています。Workbox とのさまざまなフレームワークの統合については、後の記事で説明します。
このように Workbox のフレームワーク固有の統合により、Workbox を思いどおりに構成する能力が制限される場合があります。このような場合は、ここで説明するメソッドにいつでもフォールバックできます。
ビルドプロセスがない場合はどうなりますか?
このドキュメントでは、プロジェクトにビルドプロセスがあることを前提としていますが、実際のプロジェクトにはビルドプロセスがない場合があります。そのような状況であれば、Workbox を workbox-sw
モジュールでも使用できます。workbox-sw
を使用すると、CDN から、またはローカルで Workbox ランタイムを読み込み、独自の Service Worker を作成できます。
おわりに
Workbox は柔軟性に優れているため、フレームワークやツールチェーンの設定に関係なく、ほぼすべてのプロジェクトで使用できます。これらすべての手段で、いくつかの方法でプレキャッシュとランタイム キャッシュを実現できると同時に、必要に応じてより高度な機能を備えた Service Worker を柔軟に構築できます。