Prompt for reload when new service worker is available (#1588)

src/constants.ts

@@ -40,6 +40,7 @@ export enum EVENT {
   GESTURE_CHANGE = "gesturechange",
   POINTER_MOVE = "pointermove",
   POINTER_UP = "pointerup",
+  STATE_CHANGE = "statechange",
   WHEEL = "wheel",
   TOUCH_START = "touchstart",
 }

src/index.tsx

@@ -3,6 +3,7 @@ import ReactDOM from "react-dom";
 import * as Sentry from "@sentry/browser";
 import * as SentryIntegrations from "@sentry/integrations";
 
+import { EVENT } from "./constants";
 import { TopErrorBoundary } from "./components/TopErrorBoundary";
 import { IsMobileProvider } from "./is-mobile";
 import App from "./components/App";
@@ -69,4 +70,21 @@ ReactDOM.render(
   rootElement,
 );
 
-registerServiceWorker();
+registerServiceWorker({
+  onUpdate: (registration) => {
+    const waitingServiceWorker = registration.waiting;
+    if (waitingServiceWorker) {
+      waitingServiceWorker.addEventListener(
+        EVENT.STATE_CHANGE,
+        (event: Event) => {
+          const target = event.target as ServiceWorker;
+          const state = target.state as ServiceWorkerState;
+          if (state === "activated") {
+            window.location.reload();
+          }
+        },
+      );
+      waitingServiceWorker.postMessage({ type: "SKIP_WAITING" });
+    }
+  },
+});