Try to fix service worker issue

src/index.tsx

@@ -30,26 +30,31 @@ render(
 );
 
 serviceWorker.register({
+  onControllerChange() {
+    window.location.reload();
+  },
   onUpdate(registration) {
     const waitingServiceWorker = registration.waiting || navigator.serviceWorker.controller;
 
     if (waitingServiceWorker) {
-      if (waitingServiceWorker.state === "activated") {
+      if (waitingServiceWorker.state === "activated" || waitingServiceWorker.state === "activating") {
         window.location.reload();
         return;
       }
       waitingServiceWorker.addEventListener("statechange", (event) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        if (event.target && (event.target as any).state === "activated") {
+        const state = (event.target as any)?.state;
+        if (state === "activated" || state === "activating") {
           window.location.reload();
         }
       });
       waitingServiceWorker.postMessage({ type: "SKIP_WAITING" });
+      window.location.reload();
     }
   },
 });
 
 const statusPageScript = document.createElement("script");
 statusPageScript.async = true;
 statusPageScript.src = "https://qltr0c2md09b.statuspage.io/embed/script.js";
-document.body.appendChild(statusPageScript);
+document.body.appendChild(statusPageScript);

src/service-worker.ts

@@ -1,23 +1,18 @@
-/// <reference lib="webworker" />
 /* eslint-disable no-restricted-globals */
-
 // This service worker can be customized!
 // See https://developers.google.com/web/tools/workbox/modules
 // for the list of available Workbox modules, or add any other
 // code you'd like.
 // You can also remove this file if you'd prefer not to use a
 // service worker, and the Workbox build step will be skipped.
-
-import { clientsClaim } from "workbox-core";
 import { ExpirationPlugin } from "workbox-expiration";
 import { precacheAndRoute, createHandlerBoundToURL } from "workbox-precaching";
 import { registerRoute } from "workbox-routing";
 import { StaleWhileRevalidate } from "workbox-strategies";
 
+// eslint-disable-next-line no-undef
 declare const self: ServiceWorkerGlobalScope;
 
-clientsClaim();
-
 // Precache all of the assets generated by your build process.
 // Their URLs are injected into the manifest variable below.
 // This variable must be present somewhere in your service worker file,
@@ -76,5 +71,11 @@ self.addEventListener("message", (event) => {
     self.skipWaiting();
   }
 });
+self.addEventListener("activate", () => {
+  self.clients.claim();
+});
+self.addEventListener("install", () => {
+  self.skipWaiting();
+});
 
-// Any other custom service worker logic can go here.
+// Any other custom service worker logic can go here.

src/serviceWorkerRegistration.ts

@@ -23,6 +23,7 @@ const isLocalhost = Boolean(
 type Config = {
   onSuccess?: (registration: ServiceWorkerRegistration) => void;
   onUpdate?: (registration: ServiceWorkerRegistration) => void;
+  onControllerChange?: (container: ServiceWorkerContainer) => void;
 };
 
 export function register(config?: Config) {
@@ -63,6 +64,13 @@ function registerValidSW(swUrl: string, config?: Config) {
   navigator.serviceWorker
     .register(swUrl)
     .then((registration) => {
+      if (navigator.serviceWorker.controller) {
+        navigator.serviceWorker.oncontrollerchange = () => {
+          if (config?.onControllerChange) {
+            config.onControllerChange(navigator.serviceWorker);
+          }
+        };
+      }
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
         if (installingWorker == null) {

tsconfig.json

@@ -15,7 +15,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "lib": ["dom", "es2015", "es2017", "DOM"],
+    "lib": ["dom", "es2015", "es2017", "DOM", "webworker"],
     "noFallthroughCasesInSwitch": true
   }
 }