Serwist(Next.js)の Service Worker基本設定
Next.js
PWA
Serwist
Service Worker
知識
運用
Next.jsでSerwistを使ったService Workerの基本構成。
typescript
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が自動注入するため、型拡張が必要。