better caching service worker

This commit is contained in:
creeper123123321 2022-09-16 16:08:32 -03:00
parent 1d1959d86e
commit 56239d7ce8
4 changed files with 40 additions and 45 deletions

View File

@ -15,7 +15,7 @@
<link rel="manifest" href="manifest.json">
<meta content="default-src 'self';
style-src 'self' https://cdnjs.cloudflare.com/;
img-src 'self' data: https://crafthead.net/ https://crafatar.com/;
img-src 'self' data: https://crafthead.net/;
connect-src 'self' http://localhost:*/ https: wss:;
script-src 'self' https://*.cloudflare.com/ https://alcdn.msauth.net/ https://*.cloudflareinsights.com/;
frame-src 'self' https://login.microsoftonline.com/ https://login.live.com/"

View File

@ -33,8 +33,10 @@ $(() => {
});
$(() => {
if (navigator.serviceWorker) {
navigator.serviceWorker.register("sw.js")
.then(() => setTimeout(() => swRefreshFiles(), 1000));
navigator.serviceWorker.register("sw.js").catch(e => {
console.log(e);
addToast("Failed to install service worker", e.toString());
});
}
});
$(() => {
@ -71,15 +73,6 @@ $(() => {
$(() => {
connect();
});
function swRefreshFiles() {
navigator.serviceWorker.ready.then(ready => {
var _a;
return (_a = ready.active) === null || _a === void 0 ? void 0 : _a.postMessage({
action: "cache",
urls: performance.getEntriesByType("resource").map(it => it.name)
});
});
}
function setWsStatus(txt) {
connectionStatus.innerText = txt;
}

View File

@ -39,8 +39,10 @@ $(() => {
});
$(() => {
if (navigator.serviceWorker) {
navigator.serviceWorker.register("sw.js")
.then(() => setTimeout(() => swRefreshFiles(), 1000));
navigator.serviceWorker.register("sw.js").catch(e => {
console.log(e);
addToast("Failed to install service worker", e.toString());
});
}
})
@ -84,14 +86,6 @@ $(() => {
connect();
})
function swRefreshFiles() {
// https://stackoverflow.com/questions/46830493/is-there-any-way-to-cache-all-files-of-defined-folder-path-in-service-worker
navigator.serviceWorker.ready.then(ready => ready.active?.postMessage({
action: "cache",
urls: performance.getEntriesByType("resource").map(it => it.name)
}));
}
function setWsStatus(txt: string) {
connectionStatus.innerText = txt;
}

View File

@ -14,43 +14,51 @@ self.addEventListener("install", () => {
});
self.addEventListener("fetch", evt => {
if (!shouldCache(evt.request.url)
|| evt.request.method !== "GET") return;
evt.respondWith(
fromNetwork(evt.request).catch(() => fromCache(evt.request))
);
});
addEventListener("message", e => {
if (e.data.action === "cache") {
e.waitUntil(cache(e.data.urls));
if (!shouldCache(evt.request.url) || evt.request.method !== "GET") return;
if (isImmutable(evt.request.url)) {
evt.respondWith(fromCache(evt.request).catch(() => tryNetworkAndCache(evt.request)));
} else {
evt.respondWith(tryNetworkAndCache(evt.request).catch(() => fromCache(evt.request)));
}
});
function isImmutable(url) {
let parsed = new URL(url);
return ["cdnjs.cloudflare.com", "alcdn.msauth.net"].indexOf(parsed.host) !== -1;
}
function shouldCache(it) {
return [".js", ".css", ".png", ".html", ".webp", "manifest.json"].findIndex(end => it.endsWith(end)) !== -1
|| it === new URL("./", self.location).toString()
}
function cache(urls) {
let filtered = Array.from(new Set(urls.filter(shouldCache)));
return caches.open(cacheId).then(cache => cache.addAll(filtered));
}
function fromNetwork(request) {
function tryNetworkAndCache(request) {
return fetch(request)
.then(response => {
.then(async response => {
if (!shouldCache(response.url)) return response;
// Let's cache it when loading for the first time
return caches.open(cacheId)
.then(it => it.add(request))
.then(() => response);
try {
await fromCache(request);
} catch (e) {
console.log("caching due to: " + e);
let cache = await caches.open(cacheId);
await cache.add(request);
}
return response;
});
}
function fromCache(request) {
return caches.open(cacheId)
.then(cache => cache.match(request))
.then(matching => matching || Promise.reject("no-match"));
.then(async cache => {
let matching = await cache.match(request);
if (matching == null) return Promise.reject("no match");
let timeDiff = new Date() - new Date(matching.headers.get("date"));
if (!isImmutable(request.url) && timeDiff >= 24 * 60 * 60 * 1000) {
await cache.delete(request);
return Promise.reject("expired");
}
return matching;
});
}