frontend: update service worker registration

fix #221

Author: ffreddow

frontend/index.html

@@ -8,14 +8,7 @@
 		<title>Remote Access</title>
 		<script type="text/javascript">
 			if ('serviceWorker' in navigator) {
-				navigator.serviceWorker.register("/sw.js", {type: "module"}).then((reg) => {
-					// The serviceworker wont update when it is currently awaiting a response
-					// this way it will be defenitely updated on the next refresh
-					window.addEventListener("beforeunload", ()=> {
-						reg.unregister();
-					})
-					reg.update();
-				})
+				navigator.serviceWorker.register("/sw.js", {type: "module"});
 			}
 			function median_app_resumed() {
 				if (sessionStorage.getItem("currentConnection")) {

frontend/src/sw.ts

@@ -21,6 +21,14 @@ import { Message, MessageType, FetchMessage, ResponseMessage } from "./types";
 
 declare const self: ServiceWorkerGlobalScope;
 
+self.addEventListener("activate", (event) => {
+    event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener("install", (event) => {
+    event.waitUntil(self.skipWaiting());
+});
+
 function handleWGRequest(event: FetchEvent) {
     let url = event.request.url.replace(self.location.origin, "");
     const headers1: [string, string][] = [];
@@ -129,11 +137,6 @@ self.addEventListener("fetch", (event: FetchEvent) => {
     }
 });
 
-
-self.addEventListener("activate", () => {
-    self.clients.claim();
-});
-
 const SECRET_CACHE_NAME = 'secret-cache-v1';
 
 async function storeSecretKeyInCache(secretKey: string): Promise<void> {

frontend/src/utils.tsx

@@ -155,21 +155,25 @@ export async function getSecretKeyFromServiceWorker(): Promise<string | null> {
     }
 
     secretKeyPromise = new Promise(async (resolve) => {
-        if (!navigator.serviceWorker.controller && retries < 3) {
-            console.error("No service worker controller found. Retrying...");
+        gettingSecretInProgress = true;
+
+        // We dont use navigator.serviceWorker.controller here since it can be, for whatever reason,
+        //  null for an entire browser session
+        const controller = await navigator.serviceWorker.getRegistration(location.origin);
+        if (!controller?.active && retries < 3) {
+            console.error("ServiceWorker controller not active, retrying...");
             retries++;
-            resolve(await getSecretKeyFromServiceWorker());
-            return;
-        } else if (!navigator.serviceWorker.controller) {
-            console.error("No service worker controller found after retries.");
-            resolve(null);
+            setTimeout(async () => {
+                resolve(await getSecretKeyFromServiceWorker());
+            }, 500);
             return;
+        } else if (!controller?.active) {
+            console.error("service worker controller not active");
+            return resolve(null);
         } else if (retries >= 3) {
-            console.error("Max retries reached without service worker controller.");
-            resolve(null);
-            return;
+            console.error("Max retries reached for getting secretKey from service worker");
+            return resolve(null);
         }
-        gettingSecretInProgress = true;
 
         const timeout = setTimeout(async () => {
             console.error("Service Worker: Failed to get secretKey within timeout. Retrying...");
@@ -197,7 +201,7 @@ export async function getSecretKeyFromServiceWorker(): Promise<string | null> {
             type: MessageType.RequestSecret,
             data: null
         };
-        navigator.serviceWorker.controller.postMessage(requestMsg);
+        controller.active?.postMessage(requestMsg);
     });
 
     return secretKeyPromise;