web: replace shared worker with service worker for sqlite

apps/web/src/common/sqlite/shared-service.ts

@@ -17,15 +17,8 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import SharedWorker from "./shared-service.worker.ts?sharedworker";
 import { Mutex } from "async-mutex";
 
-const sharedWorker = globalThis.SharedWorker
-  ? new SharedWorker({
-      name: "SharedService"
-    })
-  : null;
-
 export class SharedService<T extends object> extends EventTarget {
   #clientId: Promise<string>;
 
@@ -208,20 +201,38 @@ export class SharedService<T extends object> extends EventTarget {
     this.#onClose.abort();
   }
 
-  #sendPortToClient(message: any, port: MessagePort) {
-    if (!sharedWorker)
-      throw new Error("Shared worker is not supported in this environment.");
-    sharedWorker.port.postMessage(message, [port]);
+  async #sendPortToClient(message: any, port: MessagePort) {
+    // if (!sharedWorker)
+    //   throw new Error("Shared worker is not supported in this environment.");
+    // sharedWorker.port.postMessage(message, [port]);
+
+    // Return the port to the client via the service worker.
+    const serviceWorker = await navigator.serviceWorker.ready;
+    serviceWorker.active?.postMessage(message, [port]);
   }
 
   async #getClientId() {
-    console.time("getting client id");
-    // Use a Web Lock to determine our clientId.
-    const nonce = Math.random().toString();
-    const clientId = await navigator.locks.request(nonce, async () => {
-      console.log("got clientid lock");
-      const { held } = await navigator.locks.query();
-      return held?.find((lock) => lock.name === nonce)?.clientId;
+    // Getting the clientId from the service worker accomplishes two things:
+    // 1. It gets the clientId for this context.
+    // 2. It ensures that the service worker is activated.
+    //
+    // It is possible to do this without polling but it requires about the
+    // same amount of code and using fetch makes 100% certain the service
+    // worker is handling requests.
+    let clientId: string | undefined;
+    while (!clientId) {
+      clientId = await fetch("/clientId").then((response) => {
+        if (response.ok && !!response.headers.get("x-client-id")) {
+          return response.text();
+        }
+        console.warn("service worker not ready, retrying...");
+        return new Promise((resolve) => setTimeout(resolve, 100));
+      });
+    }
+
+    navigator.serviceWorker.addEventListener("message", (event) => {
+      event.data.ports = event.ports;
+      this.dispatchEvent(new MessageEvent("message", { data: event.data }));
     });
 
     // Acquire a Web Lock named after the clientId. This lets other contexts
@@ -231,17 +242,6 @@ export class SharedService<T extends object> extends EventTarget {
     // instance lifetime tracking.
     await SharedService.#acquireContextLock(clientId);
 
-    // Configure message forwarding via the SharedWorker. This must be
-    // done after acquiring the clientId lock to avoid a race condition
-    // in the SharedWorker.
-    sharedWorker?.port.addEventListener("message", (event) => {
-      event.data.ports = event.ports;
-      this.dispatchEvent(new MessageEvent("message", { data: event.data }));
-    });
-    sharedWorker?.port.start();
-    sharedWorker?.port.postMessage({ clientId });
-
-    console.timeEnd("getting client id");
     return clientId;
   }
 

apps/web/src/common/sqlite/shared-service.worker.ts

@@ -1,55 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-/* eslint-disable no-var */
-
-/// <reference lib="webworker" />
-
-export default null;
-
-declare var self: SharedWorkerGlobalScope & typeof globalThis;
-const mapClientIdToPort: Map<string, MessagePort> = new Map();
-
-self.addEventListener("connect", (event) => {
-  console.log("connected", event);
-  // The first message from a client associates the clientId with the port.
-  const workerPort = event.ports[0];
-  workerPort.addEventListener(
-    "message",
-    (event) => {
-      console.log("received message", event.data);
-      mapClientIdToPort.set(event.data.clientId, workerPort);
-
-      // Remove the entry when the client goes away, which we detect when
-      // the lock on its name becomes available.
-      navigator.locks.request(event.data.clientId, { mode: "shared" }, () => {
-        mapClientIdToPort.get(event.data.clientId)?.close();
-        mapClientIdToPort.delete(event.data.clientId);
-      });
-
-      // Subsequent messages will be forwarded.
-      workerPort.addEventListener("message", (event) => {
-        const port = mapClientIdToPort.get(event.data.clientId);
-        console.log("sending message to client", event.data.clientId, port);
-        port?.postMessage(event.data, [...event.ports]);
-      });
-    },
-    { once: true }
-  );
-  workerPort.start();
-});