Updated service worker propagation

static/sw.js

@@ -1,13 +1,12 @@
-const VERSION = '1.19';
-const CACHE_NAME = `gottesdienste-v${VERSION}`;
-const assets = [
-  '/', 
-  `/static/app.css?v=${VERSION}`,
-  `/static/app.js?v=${VERSION}`,
-  `/static/gallery.css?v=${VERSION}`,
-  `/static/gallery.js?v=${VERSION}`,
-  `/static/audioplayer.css?v=${VERSION}`,
-  `/static/audioplayer.js?v=${VERSION}`,
+const CACHE_NAME = 'gottesdienste-app';
+const ASSETS = [
+  '/',
+  '/static/app.css',
+  '/static/app.js',
+  '/static/gallery.css',
+  '/static/gallery.js',
+  '/static/audioplayer.css',
+  '/static/audioplayer.js',
   '/icon/logo-192x192.png',
   '/icon/logo-300x300.png',
   '/icon/logo-512x512.png',
@@ -19,7 +18,7 @@ self.addEventListener('install', evt => {
   self.skipWaiting();
   evt.waitUntil(
     caches.open(CACHE_NAME)
-      .then(cache => cache.addAll(assets))
+      .then(cache => cache.addAll(ASSETS))
   );
 });
 
@@ -33,24 +32,48 @@ self.addEventListener('activate', evt => {
           .map(k => caches.delete(k))
       )
     )
-    .then(() => {
-      // Reload to use new files
-      return self.clients.matchAll({ type: 'window' })
-        .then(clients =>
-          clients.forEach(client => client.navigate(client.url))
-        );
-    })
   );
 });
 
+const RICH_MEDIA_TYPES = ['style', 'script', 'font'];
+
+async function networkFirst(request) {
+  const cache = await caches.open(CACHE_NAME);
+  try {
+    const fresh = await fetch(request);
+    cache.put(request, fresh.clone());
+    return fresh;
+  } catch (err) {
+    const cached = await cache.match(request);
+    if (cached) return cached;
+    throw err;
+  }
+}
+
+async function cacheFirst(request) {
+  const cache = await caches.open(CACHE_NAME);
+  const cached = await cache.match(request);
+  if (cached) return cached;
+  const fresh = await fetch(request);
+  cache.put(request, fresh.clone());
+  return fresh;
+}
+
 self.addEventListener('fetch', evt => {
-  if (evt.request.mode === 'navigate') {
+  const { request } = evt;
+  if (request.method !== 'GET') return;
+
+  if (request.mode === 'navigate') {
     evt.respondWith(
-      fetch(evt.request).catch(() => caches.match('/app.html'))
+      fetch(request).catch(() => caches.match('/'))
     );
     return;
   }
-  evt.respondWith(
-    caches.match(evt.request).then(cached => cached || fetch(evt.request))
-  );
+
+  if (RICH_MEDIA_TYPES.includes(request.destination)) {
+    evt.respondWith(networkFirst(request));
+    return;
+  }
+
+  evt.respondWith(cacheFirst(request));
 });