Use custom service worker.

package.json

@@ -83,6 +83,7 @@
     "ulid": "^2.3.0",
     "use-resize-observer": "^7.0.0",
     "vite": "^2.3.7",
-    "vite-plugin-pwa": "^0.8.1"
+    "vite-plugin-pwa": "^0.8.1",
+    "workbox-precaching": "^6.1.5"
   }
 }

src/main.tsx

-import { render } from "preact";
-import "./styles/index.scss";
-import { App } from "./pages/app";
-
 import { registerSW } from 'virtual:pwa-register'
-
 const updateSW = registerSW({
     onNeedRefresh() {
         // ! FIXME: temp
@@ -16,5 +11,9 @@ const updateSW = registerSW({
     },
 })
 
+import { render } from "preact";
+import "./styles/index.scss";
+import { App } from "./pages/app";
+
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 render(<App />, document.getElementById("app")!);

src/sw.ts

+/// <reference lib="webworker" />
+import { precacheAndRoute } from 'workbox-precaching'
+
+declare let self: ServiceWorkerGlobalScope
+
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING')
+    self.skipWaiting()
+})
+
+precacheAndRoute(self.__WB_MANIFEST)

tsconfig.json

 {
   "compilerOptions": {
     "target": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "lib": ["DOM", "DOM.Iterable", "ESNext", "WebWorker"],
     "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": false,

vite.config.ts

@@ -23,9 +23,12 @@ export default defineConfig({
   plugins: [
     preact(),
     VitePWA({
+      srcDir: 'src',
+      filename: 'sw.ts',
+      strategies: 'injectManifest',
       manifest: {
-        name: "Revolt",
-        short_name: "Revolt",
+        name: "REVOLT",
+        short_name: "REVOLT",
         description: "User-first, privacy-focused chat platform.",
         categories: ["messaging"],
         start_url: "/",
@@ -44,8 +47,7 @@ export default defineConfig({
                 "sizes": "512x512"
             }
         ]
-      },
-      workbox: { }
+      }
     }),
     replace({
       __GIT_REVISION__: getGitRevision(),