@statewalker/webrun-http-browser 0.3.2 → 0.3.4

package/src/sw/http-sw-dispatcher.ts

@@ -0,0 +1,122 @@
+import type { HttpHandler } from "@statewalker/webrun-http-streams";
+import { handleHttpRequests, sendHttpRequest } from "../http/http-send-recieve.js";
+import {
+  SwPortDispatcher,
+  type SwPortDispatcherOptions,
+  SwPortHandler,
+  type SwPortHandlerOptions,
+} from "./sw-dispatcher.js";
+
+export interface SwHttpAdapterOptions extends Omit<SwPortHandlerOptions, "bindPort"> {
+  bindPort?: SwPortHandlerOptions["bindPort"];
+}
+
+export interface SwHttpRegistration {
+  baseUrl: string;
+  prefix: string;
+  remove(): Promise<void>;
+}
+
+export class SwHttpAdapter extends SwPortHandler {
+  private readonly _handlers = new Map<string, HttpHandler>();
+  private _cleanupRequestChannel?: () => void;
+
+  constructor(options: SwHttpAdapterOptions) {
+    super({
+      bindPort: () => {},
+      ...options,
+    });
+  }
+
+  protected override async _setCommunicationPort(port: MessagePort): Promise<void> {
+    this._cleanupRequestChannel?.();
+    this._cleanupRequestChannel = handleHttpRequests(port, this._handleHttpRequest.bind(this));
+  }
+
+  private async _handleHttpRequest(request: Request): Promise<Response> {
+    const requestUrl = request.url;
+    for (const [urlPrefix, handler] of this._handlers) {
+      if (requestUrl.indexOf(urlPrefix) === 0) {
+        return handler(request);
+      }
+    }
+    return new Response(null, { status: 404, statusText: "Error 404: Not found" });
+  }
+
+  /**
+   * Registers an HTTP handler on a prefix. Returns the resulting base URL and a
+   * disposer.
+   */
+  async register(prefix: string, handler: HttpHandler): Promise<SwHttpRegistration> {
+    const cleanPrefix = `./${(prefix ?? "").replace(/^[./]+/, "")}`;
+    const baseUrl = `${new URL(cleanPrefix, this.rootUrl)}`;
+    this._handlers.set(baseUrl, handler);
+    const handlers = this._handlers;
+    return {
+      baseUrl,
+      prefix: cleanPrefix,
+      async remove() {
+        handlers.delete(baseUrl);
+      },
+    };
+  }
+}
+
+export class SwHttpDispatcher extends SwPortDispatcher {
+  start(): void {
+    super.start();
+    this.self.addEventListener("fetch", this._handleFetchEvent.bind(this));
+  }
+
+  private _handleFetchEvent(event: FetchEvent): void {
+    event.respondWith(
+      (async (): Promise<Response> => {
+        const request = event.request;
+        try {
+          const requestUrl = request.url;
+          const rootUrl = this.scope;
+          if (requestUrl.indexOf(rootUrl) === 0) {
+            const key = requestUrl.substring(rootUrl.length).replace(/^\/?([^/]+).*$/, "$1");
+            const channelInfo = await this.loadChannelInfo(key);
+            if (channelInfo?.port) {
+              return await sendHttpRequest(channelInfo.port, request);
+            }
+            // Key was registered at some point on this SW but has no live
+            // handler right now (owner tab closed). Return 404 instead of
+            // falling through to the network — the alternative (a dev
+            // server's SPA fallback) serves the app shell for every site
+            // URL and creates a confusing refresh-loop where stale tabs
+            // keep resurrecting registrations.
+            if (this.isClaimedKey(key)) {
+              return new Response(null, {
+                status: 404,
+                statusText: "Not Found (no active handler)",
+              });
+            }
+          }
+          // URL is outside scope, or the first segment is unrelated to any
+          // registered site (Vite's /assets/*, /favicon.ico, etc.) — pass
+          // the event's Request straight through. Reconstructing it drops
+          // `mode`, which makes the constructor throw
+          // `'only-if-cached' can be set only with 'same-origin' mode` for
+          // navigation-style requests Chrome issues with that cache mode.
+          return await fetch(request);
+        } catch (error) {
+          console.error(error);
+          return new Response(null, {
+            status: 500,
+            statusText: "Error 500: Internal error",
+          });
+        }
+      })(),
+    );
+  }
+}
+
+export function startHttpDispatcher(options: SwPortDispatcherOptions): () => void {
+  const dispatcher = new SwHttpDispatcher(options);
+  dispatcher.start();
+  return () => {
+    void dispatcher.stop();
+  };
+}

package/src/sw/index.ts

@@ -0,0 +1,2 @@
+export * from "./http-sw-dispatcher.js";
+export * from "./sw-dispatcher.js";

package/src/sw/sw-dispatcher.ts

@@ -0,0 +1,307 @@
+import { get, set } from "idb-keyval";
+import { callChannel, handleChannelCalls } from "../core/data-calls.js";
+import { newRegistry } from "../core/registry.js";
+
+export interface SwPortHandlerOptions {
+  key: string;
+  scope?: string;
+  serviceWorkerUrl?: string;
+  bindPort: (port: MessagePort) => void | Promise<void>;
+}
+
+interface ChannelInfo {
+  key: string;
+  clientId?: string;
+  port?: MessagePort;
+}
+
+/**
+ * Page-side counterpart: registers a ServiceWorker and sets up a
+ * MessageChannel with it, re-establishing the connection after SW wake-ups.
+ */
+export class SwPortHandler {
+  readonly options: SwPortHandlerOptions;
+  private _serviceWorkerUrl?: string;
+  private _serviceWorker?: ServiceWorker;
+  private _registrationPromise?: Promise<void>;
+  private _cleanupRegistrations?: () => void;
+
+  constructor(options: SwPortHandlerOptions) {
+    this.options = options;
+    if (!this.key) throw new Error("Key is not defined.");
+    if (!this.scope) throw new Error("Scope is not defined");
+  }
+
+  get key(): string {
+    return this.options.key;
+  }
+
+  get scope(): string {
+    return this.options.scope ?? new URL("./", this.serviceWorkerUrl).pathname;
+  }
+
+  get rootUrl(): URL {
+    return new URL(this.scope, import.meta.url);
+  }
+
+  get serviceWorkerUrl(): string {
+    if (!this._serviceWorkerUrl) {
+      const url = this.options.serviceWorkerUrl
+        ? new URL(this.options.serviceWorkerUrl)
+        : new URL("./index-sw.js", this.rootUrl);
+      this._serviceWorkerUrl = `${url}`;
+    }
+    return this._serviceWorkerUrl;
+  }
+
+  protected async _newCommunicationChannel(): Promise<[MessagePort, MessagePort]> {
+    const messageChannel = new MessageChannel();
+    return [messageChannel.port1, messageChannel.port2];
+  }
+
+  protected async _setCommunicationPort(port: MessagePort): Promise<void> {
+    await this.options.bindPort(port);
+  }
+
+  protected async _updateCommunicationChannel(): Promise<void> {
+    if (!this._serviceWorker) return;
+    const [port1, port2] = await this._newCommunicationChannel();
+    await this._setCommunicationPort(port1);
+    await callChannel(
+      this._serviceWorker,
+      "UPDATE_COMMUNICATION_PORT",
+      this._getRegistrationInfo(),
+      port2,
+    );
+  }
+
+  protected _getRegistrationInfo(): ChannelInfo {
+    return { key: this.key };
+  }
+
+  async start(): Promise<void> {
+    if (!this._registrationPromise) {
+      this._registrationPromise = (async () => {
+        const [register, cleanup] = newRegistry();
+        this._cleanupRegistrations = cleanup;
+        register(() => {
+          this._cleanupRegistrations = undefined;
+        });
+        const registration = await navigator.serviceWorker.register(this.serviceWorkerUrl, {
+          scope: this.scope,
+        });
+        register(() => registration.unregister());
+
+        register(
+          handleChannelCalls(
+            navigator.serviceWorker,
+            "UPDATE_COMMUNICATION_PORT",
+            async (_event, _params, port: MessagePort) => {
+              await this._setCommunicationPort(port);
+              return this._getRegistrationInfo();
+            },
+          ),
+        );
+
+        this._serviceWorker = await getServiceWorkerController();
+        await awaitServiceWorkerActivation(this._serviceWorker);
+        await this._updateCommunicationChannel();
+      })();
+    }
+    return this._registrationPromise;
+  }
+
+  async stop(): Promise<void> {
+    this._cleanupRegistrations?.();
+    const registrations = await navigator.serviceWorker.getRegistrations();
+    for (const registration of registrations) {
+      try {
+        await registration.unregister();
+      } catch (error) {
+        console.log("Service Worker registration failed: ", error);
+      }
+    }
+  }
+}
+
+function getServiceWorkerController(): Promise<ServiceWorker> {
+  return new Promise((resolve) => {
+    const container = navigator.serviceWorker;
+    if (container.controller) {
+      resolve(container.controller);
+      return;
+    }
+    const onChange = () => {
+      if (!container.controller) return;
+      resolve(container.controller);
+      container.removeEventListener("controllerchange", onChange);
+    };
+    container.addEventListener("controllerchange", onChange);
+  });
+}
+
+function awaitServiceWorkerActivation(worker: ServiceWorker): Promise<void> {
+  return new Promise((resolve) => {
+    if (worker.state === "activated") {
+      resolve();
+      return;
+    }
+    const onStateChange = () => {
+      if (worker.state !== "activated") return;
+      worker.removeEventListener("statechange", onStateChange);
+      resolve();
+    };
+    worker.addEventListener("statechange", onStateChange);
+  });
+}
+
+export interface SwPortDispatcherOptions {
+  self: ServiceWorkerGlobalScope;
+  log?: (...args: unknown[]) => void;
+}
+
+/**
+ * ServiceWorker-side counterpart: maintains an index of connected clients keyed by
+ * clientId, persisted in IndexedDB so it can reclaim ports across SW restarts.
+ */
+export class SwPortDispatcher {
+  readonly self: ServiceWorkerGlobalScope;
+  readonly log: (...args: unknown[]) => void;
+  readonly handlersIndex = new Map<string, ChannelInfo>();
+  /**
+   * Set of keys that were registered at some point on this SW (sticky —
+   * survives client closures + SW wake-ups via IndexedDB). Lets the fetch
+   * handler distinguish "site URL whose owner is gone → 404" from
+   * "unknown URL under scope → pass through to the network".
+   */
+  readonly claimedKeys = new Set<string>();
+  private _cleanup?: () => void;
+  private _activationPromise?: Promise<void>;
+
+  constructor({ self, log = () => {} }: SwPortDispatcherOptions) {
+    this.self = self;
+    this.log = log;
+  }
+
+  get scope(): string {
+    return `${new URL("./", this.self.location.href)}`;
+  }
+
+  /**
+   * Look up the active channel for a key. Returns `undefined` when there
+   * is no registration (or the registering client has gone away — stale
+   * entries are pruned in place).
+   */
+  async loadChannelInfo(key: string): Promise<ChannelInfo | undefined> {
+    await this._checkActivation();
+    for (const channelInfo of this.handlersIndex.values()) {
+      if (channelInfo.key !== key) continue;
+      const clientId = channelInfo.clientId;
+      if (!clientId) continue;
+      const client = await this.self.clients.get(clientId);
+      if (!client) {
+        // Owner tab closed: drop the stale entry and keep scanning for
+        // another client that still claims this key.
+        this.handlersIndex.delete(clientId);
+        continue;
+      }
+      return channelInfo;
+    }
+    return undefined;
+  }
+
+  /** Whether `key` has ever been registered on this SW. */
+  isClaimedKey(key: string): boolean {
+    return this.claimedKeys.has(key);
+  }
+
+  start(): void {
+    this._cleanup = handleChannelCalls(
+      this.self,
+      "UPDATE_COMMUNICATION_PORT",
+      async (event, channelInfo, port: MessagePort) => {
+        const client = event.source as Client | null;
+        const clientId = client?.id;
+        this.log("[UPDATE_COMMUNICATION_PORT]", clientId, channelInfo);
+        await this._updateChannelInfo({ ...(channelInfo as ChannelInfo), port, clientId });
+        return { ...(channelInfo as ChannelInfo) };
+      },
+    );
+
+    this.self.addEventListener("install", (event) => {
+      this.log("Skip waiting on install.", event);
+      this.self.skipWaiting();
+    });
+
+    this.self.addEventListener("activate", (event) => {
+      this.log("Claim control over all clients.", event);
+      event.waitUntil(
+        (async () => {
+          await this.self.clients.claim();
+          await this._checkActivation();
+        })(),
+      );
+    });
+  }
+
+  async stop(): Promise<void> {
+    if (this._cleanup) {
+      this._cleanup();
+      this._cleanup = undefined;
+    }
+  }
+
+  private _checkActivation(): Promise<void> {
+    if (!this._activationPromise) {
+      this._activationPromise = this._activate();
+    }
+    return this._activationPromise;
+  }
+
+  private async _activate(): Promise<void> {
+    this.log("[checkActivation]");
+    const clientsIndex = await this._loadClientIds();
+    for (const [clientId, client] of clientsIndex.entries()) {
+      const messageChannel = new MessageChannel();
+      const port = messageChannel.port1;
+      const channelInfo = await callChannel<ChannelInfo>(
+        client,
+        "UPDATE_COMMUNICATION_PORT",
+        {},
+        messageChannel.port2,
+      );
+      await this._updateChannelInfo({ ...channelInfo, port, clientId });
+    }
+  }
+
+  private async _updateChannelInfo(channelInfo: ChannelInfo): Promise<void> {
+    this.log("[updateClientInfo]", channelInfo);
+    if (!channelInfo.clientId) return;
+    this.handlersIndex.set(channelInfo.clientId, channelInfo);
+    if (channelInfo.key && !this.claimedKeys.has(channelInfo.key)) {
+      this.claimedKeys.add(channelInfo.key);
+      await set("claimedKeys", [...this.claimedKeys].sort());
+    }
+    await this._updateClientIds([]);
+  }
+
+  private async _loadClientIds(): Promise<Map<string, Client>> {
+    const storedKeys = ((await get<string[]>("claimedKeys")) ?? []) as string[];
+    for (const key of storedKeys) this.claimedKeys.add(key);
+    const stored = ((await get<string[]>("clientIds")) ?? []) as string[];
+    return await this._updateClientIds(new Set(stored));
+  }
+
+  private async _updateClientIds(clientIds: Iterable<string>): Promise<Map<string, Client>> {
+    const ids = new Set(clientIds);
+    for (const clientId of this.handlersIndex.keys()) ids.add(clientId);
+    const index = new Map<string, Client>();
+    for (const clientId of ids) {
+      const client = await this.self.clients.get(clientId);
+      if (client) index.set(clientId, client);
+      else this.handlersIndex.delete(clientId);
+    }
+    await set("clientIds", [...index.keys()].sort());
+    return index;
+  }
+}

package/src/sw-worker.ts

@@ -0,0 +1,7 @@
+/// <reference lib="webworker" />
+
+import { startHttpDispatcher } from "./sw/http-sw-dispatcher.js";
+
+declare const self: ServiceWorkerGlobalScope;
+
+startHttpDispatcher({ self, log: console.log });

package/src/sw.ts

@@ -0,0 +1 @@
+export * from "./sw/index.js";

package/CHANGELOG.md

@@ -1 +0,0 @@
-# @statewalker/webrun-http-browser

package/demo/demo-3.html

@@ -1,167 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-
-<head>
-  <meta charset="utf-8" />
-  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-</head>
-
-<body>
-  <div id="view"></div>
-
-  <script type="module">
-    import * as WebRunHttp from "https://unpkg.com/@statewalker/webrun-http-browser@0.3/dist/index.js";
-    import { Hono } from "https://unpkg.com/hono@3.5/dist/index.js";
-    import mime from "https://esm.sh/mime-types";
-
-    Promise.resolve().then(main).catch(console.error);
-    async function main() {
-      // Load a Hono request router:
-      const router = getRouter();
-
-      // Create an HTTP Server with the specified name.
-      // It uses the given Hono router to dispatch requests
-      // between endpoints.
-      const serviceBaseUrl = await startHttpService({
-        serviceKey: "MY_SITE",
-        router
-      })
-      const siteUrl = `${serviceBaseUrl}/`;
-
-      // Now we can visualize the site in an iframe iframe:
-      const container = document.querySelector("#view");
-      const iframe = document.createElement("iframe");
-      iframe.width = "100%";
-      iframe.height = "500px";
-      iframe.src = siteUrl;
-      container.appendChild(iframe);
-
-      // We also append a reference to this site.
-      // It allows to open the site in a separate window:
-      const a = document.createElement("a");
-      a.target = "_blank";
-      a.href = siteUrl;
-      a.innerText = siteUrl;
-      container.appendChild(a);
-    }
-
-    async function startHttpService({
-      serviceKey,
-      router
-    }) {
-      // Step 1: Start a ServiceWorker and open a MessageChannel used to recieve HTTP requests and send responses:
-      const connection = await WebRunHttp.newRemoteRelayChannel();
-
-      // Step 2: Define an HTTP handler
-      const serviceBaseUrl = `${connection.baseUrl}~${serviceKey}`;
-      const app = new Hono({
-        getPath: (req) => req.url.substring(serviceBaseUrl.length)
-      });
-      // Add the router
-      app.route("/", router);
-      const httpHandler = (request) => app.fetch(request);
-
-      // Step 3: Instantiate a "server" using the communcation channel with the ServiceWorker:
-      const close = await WebRunHttp.initHttpService(httpHandler, {
-        key: serviceKey,  // Service prefix
-        port: connection.port
-      });
-
-      return serviceBaseUrl;
-    }
-
-    function getRouter() {
-      const router = new Hono();
-
-      // Server-side REST API handler:
-      router.get("/api/:url", async (c) => {
-        const { url } = c.req.param();
-        const r = await fetch(url);
-        const result = await r.text();
-        return c.text(result);
-        // c.text(`Hello ${url}! Current timestamp: ${Date.now()}`);
-      });
-
-      // Static files
-      router.get("/*", newStaticFilesDispatcher({
-        "/index.css": `
-          html, body {
-            padding: 0;
-            margin: 0;
-          }
-          h1 {
-            color : navy;
-          }
-        `,
-
-
-        "/index.js": `
-        document.addEventListener("DOMContentLoaded", () => {
-          const input = document.querySelector("#url");
-          input.addEventListener("input", (ev) => {
-            ev.preventDefault();
-            ev.stopPropagation();
-            updateUrl();
-          })
-          updateUrl();
-          async function updateUrl() {
-            const url = input.value;
-            const res = await fetch("./api/" + encodeURIComponent(url));
-            const text = await res.text();
-            const view = document.querySelector("#messages");
-            view.innerText = text;
-          }          
-        })
-        `,
-        "/index.html": `<!DOCTYPE HTML>
-<html>
-<head>
-    <meta charset="utf-8" />
-    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="./index.css" />
-</head>
-<body>
-  <h1>Hello In-Browser Dynamic Site</h1>
-  <div>
-    Please enter remote service URL:
-    <input type="text" id="url" value="https://dummyjson.com/products">
-  </div>
-  <p>Message from the server:</p>
-  <div id="messages">
-  </div>
-  <script type="module" src="./index.js"><\/script>
-</body>
-</html>
-`
-      }))
-
-      return router;
-    }
-
-    function newStaticFilesDispatcher(files) {
-      return function showStaticFiles(context) {
-        let { url, path } = context.req;
-        path = path.replace(/#.*$/, "");
-        if (path.match(/\/$/)) {
-          path = path + "index.html";
-        }
-        const result = files[path];
-        if (!result) {
-          return context.notFound();
-        }
-        const mimeType = mime.lookup(path) || "application/octet-stream";
-        context.header("Content-Type", mimeType);
-        context.status(201);
-        if (typeof result === "object") {
-          return context.json(result);
-        } else {
-          return context.body(result);
-        }
-      };
-    }
-  </script>
-</body>
-
-</html>