cache busting pwa

package.json

@@ -33,6 +33,7 @@
     "dev": "vite",
     "build": "vite build",
     "test": "vitest run",
+    "serve": "serve",
     "lint": "eslint --ext .tsx,.ts src",
     "lint:fix": "eslint --fix --ext .tsx,.ts src",
     "lint:report": "eslint --ext .tsx,.ts --output-file eslint_report.json --format json src"
@@ -80,6 +81,7 @@
     "postcss": "^8.4.20",
     "prettier": "^2.5.1",
     "prettier-plugin-tailwindcss": "^0.1.7",
+    "serve": "^14.2.0",
     "tailwind-scrollbar": "^2.0.1",
     "tailwindcss": "^3.2.4",
     "typescript": "^4.6.4",
@@ -87,6 +89,7 @@
     "vite-plugin-checker": "^0.5.6",
     "vite-plugin-package-version": "^1.0.2",
     "vite-plugin-pwa": "^0.14.4",
-    "vitest": "^0.28.5"
+    "vitest": "^0.28.5",
+    "workbox-window": "^6.5.4"
   }
 }

serve.json

@@ -0,0 +1,4 @@
+{
+  "public": "dist",
+  "rewrites": [{ "source": "*", "destination": "/index.html" }]
+}

src/index.tsx

@@ -3,6 +3,7 @@ import ReactDOM from "react-dom";
 import { BrowserRouter, HashRouter } from "react-router-dom";
 import { ErrorBoundary } from "@/components/layout/ErrorBoundary";
 import { conf } from "@/setup/config";
+import { registerSW } from "virtual:pwa-register";
 
 import App from "@/setup/App";
 import "@/setup/ga";
@@ -19,6 +20,11 @@ if (key) {
   (window as any).initMW(conf().PROXY_URLS, key);
 }
 initializeChromecast();
+registerSW({
+  onNeedRefresh() {
+    window.location.reload();
+  },
+});
 
 const LazyLoadedApp = React.lazy(async () => {
   await initializeStores();

src/setup/App.tsx

@@ -1,5 +1,4 @@
 import { Redirect, Route, Switch } from "react-router-dom";
-import { useRegisterSW } from "virtual:pwa-register/react";
 import { BookmarkContextProvider } from "@/state/bookmark";
 import { WatchedContextProvider } from "@/state/watched";
 
@@ -13,66 +12,12 @@ import { VideoTesterView } from "@/views/developer/VideoTesterView";
 import { ProviderTesterView } from "@/views/developer/ProviderTesterView";
 import { EmbedTesterView } from "@/views/developer/EmbedTesterView";
 
-function ReloadPrompt() {
+// TODO add "you are offline" status bar
-  const {
-    offlineReady: [offlineReady, setOfflineReady],
-    needRefresh: [needRefresh, setNeedRefresh],
-    updateServiceWorker,
-  } = useRegisterSW({
-    onRegistered(r) {
-      // eslint-disable-next-line prefer-template
-      console.log("SW Registered: " + r);
-    },
-    onRegisterError(error) {
-      console.log("SW registration error", error);
-    },
-  });
-
-  const close = () => {
-    setOfflineReady(false);
-    setNeedRefresh(false);
-  };
-
-  return (
-    <div className="ReloadPrompt-container">
-      {(offlineReady || needRefresh) && (
-        <div className="ReloadPrompt-toast">
-          <div className="ReloadPrompt-message">
-            {offlineReady ? (
-              <span>App ready to work offline</span>
-            ) : (
-              <span>
-                New content available, click on reload button to update.
-              </span>
-            )}
-          </div>
-          {needRefresh && (
-            <button
-              type="button"
-              className="ReloadPrompt-toast-button"
-              onClick={() => updateServiceWorker(true)}
-            >
-              Reload
-            </button>
-          )}
-          <button
-            type="button"
-            className="ReloadPrompt-toast-button"
-            onClick={() => close()}
-          >
-            Close
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}
 
 function App() {
   return (
     <WatchedContextProvider>
       <BookmarkContextProvider>
-        <ReloadPrompt />
         <Switch>
           {/* functional routes */}
           <Route exact path="/v2-migration" component={V2MigrationView} />

vite.config.ts

@@ -11,8 +11,8 @@ export default defineConfig({
     VitePWA({
       registerType: "autoUpdate",
       injectRegister: "inline",
-      devOptions: {
+      workbox: {
-        enabled: true,
+        skipWaiting: true,
       },
       includeAssets: [
         "favicon.ico",