https://matthewregis.dev/sw.js

1const CACHE_NAME = 'matthewregis-dev-cache-v1';
2const ASSETS_TO_CACHE = [
3  '/',
4  '/assets/css/main.css',
5  '/assets/css/theme-switcher.css',
6  '/search.results.json',
7  '/favicon.ico'
8];
9
10// Install event: cache core shell assets
11self.addEventListener('install', event => {
12  event.waitUntil(
13    caches.open(CACHE_NAME)
14      .then(cache => cache.addAll(ASSETS_TO_CACHE))
15      .then(() => self.skipWaiting())
16  );
17});
18
19// Activate event: clean up old caches
20self.addEventListener('activate', event => {
21  event.waitUntil(
22    caches.keys().then(cacheNames => {
23      return Promise.all(
24        cacheNames.map(cache => {
25          if (cache !== CACHE_NAME) {
26            return caches.delete(cache);
27          }
28        })
29      );
30    }).then(() => self.clients.claim())
31  );
32});
33
34// Fetch event: Network-First for HTML pages, Cache-First for static assets
35self.addEventListener('fetch', event => {
36  const request = event.request;
37  const url = new URL(request.url);
38
39  // Network-First for HTML/navigate requests
40  if (request.mode === 'navigate' || url.pathname.endsWith('.html') || url.pathname === '/') {
41    event.respondWith(
42      fetch(request)
43        .then(response => {
44          const copy = response.clone();
45          caches.open(CACHE_NAME).then(cache => cache.put(request, copy));
46          return response;
47        })
48        .catch(() => caches.match(request))
49    );
50    return;
51  }
52
53  // Cache-First for static assets
54  event.respondWith(
55    caches.match(request)
56      .then(cachedResponse => {
57        if (cachedResponse) {
58          return cachedResponse;
59        }
60        return fetch(request).then(response => {
61          if (response.status === 200) {
62            const copy = response.clone();
63            caches.open(CACHE_NAME).then(cache => cache.put(request, copy));
64          }
65          return response;
66        });
67      })
68  );
69});