ワークボックスは、あらゆるプロジェクトのビルドプロセスに対応できる柔軟性を備えています。つまり、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 など)を使用する場合。
- アプリケーションのニーズに合わせて Service Worker を微調整するために、追加のスクリプトをインポートしたり、特定の Workbox モジュールを使用したりするために、柔軟性をさらに高める必要があります。
injectManifest
を使用するタイミング
次の場合は injectManifest
を使用する必要があります。
- ファイルを事前キャッシュに保存し、独自の Service Worker を記述したいと考えています。
- キャッシュまたはルーティングに関して複雑なニーズがあり、
generateSW
の構成オプションでは表現できない - Service Worker で他の API(Web Push など)を使用する場合。
injectManifest
は、ソース Service Worker ファイルを指定する必要がある点で generateSW
と異なります。このワークフローでは、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
ファイルを使用してオプションを指定する代わりに、generateSW
メソッドまたは injectManifest
メソッドを Node スクリプトの一部として直接使用し、同様のオプションのセットを渡します。
// 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
ディレクトリに書き込まれます。
Bundler の使用
さまざまなバンドラに独自の 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
とは異なりますが、かなり重複しています。特に、Webpack は製品版アセットのバンドル先をすでに認識しているため、GenerateSW
に globDirectory
オプションを指定する必要はなく、指定することもできません。
フレームワークを使用する
ここまでで説明した内容は、フレームワークの設定に関係なく Workbox を使用することに重点を置いています。ただし、開発が容易になるのであれば、特定のフレームワーク内で Workbox を使用することもできます。たとえば、create-react-app
には、デフォルトで Workbox が搭載されています。Workbox との各種フレームワークの統合については、後の記事で説明します。
これらのフレームワーク固有の Workbox の統合により、希望どおりに Workbox を構成する機能が制限される可能性があるので注意してください。このような場合は、ここで説明する方法にいつでもフォールバックできます。
ビルドプロセスがない場合はどうなりますか?
このドキュメントでは、プロジェクトにビルドプロセスが存在することを前提としていますが、実際にはプロジェクトに存在しない場合もあります。このような場合は、workbox-sw
モジュールで Workbox を使用できます。workbox-sw
を使用すると、Workbox ランタイムを CDN から、またはローカルに読み込んで、独自の Service Worker を作成できます。
まとめ
Workbox は柔軟性に優れているため、フレームワークやツールチェーンの設定に関係なく、ほぼすべてのプロジェクトで使用できます。これらすべての手段により、いくつかの方法でプリキャッシュとランタイム キャッシュを実現しながら、必要に応じてより高度な機能を使用して Service Worker を柔軟に構築できます。