PWAのservice workerのキャッシュ化戦略の設定例

ネットにあるものを優先してアクセスする設定例を載せました。

import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';

declare let self: ServiceWorkerGlobalScope

precacheAndRoute(self.__WB_MANIFEST) //キャッシュ化することでロードスピードを向上

// ネットに接続することを優先
registerRoute(
  ({ request }) => request.mode === 'navigate',
  new NetworkFirst()
);

// CSSとJSに対して既存のものを使いつつ、アップデートがあれば更新する
registerRoute(
  ({ request }) => request.destination === 'style' || request.destination === 'script',
  new StaleWhileRevalidate()
);

// 画像をキャッシュ化する、保存期間は7日間
registerRoute(
  ({ request }) => request.destination === 'image',
  new StaleWhileRevalidate({
    cacheName: 'image-cache',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 60,
        maxAgeSeconds: 7 * 24 * 60 * 60,
      }),
    ],
  })
);