From c9fad505c5211516692840a9eadaab45b645a6d4 Mon Sep 17 00:00:00 2001 From: undefined Date: Fri, 24 Nov 2023 05:46:41 +0800 Subject: [PATCH] ui: sw: cache fs resources --- packages/ui-default/service-worker.ts | 28 +++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/packages/ui-default/service-worker.ts b/packages/ui-default/service-worker.ts index 3649bd74..6496556f 100644 --- a/packages/ui-default/service-worker.ts +++ b/packages/ui-default/service-worker.ts @@ -177,16 +177,23 @@ async function get(request: Request) { return fetch(request); } +function transformUrl(url: string) { + const urlObject = new URL(url); + if (urlObject.pathname.startsWith('/fs/')) urlObject.search = ''; + return urlObject.toString(); +} + async function cachedRespond(request: Request) { - const cachedResponse = await caches.match(request.url); + const url = transformUrl(request.url); + const cachedResponse = await caches.match(url); if (cachedResponse) return cachedResponse; - console.log(`Caching ${request.url}`); + console.log(`Caching ${url}`); const [cache, response] = await Promise.all([ caches.open(PRECACHE), get(request), ]); if (response.ok) { - cache.put(request.url, response.clone()); + cache.put(url, response.clone()); return response; } return fetch(request); @@ -215,18 +222,19 @@ self.addEventListener('fetch', (event: FetchEvent) => { const targets = config.domains.map((i) => { const t = new URL(event.request.url); t.host = i; - return t.toString(); + return transformUrl(t.toString()); }); const results = await Promise.all(targets.map((i) => caches.match(i))); - if (results.find((i) => i)) return results.find((i) => i); - return cachedRespond(event.request); + return results.find((i) => i) || cachedRespond(event.request); } - const cachedResponse = await caches.match(url); + const transformedUrl = transformUrl(event.request.url); + const cachedResponse = await caches.match(transformedUrl); if (cachedResponse) return cachedResponse; - console.log(`Caching ${event.request.url}`); + console.log(`Caching ${transformedUrl}`); const [cache, response] = await Promise.all([ caches.open(PRECACHE), fetch(url, { + method: event.request.method, headers: event.request.headers, redirect: event.request.redirect, keepalive: event.request.keepalive, @@ -236,10 +244,10 @@ self.addEventListener('fetch', (event: FetchEvent) => { }), // Fetch from url to prevent opaque response ]); if (response.ok) { - cache.put(url, response.clone()); + cache.put(transformedUrl, response.clone()); return response; } - console.log(`Failed to cache ${event.request.url}`, response); + console.log(`Failed to cache ${transformedUrl}`, response); // If response fails, re-fetch the original request to prevent // errors caused by different headers and do not cache them return fetch(event.request);