diff --git a/src/service-worker.ts b/src/service-worker.ts index 4872e87..cbe6a7c 100644 --- a/src/service-worker.ts +++ b/src/service-worker.ts @@ -12,9 +12,10 @@ const APP_CACHE_NAME = `offline${version}`; const routes = ["/", "/about"]; // Hardcoded list of other assets to always preemptively cache -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" -]; +//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://quenten.nl/favicon.png" //Just there as a placeholder +//]; // Adds the domain to the file path, making it a full name const addDomain = (assets: string[]) => @@ -28,7 +29,10 @@ const ourAssets = addDomain([ ...routes ]); -const to_cache = [...ourAssets, ...custom_assets] +const to_cache = [ + ...ourAssets, + // ...custom_assets +] const staticAssets = new Set(to_cache); worker.addEventListener("install", (event) => { @@ -36,7 +40,10 @@ worker.addEventListener("install", (event) => { caches .open(STATIC_CACHE_NAME) .then((cache) => { - return cache.addAll(to_cache) + to_cache.forEach((item) => { + return cache.add(item) + }) + return }) .then(() => { worker.skipWaiting(); @@ -82,10 +89,28 @@ worker.addEventListener("fetch", (event) => { //console.log("fetch event intercepted") - // Firefox has not yet fixed this, so it needs to be excluded from this caching behavior - // https://web.dev/sw-range-requests/ - // https://wpt.fyi/results/fetch/range/sw.https.window.html?label=master&label=experimental&aligned - if (navigator.userAgent.includes("Firefox/") && event.request.headers.has("range")) return; + // Range requests are unsupported for some reason + if (event.request.headers.has("range")) { + // Check if in the cache, and return if it is there, + // 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); diff --git a/src/stores/musicStore.ts b/src/stores/musicStore.ts index 4d5bfa3..636ccaf 100644 --- a/src/stores/musicStore.ts +++ b/src/stores/musicStore.ts @@ -19,7 +19,7 @@ const musicStore = readable([ { musicTitle: "Tokusya-Seizon Wonder-la-der!!", musicArtist: "Amane Kanata", - musicUrl: "/assets/music/Tokusya-Seizon Wonder-la-der!!.mp3" + musicUrl: "/assets/music/Tokusya-Seizon-Wonder-la-der!!.mp3" }, { musicTitle: "Kegarenaki Barajuuji", diff --git a/static/assets/music/Tokusya-Seizon Wonder-la-der!!.mp3 b/static/assets/music/Tokusya-Seizon-Wonder-la-der!!.mp3 similarity index 100% rename from static/assets/music/Tokusya-Seizon Wonder-la-der!!.mp3 rename to static/assets/music/Tokusya-Seizon-Wonder-la-der!!.mp3