コンテンツへスキップ

Workboxでキャッシュの有効期限を付ける

by : 2019/02/22

PWAのCACHE APIにおいて問題になりがちなのが、キャッシュが更新されないということです。基本的にプログラム側から削除や更新しない限り、キャッシュは恒久的に残り続けます。

Googleが開発するWorkboxを使えば、キャッシュに有効期限を設けられます。そうすれば一定時間経過すれば自動的にキャッシュがなくなってコンテンツがリフレッシュされます。

有効期限の付け方

有効期限を設ける時には、キャッシュ作成時に workbox.expiration.Plugin を指定します。

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
}),
],
}),
);

view raw
index.js
hosted with ❤ by GitHub

これを見て分かる通り、キャッシュ名を指定して作成するので、有効期限はキャッシュ名単位になります。一般的にはキャッシュ名を一つで運用してしまいがちですが、リソースの種類によって有効期限を変えるのは面白そうです。


キャッシュコントロールの難しさがPWAの導入を遅らせているとも言えます。Workboxを使って、キャッシュを適切にコントロールしてください。

Workbox  |  Google Developers

From → HTML5

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。