Workboxを使ってPWAのキャッシュを作成する
Googleが提供するWorkboxはService Workerを使う上で必須とも言える機能を提供してくれます。特にキャッシュ周りの面倒な操作を手軽に行ってくれるのが利点です。
今回はそんなWorkboxでキャッシュを作成する方法を紹介します。
インストール
Workboxのインストールはローカルにファイルを設置することもできますが、importScriptsでリモートファイルを指定するのが最も簡単です。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.1/workbox-sw.js'); |
これで workbox というグローバル変数が定義されます。
パターンで登録する
一般的にキャッシュを作成する場合、URL単位で指定します。しかしWorkboxの場合は正規表現パターンで指定できます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| workbox.routing.registerRoute( | |
| new RegExp('.*\.js'), | |
| workbox.strategies.cacheFirst() | |
| ); |
このように定義することで、 *.js のリクエストに対してはキャッシュファーストで返してくれるようになります。他にも workbox.strategies.networkFirst() や workbox.strategies.staleWhileRevalidate() も用意されています。
キャッシュを正規表現で指定することで、多数のファイルをまとめてキャッシュ化できます。特定ファイルはキャッシュしないというポリシーであっても、正規表現で指定すれば問題ありません。WorkboxはService Worker利用時には欠かせないツールと言えます。ぜひ使いこなしてください！
hifive開発者ブログ 
コメントは受け付けていません。