https://meme-soundboards.com/sw.js

1const CACHE_NAME = 'memesoundboard-v2';
2const urlsToCache = [
3  '/manifest.json',
4  '/favicon.ico',
5];
6
7// Install event - cache static assets only (never cache HTML)
8self.addEventListener('install', (event) => {
9  event.waitUntil(
10    caches.open(CACHE_NAME)
11      .then((cache) => {
12        console.log('Opened cache');
13        return cache.addAll(urlsToCache);
14      })
15  );
16  self.skipWaiting();
17});
18
19// Fetch event - network-first for HTML, cache-first only for static assets
20self.addEventListener('fetch', (event) => {
21  const { request } = event;
22  const url = new URL(request.url);
23
24  // Navigation/document requests: always prefer network (fixes stale HTML → broken CSS)
25  if (request.mode === 'navigate') {
26    event.respondWith(
27      fetch(request).catch(() => caches.match(request))
28    );
29    return;
30  }
31
32  // Static assets (manifest, favicon, etc.): cache-first is fine
33  if (url.pathname === '/manifest.json' || url.pathname === '/favicon.ico') {
34    event.respondWith(
35      caches.match(request).then((response) => response || fetch(request))
36    );
37    return;
38  }
39
40  // Everything else (CSS, JS, images): bypass SW, go straight to network
41  // This prevents stale chunks from breaking the site after deploys
42});
43
44// Activate event - clean up old caches
45self.addEventListener('activate', (event) => {
46  event.waitUntil(
47    caches.keys().then((cacheNames) => {
48      return Promise.all(
49        cacheNames.map((cacheName) => {
50          if (cacheName !== CACHE_NAME) {
51            console.log('Deleting old cache:', cacheName);
52            return caches.delete(cacheName);
53          }
54        })
55      );
56    })
57  );
58});