⚡ add version to service workers

src/components/ServiceWorkerRefreshHandler.tsx

@@ -1,23 +0,0 @@
-import { useEffect } from "react";
-
-import * as serviceWorkerRegistration from "../serviceWorkerRegistration";
-import { VERSION } from "../app/constants";
-
-// Read from local storage to see what version the user currently has
-// If the version is different, then we need to refresh the page
-// This is because the service worker caches all the files and they
-// are not updated until the page is refreshed
-const ServiceWorkerRefreshHandler = () => {
-  useEffect(() => {
-    const version = localStorage.getItem("version");
-    if (version !== VERSION) {
-      localStorage.setItem("version", VERSION);
-      serviceWorkerRegistration.unregister();
-      window.location.reload();
-    }
-  }, []);
-
-  return null;
-};
-
-export default ServiceWorkerRefreshHandler;

src/service-worker.ts

@@ -6,6 +6,10 @@ import { ExpirationPlugin } from "workbox-expiration";
 import { precacheAndRoute, createHandlerBoundToURL } from "workbox-precaching";
 import { registerRoute } from "workbox-routing";
 import { StaleWhileRevalidate } from "workbox-strategies";
+import { VERSION } from "./app/constants";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const version = VERSION;
 
 declare const self: ServiceWorkerGlobalScope;
 

src/serviceWorkerRegistration.ts

@@ -1,6 +1,8 @@
 // This optional code is used to register a service worker.
 // register() is not called by default.
 
+import { VERSION } from "./app/constants";
+
 // This lets the app load faster on subsequent visits in production, and gives
 // it offline capabilities. However, it also means that developers (and users)
 // will only see deployed updates on subsequent visits to a page, after all the
@@ -10,6 +12,9 @@
 // To learn more about the benefits of this model and instructions on how to
 // opt-in, read https://cra.link/PWA
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const version = VERSION;
+
 const isLocalhost = Boolean(
   window.location.hostname === "localhost" ||
     // [::1] is the IPv6 localhost address.