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 など）を使用する場合。
  • アプリケーションのニーズに合わせて 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 つの方法があります。

  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-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 を柔軟に構築できます。