add custom service worker

src/app.tsx

@@ -1,5 +1,5 @@
 import { lazy, Suspense } from "react";
-import { createHashRouter, Outlet, RouterProvider, ScrollRestoration } from "react-router-dom";
+import { createBrowserRouter, Outlet, RouterProvider, ScrollRestoration } from "react-router-dom";
 import { Spinner } from "@chakra-ui/react";
 
 import { ErrorBoundary } from "./components/error-boundary";
@@ -184,7 +184,7 @@ const NoLayoutPage = () => {
   );
 };
 
-const router = createHashRouter([
+const router = createBrowserRouter([
   {
     path: "signin",
     element: <SigninView />,

src/worker.ts

@@ -0,0 +1,54 @@
+//  / <reference no-default-lib="true"/>
+/// <reference lib="ES2022" />
+/// <reference lib="DOM" />
+/// <reference lib="webworker" />
+
+// Default type of `self` is `WorkerGlobalScope & typeof globalThis`
+// https://github.com/microsoft/TypeScript/issues/14877
+declare var self: ServiceWorkerGlobalScope;
+
+self.addEventListener("install", () => {
+  self.skipWaiting();
+});
+
+// caching
+import { cleanupOutdatedCaches, precacheAndRoute, createHandlerBoundToURL } from "workbox-precaching";
+import { registerRoute, NavigationRoute } from "workbox-routing";
+
+precacheAndRoute(self.__WB_MANIFEST);
+cleanupOutdatedCaches();
+
+let allowlist: undefined | RegExp[] = undefined;
+if (import.meta.env.DEV) allowlist = [/^\/$/];
+registerRoute(new NavigationRoute(createHandlerBoundToURL("index.html"), { allowlist }));
+
+// notifications
+import { type WebPushNotification } from "@satellite-earth/core/types/control-api/notifications.js";
+
+self.addEventListener("push", (event) => {
+  const data = event.data?.json() as WebPushNotification | undefined;
+
+  if (!data) return;
+
+  try {
+    event.waitUntil(self.registration.showNotification(data.title, { body: data.body, data, icon: data.icon }));
+  } catch (error) {}
+});
+
+self.addEventListener("notificationclick", (event) => {
+  event.notification.close();
+
+  const data: WebPushNotification = event.notification.data;
+
+  event.waitUntil(
+    self.clients.matchAll({ type: "window" }).then((clientList) => {
+      const firstClient = clientList[0];
+      if (firstClient) {
+        firstClient.focus();
+        firstClient.navigate(data.url);
+      } else {
+        self.clients.openWindow(data.url).then((window) => window?.focus());
+      }
+    }),
+  );
+});

vite.config.ts

@@ -18,15 +18,17 @@ export default defineConfig({
   plugins: [
     react(),
     VitePWA({
-      registerType: "prompt",
-      // strategies: "injectManifest",
-      // srcDir: "src",
-      // filename: "sw.ts",
-      // devOptions: {
-      //   // NOTE: ESM service workers is not supported by firefox
-      //   type: "module",
-      //   enabled: true,
-      // },
+      strategies: "injectManifest",
+      registerType: "autoUpdate",
+      injectRegister: null,
+      srcDir: "src",
+      filename: "worker.ts",
+      injectManifest: {
+        minify: false,
+        sourcemap: true,
+        // This increase the cache limit to 4mB
+        maximumFileSizeToCacheInBytes: 2097152 * 2,
+      },
       workbox: {
         // This increase the cache limit to 4mB
         maximumFileSizeToCacheInBytes: 2097152 * 2,
@@ -50,34 +52,24 @@ export default defineConfig({
         start_url: "/",
         scope: "/",
         shortcuts: [
-          {
-            name: "Notifications",
-            url: "/#/notifications",
-            description: "",
-          },
           {
             name: "Notes",
-            url: "/#/",
+            url: "/",
             description: "",
           },
           {
             name: "Notifications",
-            url: "/#/notifications",
+            url: "/notifications",
             description: "",
           },
           {
             name: "Messages",
-            url: "/#/dm",
+            url: "/messages",
             description: "",
           },
           {
             name: "Streams",
-            url: "/#/streams",
-            description: "",
-          },
-          {
-            name: "Wiki",
-            url: "/#/wiki",
+            url: "/streams",
             description: "",
           },
         ],