Workbox の手法

Workbox は、あらゆるプロジェクトのビルドプロセスに対応できる柔軟性を備えています。つまり、Workbox には複数の使用方法があり、プロジェクトに適した統合を選択できます。Workbox との統合方法に関係なく、さまざまなツールが同様の API を提供します。

generateSWinjectManifest

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 など)を使用したい場合。

injectManifestgenerateSW と異なり、ソースの Service Worker ファイルを指定する必要があります。このワークフローでは、injectManifestプリキャッシュ マニフェストに置き換えることができるように、ソース Service Worker ファイルに特別な self.__WB_MANIFEST 文字列を含める必要があります。

injectManifest を使用しない場合

次の場合は、injectManifest を使用しないでください。

  • Service Worker で事前キャッシュを使用したくない。
  • Service Worker の要件はシンプルであり、generateSW とその構成オプションで対応できます。
  • 柔軟性よりも使いやすさを優先します。

Workbox のビルドツールを使用する

フレームワークに依存しない方法でビルドプロセスで Workbox を使用するには、次の 3 つの方法があります。

  1. workbox-cli
  2. workbox-build。コマンドライン ツール。
  3. バンドラを使用する(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-cliworkbox-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-cliworkbox-build と同様に、workbox-webpack-plugingenerateSW メソッドまたは 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 に渡すオプションは generateSWinjectManifest とは異なりますが、かなりの部分が重複しています。特に、GenerateSWglobDirectory オプションを指定する必要はなく、指定もできません。Webpack は、製品版アセットがバンドルされている場所をすでに認識しています。

フレームワークを使用する

ここまでの内容はすべて、フレームワークの設定に関係なく Workbox を使用することに重点を置いています。ただし、開発が容易であれば、特定のフレームワーク内で Workbox を使用できます。たとえば、create-react-app にはデフォルトで Workbox が付属しています。Workbox とのさまざまなフレームワークの統合については、後の記事で説明します

このように Workbox のフレームワーク固有の統合により、Workbox を思いどおりに構成する能力が制限される場合があります。このような場合は、ここで説明するメソッドにいつでもフォールバックできます。

ビルドプロセスがない場合はどうなりますか?

このドキュメントでは、プロジェクトにビルドプロセスがあることを前提としていますが、実際のプロジェクトにはビルドプロセスがない場合があります。そのような状況であれば、Workbox を workbox-sw モジュールでも使用できます。workbox-sw を使用すると、CDN から、またはローカルで Workbox ランタイムを読み込み、独自の Service Worker を作成できます。

おわりに

Workbox は柔軟性に優れているため、フレームワークやツールチェーンの設定に関係なく、ほぼすべてのプロジェクトで使用できます。これらすべての手段で、いくつかの方法でプレキャッシュとランタイム キャッシュを実現できると同時に、必要に応じてより高度な機能を備えた Service Worker を柔軟に構築できます。