fix: service worker installation and activation handling triggers reload

Sheraff · Oct 4, 2024 · 5034258 · 5034258
1 parent 46d0dd0
commit 5034258
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/public/sw.js b/public/sw.js
@@ -2,14 +2,13 @@
 
 const s = /** @type {ServiceWorkerGlobalScope} */(/** @type {unknown} */(self))
 
-s.addEventListener("install", () => s.skipWaiting())
+s.addEventListener("install", (event) => event.waitUntil(s.skipWaiting()))
 s.addEventListener("activate", (event) => event.waitUntil(s.clients.claim()))
 
 s.addEventListener("fetch", (event) => {
 	if (event.request.cache === "only-if-cached" && event.request.mode !== "same-origin") {
 		return
 	}
-
 	event.respondWith(
 		fetch(event.request)
 			.then((response) => {

diff --git a/src/main.tsx b/src/main.tsx
@@ -6,12 +6,18 @@ if (!window.isSecureContext) {
   console.log("Not registering service worker because the site is not hosted on HTTPS.")
 } else {
   console.log("Registering service worker", import.meta.env.BASE_URL + 'sw.js')
-  navigator.serviceWorker.register(import.meta.env.BASE_URL + 'sw.js')
+  await navigator.serviceWorker.register(import.meta.env.BASE_URL + 'sw.js')
     .then(registration => {
       console.log(`Service worker registered: scope "${registration.scope}"`)
       registration.addEventListener("updatefound", () => window.location.reload())
-      if (registration.active && !navigator.serviceWorker.controller) {
-        window.location.reload()
+      const installing = registration.installing
+      if (installing) {
+        installing.addEventListener("statechange", () => {
+          console.log(`Service worker ${installing.state}`)
+          if (installing.state === "activated") {
+            window.location.reload()
+          }
+        })
       }
     })
 }