Fixed cache issues 2
continuous-integration/drone/push Build is passing Details

This commit is contained in:
DutchEllie 2022-07-04 21:07:35 +02:00
parent 2606ad355e
commit ff74a02c42
Signed by: DutchEllie
SSH Key Fingerprint: SHA256:dKq6ZSgN5E3Viqrw/+xAdf2VdR6hdRGNyrYqXXwfjTY
3 changed files with 35 additions and 10 deletions

View File

@ -12,9 +12,10 @@ const APP_CACHE_NAME = `offline${version}`;
const routes = ["/", "/about"]; const routes = ["/", "/about"];
// Hardcoded list of other assets to always preemptively cache // Hardcoded list of other assets to always preemptively cache
const custom_assets = [ //const custom_assets = [
"https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500&family=Roboto+Slab&display=swap" // //"https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500&family=Roboto+Slab&display=swap"
]; // "https://quenten.nl/favicon.png" //Just there as a placeholder
//];
// Adds the domain to the file path, making it a full name // Adds the domain to the file path, making it a full name
const addDomain = (assets: string[]) => const addDomain = (assets: string[]) =>
@ -28,7 +29,10 @@ const ourAssets = addDomain([
...routes ...routes
]); ]);
const to_cache = [...ourAssets, ...custom_assets] const to_cache = [
...ourAssets,
// ...custom_assets
]
const staticAssets = new Set(to_cache); const staticAssets = new Set(to_cache);
worker.addEventListener("install", (event) => { worker.addEventListener("install", (event) => {
@ -36,7 +40,10 @@ worker.addEventListener("install", (event) => {
caches caches
.open(STATIC_CACHE_NAME) .open(STATIC_CACHE_NAME)
.then((cache) => { .then((cache) => {
return cache.addAll(to_cache) to_cache.forEach((item) => {
return cache.add(item)
})
return
}) })
.then(() => { .then(() => {
worker.skipWaiting(); worker.skipWaiting();
@ -82,10 +89,28 @@ worker.addEventListener("fetch", (event) => {
//console.log("fetch event intercepted") //console.log("fetch event intercepted")
// Firefox has not yet fixed this, so it needs to be excluded from this caching behavior // Range requests are unsupported for some reason
// https://web.dev/sw-range-requests/ if (event.request.headers.has("range")) {
// https://wpt.fyi/results/fetch/range/sw.https.window.html?label=master&label=experimental&aligned // Check if in the cache, and return if it is there,
if (navigator.userAgent.includes("Firefox/") && event.request.headers.has("range")) return; // otherwise let the request go through and start a new request
// in the background without the range header
console.log("Request has a Range header (HTTP 206). Checking if it's in cache")
event.respondWith(
(async () => {
const url = new URL(event.request.url);
const isStaticAsset = staticAssets.has(url.href);
const cachedAsset = isStaticAsset && (await caches.match(event.request));
return cachedAsset || (await fetch(event.request))
})()
);
// Also put the thing in cache for next time!
const newRequest = new Request(event.request.url)
fetchAndCache(newRequest);
return
}
const url = new URL(event.request.url); const url = new URL(event.request.url);

View File

@ -19,7 +19,7 @@ const musicStore = readable([
{ {
musicTitle: "Tokusya-Seizon Wonder-la-der!!", musicTitle: "Tokusya-Seizon Wonder-la-der!!",
musicArtist: "Amane Kanata", musicArtist: "Amane Kanata",
musicUrl: "/assets/music/Tokusya-Seizon Wonder-la-der!!.mp3" musicUrl: "/assets/music/Tokusya-Seizon-Wonder-la-der!!.mp3"
}, },
{ {
musicTitle: "Kegarenaki Barajuuji", musicTitle: "Kegarenaki Barajuuji",