ワークボックスのコマンドライン インターフェース（
workbox-cli パッケージなど）は、ワークボックスと呼ばれる Node.js プログラムで構成され、
Windows、macOS、または UNIX 互換のコマンドラインから
できます。内部では、workbox-cli が workbox-build モジュールをラップし、
Workbox をコマンドラインビルドに
簡単に統合できます
柔軟に構成できます。
CLI をインストールする
Node を使用して CLI をインストールするには、ターミナルで次のコマンドを実行します。
npm install workbox-cli --global
CLI モード
CLI には 4 つのモードがあります。
wizard: プロジェクトの Workbox を設定するための手順ガイド。generateSW: 完全な Service Worker を生成します。injectManifest: プロジェクトにアセットを挿入してプリキャッシュします。copyLibraries: ワークボックス ライブラリをディレクトリにコピーします。
wizard
Workbox ウィザードにより、ローカル ディレクトリに関する一連の質問が表示されます。
事前キャッシュするファイルを指定します回答は以下の目的で使用されます
実行時に使用できる構成ファイルを生成します。
generateSW モード。
ほとんどの開発者は、ワークボックス ウィザードを 1 回実行すれば済むので、 生成される初期構成ファイルを手動でカスタマイズする ビルド構成オプションを使用できます。
ウィザードを開始するには、次のコマンドを実行します。
npx workbox-cli wizard
generateSW
次のように Workbox CLI を使用して、完全な Service Worker を生成できます。 構成ファイル（ウィザードで生成されたファイルなど）
次のコマンドを実行します。
npx workbox-cli generateSW path/to/config.js
Workbox の組み込みのプレキャッシュとランタイム キャッシュに満足しているデベロッパー
Service Worker の動作をカスタマイズする必要がなくなり、
generateSW モードを使用することをおすすめします。
generateSW を使用するタイミング
- ファイルを事前キャッシュに保存する必要がある。
- シンプルなランタイム キャッシュが必要である。
generateSW を使用すべきでない場合
- Service Worker の他の機能（Web Push など）を使用する場合。
- 追加のスクリプトをインポートするか、カスタム キャッシュ戦略のためのロジックを追加する。
injectManifest
最終的な Service Worker ファイルを細かく制御したいデベロッパー向け
injectManifest モードを使用できます。このモードは、
既存の Service Worker ファイル（場所は config.js で指定）
workbox injectManifest が実行されると、特定の文字列が検索されます。
（デフォルトは precacheAndRoute(self.__WB_MANIFEST)）ソース
必要があります。空の配列が、指定した文字列のリストに
プリキャッシュする URL と、そのファイルに Service Worker ファイルを
宛先のロケーション。config.js の構成オプションに基づきます。
ソース Service Worker のコードの残りの部分はそのままです。
このモードでは以下のように Workbox を使用できます。
npx workbox-cli injectManifest path/to/config.js
injectManifest を使用するタイミング
- Service Worker をより細かく制御したい。
- ファイルを事前キャッシュに保存する必要がある。
- ルーティングと戦略をカスタマイズする必要がある。
- 他のプラットフォーム機能（Web Push など）で Service Worker を使用する場合。
injectManifest を使用すべきでない場合
- サイトに Service Worker を追加する最も簡単な方法
copyLibraries
このモードは、injectManifest を使用する場合に便利です。
独自のオリジンでホストされている Workbox ライブラリ ファイルを代わりに使用したい
確認しました
ファイルを書き込むパスを指定して実行するだけで済みます。
npx workbox-cli copyLibraries third_party/workbox/
ビルドプロセス インテグレーション
Workbox を My Build Process と統合する必要がある理由
Workbox プロジェクトには、複数のライブラリが連携して動作し、 ウェブアプリの Service Worker目的 それらのライブラリを効果的に使用するには、Workbox を ビルドプロセスに進みます。これにより、Service Worker は ウェブアプリの重要なコンテンツすべてを 効率的にキャッシュして コンテンツを最新の状態に保ちます。
workbox-cli がビルドプロセスに適しているかどうか
完全にベースとなっている既存のビルドプロセスがある場合、
npm スクリプト
workbox-cli が適しています。
現在ビルドとして webpack を使用している場合 workbox-webback-plugin を使用して の方が適しています。
現在 Gulp を使用している場合は、 Grunt などの Node.js ベースのビルドツールを使用して、 ビルド スクリプトに workbox-build を統合します。 の方が適しています。
ビルドプロセスがまったくない場合は、それを作成する必要があります Workbox を使用してアセットを事前キャッシュに保存しますTrying ～親になるステップ～ 手動で workbox-cli を実行しないと、エラーが発生しやすく リピーターに古いコンテンツが提供される可能性があります
セットアップと設定
開発環境として workbox-cli をインストールした後
追加するには、workbox の呼び出しを
既存のビルドプロセスの npm スクリプトの最後:
package.json から:
{
"scripts": {
"build": "my-build-script && workbox <mode> <path/to/config.js>"
}
}
<mode> は、generateSW または injectManifest に置き換えます（
）と <path/to/config.js> は、次のパスに置き換えます。
選択できます。構成が作成されている可能性があります
手動で調整することもできます。workbox wizard
構成
generateSW が使用するオプション
すべての構成オプションについては、リファレンス ドキュメントをご覧ください。
injectManifest が使用するオプション
すべての構成オプションについては、リファレンス ドキュメントをご覧ください。