Fixed cache issues 2

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);
 

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",