Progressive Web App (PWA)

1// public/sw.js
2const CACHE_NAME = 'my-app-v1';
3const STATIC_FILES = ['/', '/offline.html', '/main.css', '/app.js'];
4
5// 설치 — 정적 파일 캐싱
6self.addEventListener('install', (event) => {
7  event.waitUntil(
8    caches.open(CACHE_NAME).then((cache) => cache.addAll(STATIC_FILES))
9  );
10  self.skipWaiting(); // 즉시 활성화
11});
12
13// 활성화 — 이전 버전 캐시 삭제
14self.addEventListener('activate', (event) => {
15  event.waitUntil(
16    caches.keys().then((keys) =>
17      Promise.all(
18        keys
19          .filter((key) => key !== CACHE_NAME)
20          .map((key) => caches.delete(key))
21      )
22    )
23  );
24  self.clients.claim();
25});
26
27// fetch 이벤트 — Cache First 전략
28self.addEventListener('fetch', (event) => {
29  event.respondWith(
30    caches.match(event.request).then((cached) => {
31      return cached || fetch(event.request).catch(() =>
32        caches.match('/offline.html')
33      );
34    })
35  );
36});