fix: service worker

Author: MakinoharaShoko

packages/webgal/public/webgal-serviceworker.js

@@ -1,63 +1,69 @@
-self.addEventListener('install', (ev) => {
-  // console.log('[service worker] installing');
-  ev.waitUntil(self.skipWaiting());
+const CACHE_NAME = 'webgal-critical-assets-v3';
+const GAME_PREFIX = '/game/';
+const CRITICAL_PATHS = ['/game/background/', '/game/figure/', '/game/bgm/', '/game/vocal/', '/game/video/'];
+const LOG_PREFIX = '[WebGAL SW]';
+const loggedKeys = new Set();
+
+function logOnce(key, ...args) {
+  if (loggedKeys.has(key)) return;
+  loggedKeys.add(key);
+  console.log(LOG_PREFIX, ...args);
+}
+
+self.addEventListener('install', (event) => {
+  logOnce('install', `install ${CACHE_NAME}`);
+  event.waitUntil(self.skipWaiting());
 });
 
-// fetch事件是每次页面请求资源时触发的
-self.addEventListener('fetch', function (event) {
-  const url = event.request.url;
-  const isReturnCache = !!(url.match('/assets/') && !url.match('game'));
-  if (isReturnCache) {
-    // console.log('%cCACHED: ' + url, 'color: #005CAF; padding: 2px;');
+self.addEventListener('activate', (event) => {
+  logOnce('activate', `activate ${CACHE_NAME}`);
+  event.waitUntil(
+    (async () => {
+      const keys = await caches.keys();
+      await Promise.all(keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key)));
+      await self.clients.claim();
+    })(),
+  );
+});
+
+function isCriticalGameRequest(request) {
+  if (request.method !== 'GET') return false;
+  const url = new URL(request.url);
+  if (url.origin !== self.location.origin) return false;
+  if (!url.pathname.startsWith(GAME_PREFIX)) return false;
+  return CRITICAL_PATHS.some((prefix) => url.pathname.startsWith(prefix));
+}
+
+async function cacheFirst(request) {
+  const cache = await caches.open(CACHE_NAME);
+  const cached = await cache.match(request.url);
+  if (cached) {
+    logOnce(`hit:${request.url}`, 'cache hit:', new URL(request.url).pathname);
+    return cached;
   }
-  if (!isReturnCache) {
-    event.respondWith(fetch(event.request));
-  } else {
-    event.respondWith(
-      // 检查在缓存中是否有匹配的资源
-      caches.match(event.request).then(function (response) {
-        // 如果缓存中有匹配的资源，则返回缓存资源
-        if (response) {
-          return response;
-        }
-        // 如果没有匹配的资源，则尝试从网络请求
-        // 同时将获取的资源存入缓存
-        return fetch(event.request)
-          .then(function (networkResponse) {
-            console.log('%cCACHED: ' + url, 'color: #005CAF; padding: 2px;');
-            if (networkResponse.status === 206 && event.request.headers.has('range')) {
-              // 如果是部分响应且请求带有Range头，则创建新的请求，将完整响应返回给客户端
-              // eslint-disable-next-line max-nested-callbacks
-              return fetch(event.request.url).then(function (fullNetworkResponse) {
-                const headers = {};
-                for (let entry of fullNetworkResponse.headers.entries()) {
-                  headers[entry[0]] = entry[1];
-                }
-                const fullResponse = new Response(fullNetworkResponse.body, {
-                  status: fullNetworkResponse.status,
-                  statusText: fullNetworkResponse.statusText,
-                  headers: headers,
-                });
-                const clonedResponse = fullResponse.clone();
-                // eslint-disable-next-line max-nested-callbacks
-                caches.open('my-cache').then(function (cache) {
-                  cache.put(event.request, clonedResponse);
-                });
-                return fullResponse;
-              });
-            }
-            const clonedResponse = networkResponse.clone();
-            // eslint-disable-next-line max-nested-callbacks
-            caches.open('my-cache').then(function (cache) {
-              cache.put(event.request, clonedResponse);
-            });
-            return networkResponse;
-          })
-          .catch(function (error) {
-            console.error('Fetching failed:', error);
-            throw error;
-          });
-      }),
-    );
+
+  const response = await fetch(request);
+  if (response.ok && response.status === 200) {
+    await cache.put(request.url, response.clone());
+    logOnce(`cache:${request.url}`, 'cached:', new URL(request.url).pathname);
   }
+  return response;
+}
+
+self.addEventListener('fetch', (event) => {
+  const { request } = event;
+  if (!isCriticalGameRequest(request)) return;
+
+  // Audio/video range requests are passed through to avoid partial-content edge cases.
+  if (request.headers.has('range')) {
+    logOnce(`range:${request.url}`, 'range passthrough:', new URL(request.url).pathname);
+    event.respondWith(fetch(request));
+    return;
+  }
+
+  event.respondWith(
+    cacheFirst(request).catch(() => {
+      return fetch(request);
+    }),
+  );
 });