Workboxでキャッシュの有効期限を付ける
PWAのCACHE APIにおいて問題になりがちなのが、キャッシュが更新されないということです。基本的にプログラム側から削除や更新しない限り、キャッシュは恒久的に残り続けます。
Googleが開発するWorkboxを使えば、キャッシュに有効期限を設けられます。そうすれば一定時間経過すれば自動的にキャッシュがなくなってコンテンツがリフレッシュされます。
有効期限の付け方
有効期限を設ける時には、キャッシュ作成時に workbox.expiration.Plugin を指定します。
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(/\.(?:png|gif|jpg|jpeg|svg)$/, | |
| workbox.strategies.cacheFirst({ | |
| cacheName: 'images', | |
| plugins: [ | |
| new workbox.expiration.Plugin({ | |
| maxEntries: 60, | |
| maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days | |
| }), | |
| ], | |
| }), | |
| ); |
これを見て分かる通り、キャッシュ名を指定して作成するので、有効期限はキャッシュ名単位になります。一般的にはキャッシュ名を一つで運用してしまいがちですが、リソースの種類によって有効期限を変えるのは面白そうです。
キャッシュコントロールの難しさがPWAの導入を遅らせているとも言えます。Workboxを使って、キャッシュを適切にコントロールしてください。
hifive開発者ブログ 
コメントは受け付けていません。