Web Push (VAPID) — browser notifications

[fluxy chat]                  [browser sw]                    [push service]
   |                               |                                |
   | <-- subscribe endpoint, keys  |                                |
   |     (publicKey from worker)   |                                |
   |                               |                                |
   |-- POST /push/web/subscribe -->|                                |
   |   (endpoint, p256dh, auth)    |                                |
   |                               |                                |
   | (new message in room)         |                                |
   |                               |                                |
   | generate ephemeral ECDH key + |                                |
   | derive shared secret, encrypt |                                |
   | sign VAPID JWT (ES256),       |                                |
   | build headers                 |                                |
   |                               |                                |
   |                              POST (aes128gcm body, vapid t=, k=) -> 
   |                                                              [success 201] -> deliver

// sw.js
self.addEventListener("push", (event) => {
  const data = event.data ? event.data.json() : {};
  event.waitUntil(
    self.registration.showNotification(data.title || "New message", {
      body: data.body || "",
      icon: data.icon || "/icon-192.png",
      badge: data.badge || "/badge-72.png",
      data: { url: data.url || "/" },
    }),
  );
});

self.addEventListener("notificationclick", (event) => {
  event.notification.close();
  if (event.notification.data?.url) {
    event.waitUntil(clients.openWindow(event.notification.data.url));
  }
});

import { FluxyChatClient, enableWebPushInBrowser } from "@fluxy-chat/sdk";

const client = new FluxyChatClient({ baseUrl: WORKER_URL, token: jwt });
const reg = await navigator.serviceWorker.ready;

const result = await enableWebPushInBrowser(client, {
  serviceWorkerRegistration: reg,
  projectId: "proj_1",
});
if (result.ok) console.log("subscribed");

import { useWebPush } from "@fluxy-chat/sdk";

export function NotificationsToggle({ client, projectId }) {
  const {
    permission, subscribed, subscriptions,
    requestPermissionAndSubscribe, unsubscribe, loading, error,
  } = useWebPush(client, { projectId });

  return (
    <div>
      <p>Permission: {permission}</p>
      <button disabled={loading} onClick={requestPermissionAndSubscribe}>
        {subscribed ? "Subscribed" : "Enable notifications"}
      </button>
      {subscriptions.map((s) => (
        <div key={s.id}>
          {s.endpointHost} (failures: {s.failureCount})
          <button onClick={() => unsubscribe(s.id)}>×</button>
        </div>
      ))}
      {error && <pre>{error}</pre>}
    </div>
  );
}

const { publicKey } = await fetch(`${WORKER_URL}/push/web/vapid-public-key`)
  .then((r) => r.json());

const rawKey = (b64) => {
  const pad = "=".repeat((4 - (b64.length % 4)) % 4);
  return Uint8Array.from(
    atob(b64.replace(/-/g, "+").replace(/_/g, "/") + pad),
    (c) => c.charCodeAt(0),
  );
};

const sub = await reg.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: rawKey(publicKey),
});

await fetch(`${WORKER_URL}/push/web/subscribe`, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${jwt}`,
    "X-Fluxy-Project-Id": "proj_1",
  },
  body: JSON.stringify({
    endpoint: sub.endpoint,
    keys: {
      p256dh: sub.toJSON().keys.p256dh,
      auth: sub.toJSON().keys.auth,
    },
    userAgent: navigator.userAgent,
  }),
});

# List all subscriptions for the authenticated user
curl -H "Authorization: Bearer $JWT" $WORKER/push/web/subscriptions

# Remove one (by id or endpoint URL)
curl -X DELETE -H "Authorization: Bearer $JWT" $WORKER/push/web/subscribe/<id>