Next.jsでSerwistを使ったService Workerの基本構成。

import { defaultCache } from '@serwist/next/worker';
import { Serwist } from 'serwist';
import type { PrecacheEntry, SerwistGlobalConfig } from 'serwist';

declare global {
  interface WorkerGlobalScope extends SerwistGlobalConfig {
    __SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
  }
}

declare const self: ServiceWorkerGlobalScope;

const serwist = new Serwist({
  precacheEntries: self.__SW_MANIFEST,
  skipWaiting: true,
  clientsClaim: true,
  navigationPreload: true,
  runtimeCaching: defaultCache,
});

serwist.addEventListeners();

主な設定項目:

• precacheEntries: ビルド時に生成されるマニフェストからプリキャッシュ対象を取得
• skipWaiting: 新しいSWが即座にアクティブになる
• clientsClaim: アクティブ時に全クライアントを制御下に置く
• navigationPreload: ナビゲーションリクエストのプリロード有効化
• runtimeCaching: 実行時キャッシュ戦略（defaultCacheはSerwistのデフォルト）

__SW_MANIFEST はビルド時にSerwistが自動注入するため、型拡張が必要。