Cache

const CACHE_VERSION = 1;
const CURRENT_CACHES = {
  font: `font-cache-v${CACHE_VERSION}`,
};

self.addEventListener("activate", (event) => {
  // CURRENT_CACHES で指定されていないすべてのキャッシュを削除します。
  // この例ではキャッシュは 1 つしかありませんが、同じロジックで
  // 複数のバージョン化されたキャッシュがある場合も処理できます。
  const expectedCacheNamesSet = new Set(Object.values(CURRENT_CACHES));
  event.waitUntil(
    caches.keys().then((cacheNames) =>
      Promise.all(
        cacheNames.map((cacheName) => {
          if (!expectedCacheNamesSet.has(cacheName)) {
            // このキャッシュ名が「予期される」キャッシュ名のセットに
            // 存在しない場合は、削除します。
            console.log("期限切れのキャッシュを削除:", cacheName);
            return caches.delete(cacheName);
          }
        }),
      ),
    ),
  );
});

self.addEventListener("fetch", (event) => {
  console.log("Handling fetch event for", event.request.url);

  event.respondWith(
    caches.open(CURRENT_CACHES.font).then((cache) => {
      return cache
        .match(event.request)
        .then((response) => {
          if (response) {
            // event.request の項目がキャッシュにある場合、レスポンスが定義され、
            // それを返すことができます。
            // この例では、フォントリソースのみがキャッシュされることに注意してください。
            console.log(" キャッシュ内にレスポンスあり:", response);

            return response;
          }

          // それ以外の場合、event.request の項目がキャッシュにない場合、
          // レスポンスは undefined となり、リソースを fetch() する必要があります。
          console.log(
            " キャッシュ内に %s のレスポンスが見つかりません。" +
              "ネットワークから取得します…",
            event.request.url,
          );

          // 後で cache.put() の呼び出しで使用する可能性があるため、
          // リクエストで .clone() を呼び出します。
          // fetch() と cache.put() の両方がリクエストを「消費」するため、
          // コピーを作成する必要があります。
          // （https://developer.mozilla.org/ja/docs/Web/API/Request/clone を参照）
          return fetch(event.request.clone()).then((response) => {
            console.log(
              "  ネットワークからの %s のレスポンス: %O",
              event.request.url,
              response,
            );

            if (
              response.status < 400 &&
              response.headers.has("content-type") &&
              response.headers.get("content-type").match(/^font\//i)
            ) {
              // これにより、エラーであることがわかっているレスポンス（つまり、
              // HTTP ステータスコード 4xx または 5xx）のキャッシュが回避されます。
              // また、フォントに対応するレスポンス、すなわち "font/" で始まる
              // Content-Type レスポンスヘッダーを持つもののみをキャッシュする
              // ようにします。
              // なお、不透明なフィルターされたレスポンス
              // https://fetch.spec.whatwg.org/#concept-filtered-response-opaque
              // の場合はレスポンスヘッダーにアクセスできないので、このチェックは
              // 常に失敗し、フォントはキャッシュされません。
              // すべての Google Web Fonts は CORS をサポートするドメインから
              // 提供されるため、ここでは問題になりません。
              // ただし、CORS をサポートしていない他のオリジンのドメインから他の
              // リソースをキャッシュしようとしている場合は、注意が必要です。
              console.log("  レスポンスをキャッシュ: ", event.request.url);
              // レスポンスに対して .clone() を呼び出して、そのコピーを
              // キャッシュに保存します。そうすることで、制御されたページに戻る
              // 元のレスポンスオブジェクトを保持することができます。
              // https://developer.mozilla.org/ja/docs/Web/API/Request/clone
              cache.put(event.request, response.clone());
            } else {
              console.log(
                "  レスポンスをキャッシュしない: ",
                event.request.url,
              );
            }

            // 元のレスポンスオブジェクトを返します。これは、リソース要求を満たすために使用されます。
            return response;
          });
        })
        .catch((error) => {
          // この catch() は、match() または fetch() 操作から発生する
          // 例外を処理します。
          // HTTP エラーレスポンス（404 など）は例外を起動しないことに
          // 注意してください。
          // 適切なエラーコードが設定された、通常のレスポンスオブジェクトを
          // 返します。
          console.error("  フェッチハンドラーのエラー:", error);

          throw error;
        });
    }),
  );
});