comparison mrjunejune/src/sw.js @ 256:30c2196d03d4

[site] Integrate Zenbu themes and components Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 16:49:01 -0700
parents
children 60a876c4587a
comparison
equal deleted inserted replaced
255:5ec271d612ae 256:30c2196d03d4
1 // Root-scoped Service Worker for MrJuneJune PWA
2 const CACHE_VERSION = 'v5-zenbu-themes';
3 const CACHE_NAME = `mrjunejune-${CACHE_VERSION}`;
4
5 // Files to cache immediately on install
6 const STATIC_CACHE = [
7 '/',
8 '/index.js',
9 '/base.css',
10 '/public/design-system/styles/tokens.css',
11 '/public/design-system/styles/themes.css',
12 '/public/design-system/styles/components.css',
13 '/public/design-system/styles/shadcn.css',
14 '/public/design-system/components/index.js',
15 '/public/design-system/components/alert.js',
16 '/public/design-system/components/button.js',
17 '/public/design-system/components/card.js',
18 '/public/design-system/components/collections.js',
19 '/public/design-system/components/disclosure.js',
20 '/public/design-system/components/field.js',
21 '/public/design-system/components/forms.js',
22 '/public/design-system/components/icon.js',
23 '/public/design-system/components/notifications.js',
24 '/public/design-system/components/overlays.js',
25 '/public/design-system/components/primitives.js',
26 '/public/design-system/components/stack.js',
27 '/public/design-system/components/story.js',
28 '/public/epi_all_colors.svg',
29 '/public/fonts/Roboto-Regular.ttf',
30 '/public/fonts/Roboto-Thin.ttf',
31 '/public/fonts/more-sugar.regular.otf',
32 '/public/fonts/more-sugar.thin.otf',
33 ];
34
35 // Install event - cache static assets
36 self.addEventListener('install', (event) => {
37 console.log('[SW] Installing service worker...');
38
39 event.waitUntil(
40 caches.open(CACHE_NAME).then((cache) => {
41 console.log('[SW] Caching static assets');
42 return cache.addAll(STATIC_CACHE);
43 }).then(() => {
44 console.log('[SW] Skip waiting');
45 return self.skipWaiting();
46 })
47 );
48 });
49
50 // Activate event - clean up old caches
51 self.addEventListener('activate', (event) => {
52 console.log('[SW] Activating service worker...');
53
54 event.waitUntil(
55 caches.keys().then((cacheNames) => {
56 return Promise.all(
57 cacheNames.map((cacheName) => {
58 if (cacheName !== CACHE_NAME) {
59 console.log('[SW] Deleting old cache:', cacheName);
60 return caches.delete(cacheName);
61 }
62 })
63 );
64 }).then(() => {
65 console.log('[SW] Claiming clients');
66 return self.clients.claim();
67 })
68 );
69 });
70
71 // Fetch event - serve from cache, fallback to network
72 self.addEventListener('fetch', (event) => {
73 const { request } = event;
74 const url = new URL(request.url);
75
76 // Skip non-GET requests
77 if (request.method !== 'GET') {
78 return;
79 }
80
81 // Skip chrome-extension and other non-http(s) requests
82 if (!url.protocol.startsWith('http')) {
83 return;
84 }
85
86 // Skip API calls and media uploads (always go to network)
87 if (url.pathname.startsWith('/api/')) {
88 return;
89 }
90
91 // The HLS tool and media must always reflect the current player version.
92 if (url.pathname.startsWith('/tools/hls_player') ||
93 url.pathname.startsWith('/public/hls-sample/')) {
94 return;
95 }
96
97 event.respondWith(
98 caches.match(request).then((cachedResponse) => {
99 if (cachedResponse) {
100 console.log('[SW] Serving from cache:', url.pathname);
101 return cachedResponse;
102 }
103
104 // Not in cache, fetch from network
105 return fetch(request).then((networkResponse) => {
106 // Only cache successful responses
107 if (!networkResponse || networkResponse.status !== 200 || networkResponse.type === 'error') {
108 return networkResponse;
109 }
110
111 // Cache specific file types
112 const shouldCache =
113 url.pathname.endsWith('.css') ||
114 url.pathname.endsWith('.js') ||
115 url.pathname.endsWith('.svg') ||
116 url.pathname.endsWith('.jpg') ||
117 url.pathname.endsWith('.webp') ||
118 url.pathname.endsWith('.woff') ||
119 url.pathname.endsWith('.woff2') ||
120 url.pathname.endsWith('.ttf') ||
121 url.pathname.endsWith('.otf') ||
122 url.pathname.startsWith('/blog/') ||
123 url.pathname.startsWith('/notes/') ||
124 url.pathname === '/';
125
126 if (shouldCache) {
127 const responseToCache = networkResponse.clone();
128 caches.open(CACHE_NAME).then((cache) => {
129 console.log('[SW] Caching new resource:', url.pathname);
130 cache.put(request, responseToCache);
131 });
132 }
133
134 return networkResponse;
135 }).catch((error) => {
136 console.log('[SW] Fetch failed:', error);
137
138 // Return offline page for HTML requests
139 if (request.headers.get('Accept').includes('text/html')) {
140 return caches.match('/offline.html');
141 }
142 });
143 })
144 );
145 });
146
147 // Handle messages from the client
148 self.addEventListener('message', (event) => {
149 if (event.data && event.data.type === 'SKIP_WAITING') {
150 self.skipWaiting();
151 }
152
153 if (event.data && event.data.type === 'CLEAR_CACHE') {
154 event.waitUntil(
155 caches.keys().then((cacheNames) => {
156 return Promise.all(
157 cacheNames.map((cacheName) => caches.delete(cacheName))
158 );
159 })
160 );
161 }
162 });