Workboxの概要ページを自分の勉強も兼ねて日本語訳に初チャレンジしました。英語は苦手なので、ほぼGoogle翻訳です。何か間違い等あればご指摘頂けると大変助かります。
https://workboxjs.org/overview.html
概要
Workboxは、Webサイトのリソースをローカルに、ユーザーのデバイスに簡単に保存できるライブラリとビルドツールのコレクションです。次の場合は、Workboxを検討してください。
- サイトをオフラインで作業させたい。
- リピート訪問時の負荷パフォーマンスを向上させたい。ワークボックスを使用すれば、共通リソースをネットワークからではなくローカルに格納して提供することができます。
Workboxの背後にある技術
ServiceWorkerを使えば、最新技術であるオフラインWebアプリケーションの構築が可能です。ServiceWorkerはJavaScriptで書かれたバックグラウンドワーカーで、サイトをオフラインで実行するために必要なすべてのリソースをローカルに保存できます。
ServiceWorkerは、ユーザーのデバイスのバックグラウンドで実行されているプロキシサーバーと考えることができます。サイトがリソースを要求し、サービスワーカーが要求を傍受し、ローカルバージョンのリソースを提供するのか、ネットワークから新しいバージョンを取得するのかを決定します。
Workboxがリソースをローカルに格納する場所をキャッシュと呼びます。ローカルに格納する動作をキャッシングと呼びます。Workboxが依存する基盤技術をCache APIと呼びます。これは、HTTPキャッシングとはまったく異なります。 HTTPキャッシュを介してWorkboxが提供する主な利点は、リソースが要求される前にキャッシュすることです。HTTPキャッシュはリソースが必要なページに移動した後にのみしか行われません。実際に必要となる前にリソースを保存することを、プリキャッシュと呼びます。 HTMLドキュメントのプレキャッシングは、Workboxが負荷性能を向上させる主な方法の1つです。
キャッシュからリソースを提供するか、新しいバージョンをフェッチするかを決定するロジックは、そのリソースのキャッシング戦略と呼ばれます。さまざまなタイプのリソースに対し、異なるキャッシング戦略を使用するのが一般的です。例えば：
- 頻繁に変更されないロゴをキャッシュから提供することができます。
- ユーザーのソーシャルメディアフィードを含むJSONファイルの場合は、最新のコンテンツを取得している間だけ、キャッシュされたコンテンツを表示することをお勧めします。
Workboxが解決する問題
Workboxは最適なサービスワーカーコードを簡単に作成できます。
手動でキャッシュを管理するのは退屈で、落とし穴がたくさんあります。 「コア」Workboxライブラリとツールは、リソースを正しくキャッシュするServiceWorkerを自動的に生成することを容易にします。
異なるタイプのリソースに異なるキャッシング戦略を使用する必要がある場合、Workboxはこのプロセスも簡素化します。ロジックの多くは、宣言的なビルドタイムで設定することができます。それ以外の部分は、カスタムのサービスワーカーコードからコアのworkbox-swランタイムライブラリを呼び出すことで抽象化することができます。
Workboxは、あらかじめ用意されたリソースの更新を賢く管理します。つまり、リソースが変更されると、Workboxは変更されたリソースのみをダウンロードし、キャッシュの残りの部分はそのままにします。これは重要な最適化です。他のソリューションでは、単一のリソースが更新されるとキャッシュ全体が無効になり、ServiceWorkerはすべてのリソースを再ダウンロードします。
ワークボックスの使い方
Workboxをプロジェクトに統合する一般的なワークフローは次のとおりです。
- Workboxにキャッシュするリソースを伝える構成ファイルを作成します。
- 各展開の前に、プロジェクトディレクトリのWorkboxツールの1つを実行します。 Workboxは、リソースのキャッシュと更新に必要なサービスワーカーコードを生成します。
ワークフローツールをいくつか用意しています。それぞれのツールは異なるワークフロー用に作成されています。
-
workbox-webpack-plugin: webpack用のプラグインです。 -
workbox-build: GulpやGruntのようなタスクランナー用のツールです。 -
workbox-cli: npmスクリプトまたはコマンドラインで実行する手動生成用のツールです。
シンプルなサイトの場合は、Workboxがサービスワーカー全体を生成できるようにするだけで十分です。例についてはgenerateSWを参照してください。
複雑なサイトの場合は、カスタムルーティングロジックを設定する必要がある可能性があります。その場合、サービスワーカーにWorkboxコードを注入するカスタムサービスワーカーを作成することができます。たとえば、コードは次のようになります。
importScripts('/path/to/workbox-sw.js'); // not the actual filename
const workbox = new WorkboxSW();
// your custom service worker logic here
workbox.precache([]);
Workboxツールを使用してコードを実行した後、最終的に生成されるコードは次のようになります。
importScripts('/path/to/workbox-sw.js'); // not the actual filename
const workbox = new WorkboxSW();
// your custom service worker logic here
workbox.precache([
{
"url": "/index.html",
"revision": "b3e78d93b20c49d0c927050682c99df3"
},
{
"url": "/images/hamburger.svg",
"revision": "d2cb0dda3e8313b990e8dcf5e25d2d0f"
},
]);
詳しい例については、injectManifestを参照してください。