Notifications & Push

declare const btn: HTMLButtonElement;
 
btn.addEventListener("click", async () => {
  const result = await Notification.requestPermission();
  if (result !== "granted") return;
  // subscribe to push, update UI
});

const status = await navigator.permissions.query({
  name: "notifications",
});
status.state; // "granted" | "denied" | "prompt"

const reg = await navigator.serviceWorker.ready;
await reg.showNotification("Build finished", {
  body: "main #512 passed in 3m 12s",
  icon: "/icons/192.png",
  tag: "build-512",
  data: { url: "/builds/512" },
});
 
const open = await reg.getNotifications({
  tag: "build-512",
});
open.forEach((n) => n.close());

/// <reference lib="webworker" />
declare const self: ServiceWorkerGlobalScope;
 
self.addEventListener("notificationclick", (event) => {
  event.notification.close();
  if (event.action === "mute") return; // action button
  const data: unknown = event.notification.data;
  const path =
    typeof data === "object" && data && "url" in data
      ? String(data.url)
      : "/";
  const url = new URL(path, self.location.origin).href;
  event.waitUntil(focusOrOpen(url));
});
 
async function focusOrOpen(url: string) {
  const wins = await self.clients.matchAll({
    type: "window",
    includeUncontrolled: true,
  });
  const hit = wins.find((w) => w.url === url);
  return hit ? hit.focus() : self.clients.openWindow(url);
}

browser                     push service             your server
  | pushManager.subscribe()       |                        |
  |------------------------------>|                        |
  |<-- PushSubscription ----------|                        |
  |-- POST subscription JSON ------------------------------>|  store it
  |                               |<-- encrypted POST -----|  web-push
  |<-- push event (SW wakes) -----|                        |

{
  "endpoint": "https://fcm.googleapis.com/fcm/send/dQ9…",
  "expirationTime": null,
  "keys": { "p256dh": "BNc…", "auth": "tBH…" }
}

bunx web-push generate-vapid-keys --json   # npx works too
# {"publicKey":"BHoV…","privateKey":"k3Jx…"}

VAPID_PUBLIC_KEY=BHoV...     # also shipped to the browser
VAPID_PRIVATE_KEY=k3Jx...    # server only, never bundled
VAPID_SUBJECT=mailto:ops@example.com

bun add web-push && bun add -d @types/web-push

import webpush from "web-push";
import { z } from "zod";
 
const env = z
  .object({
    VAPID_PUBLIC_KEY: z.string().min(1),
    VAPID_PRIVATE_KEY: z.string().min(1),
    VAPID_SUBJECT: z.string().min(1),
  })
  .parse(process.env);
 
webpush.setVapidDetails(
  env.VAPID_SUBJECT,
  env.VAPID_PUBLIC_KEY,
  env.VAPID_PRIVATE_KEY,
);
 
export const Subscription = z.object({
  endpoint: z.url(),
  expirationTime: z.number().nullish(),
  keys: z.object({ p256dh: z.string(), auth: z.string() }),
});
export type Subscription = z.infer<typeof Subscription>;

const isStandalone =
  matchMedia("(display-mode: standalone)").matches ||
  // iOS legacy flag, not in lib.dom
  (navigator as { standalone?: boolean }).standalone ===
    true;
const canPush = "PushManager" in window && isStandalone;

{
  "web_push": 8030,
  "notification": {
    "title": "Order shipped",
    "body": "Arrives Thursday",
    "navigate": "https://shop.example.com/orders/42",
    "app_badge": "3"
  }
}

async function setUnread(count: number) {
  if (!("setAppBadge" in navigator)) return;
  try {
    await (count
      ? navigator.setAppBadge(count)
      : navigator.clearAppBadge());
  } catch {
    // not installed, or permission missing
  }
}

type NotificationAction = {
  action: string;
  title: string;
  icon?: string;
};
type RichNotificationOptions = NotificationOptions & {
  actions?: NotificationAction[];
  image?: string;
  renotify?: boolean;
  vibrate?: number[];
  timestamp?: number;
};

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "lib": ["es2024", "webworker"],
    "types": []
  },
  "include": ["src/sw.ts"]
}

type Outcome =
  | "granted"
  | "denied"
  | "dismissed"
  | "unsupported";
 
async function enableNotifications(): Promise<Outcome> {
  if (!("Notification" in window)) return "unsupported";
  if (Notification.permission === "denied") return "denied";
  const ok = window.confirm(
    "Get a notification when your export is ready?",
  );
  if (!ok) return "dismissed";
  const p = await Notification.requestPermission();
  return p === "default" ? "dismissed" : p;
}
 
declare const btn: HTMLButtonElement;
btn.addEventListener("click", async () => {
  const outcome = await enableNotifications();
  btn.hidden = outcome === "granted";
});

declare const VAPID_PUBLIC_KEY: string; // injected at build
 
export async function subscribeToPush() {
  const reg = await navigator.serviceWorker.ready;
  const sub =
    (await reg.pushManager.getSubscription()) ??
    (await reg.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: VAPID_PUBLIC_KEY,
    }));
  const res = await fetch("/api/push/subscribe", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(sub), // uses toJSON()
  });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return sub;
}

/// <reference lib="webworker" />
declare const self: ServiceWorkerGlobalScope;
 
type Msg = { title: string; body?: string; url?: string };
 
function parse(e: PushEvent): Msg {
  try {
    const d: unknown = e.data?.json();
    if (typeof d === "object" && d && "title" in d) {
      return d as Msg; // or validate with Zod
    }
  } catch {} // payload wasn't JSON
  return { title: "New activity" };
}
 
self.addEventListener("push", (event) => {
  const msg = parse(event);
  event.waitUntil(
    self.registration.showNotification(msg.title, {
      body: msg.body,
      data: { url: msg.url ?? "/" },
    }),
  );
});

import webpush, { WebPushError } from "web-push";
import type { Subscription } from "./push.ts";
 
declare function deleteSub(endpoint: string): Promise<void>;
export async function notifyAll(
  subs: Subscription[],
  payload: { title: string; body?: string; url?: string },
) {
  const body = JSON.stringify(payload);
  await Promise.allSettled(
    subs.map(async (sub) => {
      try {
        await webpush.sendNotification(sub, body, {
          TTL: 60 * 60,
          urgency: "normal",
        });
      } catch (err) {
        const gone = err instanceof WebPushError &&
          [404, 410].includes(err.statusCode);
        if (gone) await deleteSub(sub.endpoint);
        else throw err;
      }
    }),
  );
}

import { Subscription } from "./push.ts";
 
const subs = new Map<string, Subscription>(); // use a DB
 
Bun.serve({
  routes: {
    "/api/push/subscribe": {
      POST: async (req) => {
        const parsed = Subscription.safeParse(
          await req.json(),
        );
        if (!parsed.success) {
          return new Response("Bad subscription", {
            status: 400,
          });
        }
        subs.set(parsed.data.endpoint, parsed.data);
        return new Response(null, { status: 201 });
      },
    },
  },
});