Workboxのプラグインについて

PWAにおいて肝となるのがキャッシュです。あるURLにアクセスした時にコンテンツを返却するのがキャッシュですが、HTML5におけるCACHE APIはすべてプログラムから操作しなければならず、実装が大変です。

そこで使ってみたいのがWorkboxになります。Google製のPWAにおけるキャッシュコントロールを便利にしてくれるライブラリになります。今回はWorkboxに対応しているプラグインと、その機能を紹介します。

workbox.backgroundSync.Plugin

ネットワークがオフラインだった場合、オンラインになったタイミングで同期してくれます。queueArgsとしてキューに送信する引数を指定します。

workbox.broadcastUpdate.Plugin

キャッシュを更新した時に、それをメッセージングしてくれます。メインスレッドのJavaScriptで受け取ったならば、表示を更新したりユーザに再読込を促したりできるでしょう。チャンネル名を指定します。

オプションは以下の通りです。

• headersToCheck
  チェックするヘッダーを指定。
• source
  データ元のソースを指定。

workbox.cacheableResponse.Plugin

キャッシュする際のヘッダーレスポンスを指定。

オプションは以下の通りです。

• statuses
  キャッシュするHTTPレスポンスコードを配列で指定。
• headers
  キャッシュするHTTPレスポンスヘッダーをオブジェクトで指定。

workbox.expiration.Plugin

キャッシュに有効期限を付けられるプラグイン。

オプションは以下の通りです。

• maxEntries
  最大の登録数。
• maxAgeSeconds
  有効期限。秒で指定。
• purgeOnQuotaError
  容量制限に引っかかった場合はエラーにするかどうか。

workbox.rangeRequests.Plugin

HTTPのRangeへのアクセス対応用です。分割ファイルをリクエスト、キャッシュするのに使います。

自作プラグインの作り方

プラグインは以下の5つのメソッドを持ったオブジェクトになります。

• cacheWillUpdate
• cacheDidUpdate
• cachedResponseWillBeUsed
• requestWillFetch
• fetchDidFail

Workboxを使えばキャッシュのコントロールが柔軟になります。プラグインを使ったり、自作することでより簡単に実装できるようになるでしょう。ぜひ使い方を覚えましょう。

Workbox | Google Developers