feat(fe): service worker pulls and renders notifications

Replaces the placeholder push worker with a bundled SvelteKit service
worker (registered on opt-in, no fetch handler). On a ping it reads the
sealed routing origin, loads that app's stored credential, resolves the
dApp canister from the origin's discovery document, and pulls the pending
notifications as the user's per-app identity, rendering each. With no
usable credential or an unreachable canister it shows a generic,
app-attributed notification; a click focuses or opens the app. The
credential now carries the IC host so the worker can build an agent
without the browser-only globals.

Author: MRmarioruci

src/frontend/src/lib/utils/notifications/enableNotifications.ts

@@ -5,6 +5,7 @@
 
 import type { ActorSubclass } from "@icp-sdk/core/agent";
 import type { _SERVICE } from "$lib/generated/internet_identity_types";
+import { agentOptions } from "$lib/globals";
 import { throwTextCanisterError } from "$lib/utils/utils";
 import { generateVapidKeypair, signJwtPool } from "./vapidPool";
 import {
@@ -64,6 +65,7 @@ export const enableNotifications = async ({
       identityNumber,
       accountNumber,
       origin,
+      host: agentOptions.host ?? self.location.origin,
       actor,
     }),
   );

src/frontend/src/lib/utils/notifications/pullCredential.ts

@@ -7,19 +7,34 @@
 
 import type { ActorSubclass } from "@icp-sdk/core/agent";
 import type { _SERVICE } from "$lib/generated/internet_identity_types";
-import { DelegationChain, ECDSAKeyIdentity } from "@icp-sdk/core/identity";
+import {
+  DelegationChain,
+  DelegationIdentity,
+  ECDSAKeyIdentity,
+} from "@icp-sdk/core/identity";
 import { toPermissionsArg } from "$lib/utils/accessLevel";
 import {
   throwCanisterError,
   transformSignedDelegation,
 } from "$lib/utils/utils";
-import { createStore, del as idbDel, set as idbSet } from "idb-keyval";
+import {
+  createStore,
+  del as idbDel,
+  get as idbGet,
+  set as idbSet,
+} from "idb-keyval";
 
 const CREDENTIAL_STORE = createStore("ii-notification-credentials", "keys");
+// The canister to pull from is a lookup off the origin's well-known, not a trust
+// anchor, so it's cached separately and refreshed on a TTL / on pull failure —
+// a canister-id change then self-heals without re-consent.
+const CANISTER_STORE = createStore("ii-notification-canisters", "keys");
 
 export interface NotificationCredentialRecord {
   /** dApp origin, keyed on and also the routing target the SW pulls for. */
   origin: string;
+  /** IC host the agent talks to, captured here because the SW can't read globals. */
+  host: string;
   keyPair: CryptoKeyPair;
   chainJson: string;
   expiresAtMillis: number;
@@ -34,11 +49,13 @@ export const mintNotificationCredential = async ({
   identityNumber,
   accountNumber,
   origin,
+  host,
   actor,
 }: {
   identityNumber: bigint;
   accountNumber?: bigint;
   origin: string;
+  host: string;
   actor: ActorSubclass<_SERVICE>;
 }): Promise<NotificationCredentialRecord> => {
   const sessionIdentity = await ECDSAKeyIdentity.generate({
@@ -77,6 +94,7 @@ export const mintNotificationCredential = async ({
 
   return {
     origin,
+    host,
     keyPair: sessionIdentity.getKeyPair(),
     chainJson: JSON.stringify(chain.toJSON()),
     expiresAtMillis: Number(expiration / BigInt(1_000_000)),
@@ -87,5 +105,41 @@ export const storeNotificationCredential = (
   record: NotificationCredentialRecord,
 ): Promise<void> => idbSet(record.origin, record, CREDENTIAL_STORE);
 
-export const purgeNotificationCredential = (origin: string): Promise<void> =>
-  idbDel(origin, CREDENTIAL_STORE);
+export const purgeNotificationCredential = async (
+  origin: string,
+): Promise<void> => {
+  await idbDel(origin, CREDENTIAL_STORE);
+  await idbDel(origin, CANISTER_STORE);
+};
+
+export interface CachedCanister {
+  canisterId: string;
+  resolvedAtMillis: number;
+}
+
+/** The SW's cached `origin -> canister` resolution, if any. */
+export const loadCachedCanister = (
+  origin: string,
+): Promise<CachedCanister | undefined> => idbGet(origin, CANISTER_STORE);
+
+/** Records the canister resolved for `origin` from its well-known. */
+export const cacheCanister = (
+  origin: string,
+  canisterId: string,
+): Promise<void> =>
+  idbSet(origin, { canisterId, resolvedAtMillis: Date.now() }, CANISTER_STORE);
+
+/** The service worker's read side: the stored credential for `origin`, if any. */
+export const loadNotificationCredential = (
+  origin: string,
+): Promise<NotificationCredentialRecord | undefined> =>
+  idbGet(origin, CREDENTIAL_STORE);
+
+/** Rebuilds the delegation identity the credential stands for. */
+export const notificationIdentity = async (
+  record: NotificationCredentialRecord,
+): Promise<DelegationIdentity> => {
+  const identity = await ECDSAKeyIdentity.fromKeyPair(record.keyPair);
+  const chain = DelegationChain.fromJSON(JSON.parse(record.chainJson));
+  return DelegationIdentity.fromDelegation(identity, chain);
+};

src/frontend/src/lib/utils/notifications/pushSubscription.ts

@@ -5,7 +5,9 @@
 
 import { bufFromBufLike } from "$lib/utils/utils";
 
-const SERVICE_WORKER_URL = "/push-sw.js";
+// SvelteKit bundles the worker here; it is registered on opt-in rather than on
+// every load (kit.serviceWorker.register is off).
+const SERVICE_WORKER_URL = "/service-worker.js";
 
 export interface PushSubscriptionKeys {
   endpoint: string;
@@ -25,7 +27,9 @@ export const requestNotificationPermission = async (): Promise<boolean> =>
   (await Notification.requestPermission()) === "granted";
 
 const registerServiceWorker = async (): Promise<ServiceWorkerRegistration> => {
-  await navigator.serviceWorker.register(SERVICE_WORKER_URL);
+  await navigator.serviceWorker.register(SERVICE_WORKER_URL, {
+    type: "module",
+  });
   return navigator.serviceWorker.ready;
 };
 

src/frontend/src/lib/utils/notifications/reconcile.test.ts

@@ -0,0 +1,106 @@
+import { describe, expect, it, vi } from "vitest";
+import { reconcile, type PulledNotification } from "./reconcile";
+
+const ORIGIN = "https://app.example";
+
+interface FakeNotification {
+  tag: string;
+  data: { origin?: string } | null;
+  close: ReturnType<typeof vi.fn>;
+}
+
+const shownNotification = (
+  tag: string,
+  origin: string | undefined,
+): FakeNotification => ({
+  tag,
+  data: origin === undefined ? null : { origin },
+  close: vi.fn(),
+});
+
+const pending = (id: string): PulledNotification => ({
+  id,
+  title: `title-${id}`,
+  body: [`body-${id}`],
+});
+
+const fakeRegistration = (shown: FakeNotification[]) => {
+  const showNotification = vi.fn(async () => {});
+  const registration = {
+    getNotifications: async () => shown as unknown as Notification[],
+    showNotification,
+  } as unknown as ServiceWorkerRegistration;
+  return { registration, showNotification };
+};
+
+describe("reconcile", () => {
+  it("closes this origin's notifications that are no longer pending", async () => {
+    const stale = shownNotification("a", ORIGIN);
+    const kept = shownNotification("b", ORIGIN);
+    const { registration } = fakeRegistration([stale, kept]);
+
+    await reconcile(registration, ORIGIN, [pending("b")]);
+
+    expect(stale.close).toHaveBeenCalledOnce();
+    expect(kept.close).not.toHaveBeenCalled();
+  });
+
+  it("empty pending closes all of this origin's notifications and shows nothing", async () => {
+    const one = shownNotification("a", ORIGIN);
+    const two = shownNotification("b", ORIGIN);
+    const { registration, showNotification } = fakeRegistration([one, two]);
+
+    await reconcile(registration, ORIGIN, []);
+
+    expect(one.close).toHaveBeenCalledOnce();
+    expect(two.close).toHaveBeenCalledOnce();
+    expect(showNotification).not.toHaveBeenCalled();
+  });
+
+  it("never touches another origin's notifications", async () => {
+    const otherApp = shownNotification("a", "https://other.example");
+    const noOrigin = shownNotification("b", undefined);
+    const { registration } = fakeRegistration([otherApp, noOrigin]);
+
+    await reconcile(registration, ORIGIN, []);
+
+    expect(otherApp.close).not.toHaveBeenCalled();
+    expect(noOrigin.close).not.toHaveBeenCalled();
+  });
+
+  it("shows or replaces each pending notification keyed by its id", async () => {
+    const { registration, showNotification } = fakeRegistration([]);
+
+    await reconcile(registration, ORIGIN, [pending("x"), pending("y")]);
+
+    expect(showNotification).toHaveBeenCalledTimes(2);
+    expect(showNotification).toHaveBeenCalledWith(
+      "title-x",
+      expect.objectContaining({
+        body: "body-x",
+        tag: "x",
+        data: { origin: ORIGIN, id: "x" },
+      }),
+    );
+    expect(showNotification).toHaveBeenCalledWith(
+      "title-y",
+      expect.objectContaining({ tag: "y", data: { origin: ORIGIN, id: "y" } }),
+    );
+  });
+
+  it("re-showing the same id replaces in place (same tag), not a duplicate", async () => {
+    // A notification for id "x" is already on screen; a fresh pull of "x"
+    // reuses its tag, so the browser updates rather than stacks.
+    const existing = shownNotification("x", ORIGIN);
+    const { registration, showNotification } = fakeRegistration([existing]);
+
+    await reconcile(registration, ORIGIN, [pending("x")]);
+
+    expect(existing.close).not.toHaveBeenCalled();
+    expect(showNotification).toHaveBeenCalledOnce();
+    expect(showNotification).toHaveBeenCalledWith(
+      "title-x",
+      expect.objectContaining({ tag: "x" }),
+    );
+  });
+});

src/frontend/src/lib/utils/notifications/reconcile.ts

@@ -0,0 +1,44 @@
+// Brings one origin's on-screen notifications in line with the set the dApp
+// reports as pending. Each pending notification is shown or updated in place
+// (keyed by its `id` via `tag`), and any notification the dApp no longer lists
+// is closed. Closing is how a dismissal reaches other devices: the app drops
+// the id from its pending set, and every device removes it on the next pull.
+//
+// Extracted from the service worker so it can be tested without the worker's
+// top-level `self`/event-listener side effects; the worker passes its own
+// `registration`.
+
+// Provisional pull interface: the dApp returns the notifications currently
+// pending for the authenticated caller. Finalized alongside the client crate.
+// `id` is the dApp's stable notification id, used as the notification `tag`.
+export interface PulledNotification {
+  id: string;
+  title: string;
+  body: [] | [string];
+}
+
+export const reconcile = async (
+  registration: ServiceWorkerRegistration,
+  origin: string,
+  pulled: PulledNotification[],
+): Promise<void> => {
+  const pending = new Set(pulled.map((notification) => notification.id));
+  const shown = await registration.getNotifications();
+  for (const notification of shown) {
+    const forThisOrigin =
+      (notification.data as { origin?: string } | null)?.origin === origin;
+    if (forThisOrigin && !pending.has(notification.tag)) {
+      notification.close();
+    }
+  }
+  await Promise.all(
+    pulled.map((notification) =>
+      registration.showNotification(notification.title, {
+        body: notification.body[0],
+        icon: "/favicon.svg",
+        tag: notification.id,
+        data: { origin, id: notification.id },
+      }),
+    ),
+  );
+};