fix: rm sw caching and cleanup msg passing

ndom91 · Jun 30, 2024 · 3a25c89 · 3a25c89
1 parent b779ec5
commit 3a25c89
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 48 deletions.
diff --git a/apps/web/src/routes/+layout.svelte b/apps/web/src/routes/+layout.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Toaster, toast } from "svelte-sonner"
-  import { type Snippet, setContext } from "svelte"
+  import { type Snippet, onMount, setContext } from "svelte"
   import DragAdd from "./DragAdd.svelte"
   import Scripts from "./Scripts.svelte"
   import Shortcuts from "./GlobalShortcuts.svelte"
@@ -38,23 +38,26 @@
     })
   })
 
-  if (browser && navigator.serviceWorker.controller) {
-    console.log("This page is currently controlled by:", navigator.serviceWorker.controller)
+  onMount(() => {
+    if (browser && navigator.serviceWorker.controller) {
+      console.log("This page is currently controlled by:", navigator.serviceWorker.controller)
+      navigator.serviceWorker.startMessages()
 
-    navigator.serviceWorker.onmessage = (event) => {
-      toast.success(`sw: ${event.data.msg}`)
-      console.log(event.data.msg, event.data.url)
+      navigator.serviceWorker.onmessage = (event) => {
+        toast.success(`sw.message: ${event.data}`)
+        console.log("sw.message:", event.data)
+      }
     }
-  }
-
-  if (browser && "serviceWorker" in navigator) {
-    navigator.serviceWorker.register(
-      // @ts-expect-error - its fine, we're not transpiling to cjs
-      import.meta.env.MODE === "production" ? "/service-worker.js" : "/dev-sw.js?dev-sw",
-      // @ts-expect-error - its fine, we're not transpiling to cjs
-      { type: import.meta.env.MODE === "production" ? "classic" : "module" },
-    )
-  }
+
+    if (browser && "serviceWorker" in navigator) {
+      navigator.serviceWorker.register(
+        // @ts-expect-error - its fine, we're not transpiling to cjs
+        import.meta.env.MODE === "production" ? "/service-worker.js" : "/dev-sw.js?dev-sw",
+        // @ts-expect-error - its fine, we're not transpiling to cjs
+        { type: import.meta.env.MODE === "production" ? "classic" : "module" },
+      )
+    }
+  })
 </script>
 
 <svelte:head>

diff --git a/apps/web/src/service-worker.ts b/apps/web/src/service-worker.ts
@@ -3,37 +3,37 @@
 /// <reference lib="esnext" />
 /// <reference lib="webworker" />
 
-import { CacheFirst } from "workbox-strategies"
-import { registerRoute, Route } from "workbox-routing"
+const sw = self as unknown as ServiceWorkerGlobalScope
 
-declare let self: ServiceWorkerGlobalScope
+// import { CacheFirst } from "workbox-strategies"
+// import { registerRoute, Route } from "workbox-routing"
+//
+// const fontAssetRoute = new Route(
+//   ({ request }) => {
+//     return request.destination === "font"
+//   },
+//   new CacheFirst({
+//     cacheName: "font-assets",
+//   }),
+// )
+// const imageAssetRoute = new Route(
+//   ({ request }) => {
+//     return request.destination === "image"
+//   },
+//   new CacheFirst({
+//     cacheName: "image-assets",
+//   }),
+// )
+//
+// registerRoute(fontAssetRoute)
+// registerRoute(imageAssetRoute)
 
-const fontAssetRoute = new Route(
-  ({ request }) => {
-    return request.destination === "font"
-  },
-  new CacheFirst({
-    cacheName: "font-assets",
-  }),
-)
-const imageAssetRoute = new Route(
-  ({ request }) => {
-    return request.destination === "image"
-  },
-  new CacheFirst({
-    cacheName: "image-assets",
-  }),
-)
-
-registerRoute(fontAssetRoute)
-registerRoute(imageAssetRoute)
-
-self.addEventListener("message", (event) => {
-  if (event.data && event.data.type === "SKIP_WAITING") self.skipWaiting()
+sw.addEventListener("message", (event) => {
+  if (event.data && event.data.type === "SKIP_WAITING") sw.skipWaiting()
 })
 
 // Special fetch handler for song file sharing.
-self.addEventListener("fetch", (event: FetchEvent) => {
+sw.addEventListener("fetch", (event: FetchEvent) => {
   const url = new URL(event.request.url)
 
   if (event.request.method !== "GET" || !url.pathname.includes("/api/v1/bookmarks/share")) {
@@ -62,12 +62,8 @@ self.addEventListener("fetch", (event: FetchEvent) => {
         ]),
       })
 
-      const client = await self.clients.get(event.clientId)
-
-      client?.postMessage({
-        msg: "Got your share!",
-        url,
-      })
+      const client = await sw.clients.get(event.clientId)
+      client?.postMessage("Bookmark Saved!")
     })(),
   )
 })