@phoenix-iq/notifications 0.0.0-stage → 1.1.0

package/dist/theme.js

@@ -0,0 +1,93 @@
+/**
+ * What the bell and the banner share: their default colour, the readable text colour on it, and a light or dark look picked
+ * from the page itself, so they suit the site without settings of their own.
+ */
+export const DEFAULT_COLOR = '#2563eb';
+/** `#rrggbb` as given, or the SDK's blue. */
+export function colorOr(color) {
+    return /^#[0-9a-f]{6}$/i.test(color ?? '') ? color.toLowerCase() : DEFAULT_COLOR;
+}
+export function hexToRgb(hex) {
+    const n = Number.parseInt(hex.slice(1), 16);
+    return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+function luminance([r, g, b]) {
+    const [lr, lg, lb] = [r, g, b].map((v) => {
+        const c = v / 255;
+        return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * lr + 0.7152 * lg + 0.0722 * lb;
+}
+function contrast(a, b) {
+    const [high, low] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+    return (high + 0.05) / (low + 0.05);
+}
+/** White or near-black, whichever reads better on the colour. */
+export function textOn(color) {
+    const rgb = hexToRgb(color);
+    return contrast(rgb, [255, 255, 255]) >= contrast(rgb, [17, 17, 17]) ? '#ffffff' : '#111111';
+}
+/** `rgb(…)` / `rgba(…)` as getComputedStyle gives it, unless (almost) transparent. */
+function parseRgb(value) {
+    const match = /^rgba?\(\s*([\d.]+),\s*([\d.]+),\s*([\d.]+)(?:,\s*([\d.]+))?\s*\)$/.exec(value);
+    if (!match || (match[4] !== undefined && Number(match[4]) < 0.5))
+        return null;
+    return [Number(match[1]), Number(match[2]), Number(match[3])];
+}
+/** The page's own background decides; without one, the colour scheme it declares; else the system's. */
+function pageIsDark() {
+    for (const element of [document.body, document.documentElement]) {
+        if (!element)
+            continue;
+        const rgb = parseRgb(getComputedStyle(element).backgroundColor);
+        if (rgb)
+            return luminance(rgb) < 0.2;
+    }
+    const meta = document.querySelector('meta[name="color-scheme"]')?.content ?? '';
+    const declared = `${getComputedStyle(document.documentElement).colorScheme} ${meta}`;
+    const dark = /\bdark\b/.test(declared);
+    const light = /\blight\b/.test(declared);
+    if (dark !== light)
+        return dark;
+    return window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
+}
+const THEMES = {
+    light: { panel: '#ffffff', text: '#111827', muted: '#4b5563', border: 'rgba(17, 24, 39, 0.12)', hover: 'rgba(17, 24, 39, 0.06)', error: '#b91c1c', tip: '#111827', tipText: '#ffffff' },
+    dark: { panel: '#1c1c22', text: '#f4f4f5', muted: '#a1a1aa', border: 'rgba(255, 255, 255, 0.14)', hover: 'rgba(255, 255, 255, 0.08)', error: '#fca5a5', tip: '#f4f4f5', tipText: '#18181b' },
+};
+/** Sets the accent (`--bell`, `--bell-text`, `--ring`) and the page-matched look (`--panel`, `--text`…) on the host. */
+export function applyColors(host, color) {
+    host.style.setProperty('--bell', color);
+    host.style.setProperty('--bell-text', textOn(color));
+    host.style.setProperty('--ring', `rgba(${hexToRgb(color).join(', ')}, 0.55)`);
+    applyTheme(host);
+}
+/** Again when something opens: the site may have changed its look since. */
+export function applyTheme(host) {
+    const theme = THEMES[pageIsDark() ? 'dark' : 'light'];
+    for (const [name, value] of Object.entries({
+        '--panel': theme.panel,
+        '--text': theme.text,
+        '--muted': theme.muted,
+        '--border': theme.border,
+        '--hover': theme.hover,
+        '--error': theme.error,
+        '--tip': theme.tip,
+        '--tip-text': theme.tipText,
+    }))
+        host.style.setProperty(name, value);
+}
+/** The language the bell and the banner speak: Arabic for `ar…`, else English. */
+export function uiLanguage(language) {
+    return language.toLowerCase().startsWith('ar') ? 'ar' : 'en';
+}
+// Tabler icons (MIT).
+export const ICONS = {
+    bell: '<path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"/><path d="M9 17v1a3 3 0 0 0 6 0v-1"/>',
+    bellOff: '<path d="M9.346 5.353c.21 -.129 .428 -.246 .654 -.353a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3m-1 3h-13a4 4 0 0 0 2 -3v-3a6.996 6.996 0 0 1 1.273 -3.707"/><path d="M9 17v1a3 3 0 0 0 6 0v-1"/><path d="M3 3l18 18"/>',
+    check: '<path d="M5 12l5 5l10 -10"/>',
+    close: '<path d="M18 6l-12 12"/><path d="M6 6l12 12"/>',
+};
+export function svg(paths, size, stroke = 1.8) {
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${stroke}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
+}

package/package.json

@@ -1,6 +1,44 @@
 {
   "name": "@phoenix-iq/notifications",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.1.0",
+  "description": "Phoenix Notifications web SDK: browser push subscriptions, the subscription bell, verified sign-in and click handling for apps on notifications.phnx-iq.com.",
+  "type": "module",
+  "license": "UNLICENSED",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./phoenix-notifications-sw.js": "./phoenix-notifications-sw.js"
+  },
+  "files": [
+    "dist",
+    "phoenix-notifications-sw.js",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Phoenix-IQ/phoenix-notifications.git",
+    "directory": "sdk/web"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
+    "build": "npm run clean && tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "lint": "eslint .",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "eslint": "^10.12.0",
+    "globals": "^17.13.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.71.1"
+  }
+}

package/phoenix-notifications-sw.js

@@ -0,0 +1,149 @@
+/*
+ * Phoenix Notifications service worker. Serve it from the site's root (default path /phoenix-notifications-sw.js) so it
+ * controls the whole site. Plain JavaScript on purpose: copy it as it is, no build step.
+ *
+ * It shows the pushes the site receives, reports clicks to the notifications API, focuses an open tab of the site (and tells
+ * the page, which routes the click) or opens the link, and renews the subscription when the browser replaces it.
+ * Its state is shared with the SDK through IndexedDB ("phoenix-notifications" / "state"); keep the two in step.
+ */
+
+const DB_NAME = 'phoenix-notifications';
+const STORE = 'state';
+const CLICK_MESSAGE = 'phoenix-notifications:click';
+
+function openDb() {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, 1);
+    request.onupgradeneeded = () => {
+      if (!request.result.objectStoreNames.contains(STORE)) request.result.createObjectStore(STORE);
+    };
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+  });
+}
+
+async function read(key) {
+  const db = await openDb();
+  try {
+    return await new Promise((resolve, reject) => {
+      const request = db.transaction(STORE, 'readonly').objectStore(STORE).get(key);
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  } finally {
+    db.close();
+  }
+}
+
+async function write(key, value) {
+  const db = await openDb();
+  try {
+    await new Promise((resolve, reject) => {
+      const request = db.transaction(STORE, 'readwrite').objectStore(STORE).put(value, key);
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  } finally {
+    db.close();
+  }
+}
+
+function apiUrl(config, path) {
+  return new URL(`${(config.serverUrl || '').replace(/\/+$/, '')}${path}`, self.location.origin).toString();
+}
+
+function toBytes(base64Url) {
+  const padded = base64Url.replace(/-/g, '+').replace(/_/g, '/') + '='.repeat((4 - (base64Url.length % 4)) % 4);
+  const raw = atob(padded);
+  const bytes = new Uint8Array(raw.length);
+  for (let i = 0; i < raw.length; i++) bytes[i] = raw.charCodeAt(i);
+  return bytes;
+}
+
+function toBase64Url(buffer) {
+  if (!buffer) return '';
+  let raw = '';
+  for (const byte of new Uint8Array(buffer)) raw += String.fromCharCode(byte);
+  return btoa(raw).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+
+self.addEventListener('install', () => self.skipWaiting());
+
+self.addEventListener('activate', (event) => event.waitUntil(self.clients.claim()));
+
+self.addEventListener('push', (event) => {
+  let payload;
+  try {
+    payload = event.data ? event.data.json() : {};
+  } catch {
+    payload = { title: event.data ? event.data.text() : '' };
+  }
+
+  const options = {
+    body: payload.body || '',
+    icon: payload.icon || undefined,
+    image: payload.image || undefined,
+    lang: payload.lang || undefined,
+    dir: payload.dir || 'auto',
+    // the same message never shows twice
+    tag: payload.m || undefined,
+    data: { id: payload.id, m: payload.m, url: payload.url, data: payload.data || {} },
+  };
+  event.waitUntil(self.registration.showNotification(payload.title || '', options));
+});
+
+self.addEventListener('notificationclick', (event) => {
+  event.notification.close();
+  const details = event.notification.data || {};
+
+  event.waitUntil(
+    (async () => {
+      if (details.id) {
+        try {
+          const config = await read('config');
+          if (config) await fetch(apiUrl(config, `/v1/opened/${details.id}`), { method: 'POST', keepalive: true });
+        } catch {
+          // counting the click must never stop it from opening
+        }
+      }
+
+      const windows = await self.clients.matchAll({ type: 'window', includeUncontrolled: true });
+      const open = windows.find((client) => new URL(client.url).origin === self.location.origin);
+      if (open) {
+        await open.focus();
+        open.postMessage({ type: CLICK_MESSAGE, url: details.url, data: details.data || {}, messageId: details.m });
+        return;
+      }
+      await self.clients.openWindow(details.url || self.registration.scope);
+    })(),
+  );
+});
+
+self.addEventListener('pushsubscriptionchange', (event) => {
+  event.waitUntil(
+    (async () => {
+      const config = await read('config');
+      if (!config || !config.vapidKey) return;
+      // no device: the browser was never registered, or the person unsubscribed (the bell, unsubscribe()); leave it so
+      const device = await read(`device:${config.appId}`);
+      if (!device || (await read(`opt-out:${config.appId}`))) return;
+      const subscription =
+        event.newSubscription ||
+        (await self.registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: toBytes(config.vapidKey) }));
+
+      const response = await fetch(apiUrl(config, `/v1/devices/${device.id}`), {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json', Authorization: `Device ${device.secret}` },
+        body: JSON.stringify({
+          subscription: {
+            endpoint: subscription.endpoint,
+            p256dh: toBase64Url(subscription.getKey('p256dh')),
+            auth: toBase64Url(subscription.getKey('auth')),
+            applicationServerKey: config.vapidKey,
+          },
+        }),
+      });
+      if (response.ok) await write(`device:${config.appId}`, { ...device, endpoint: subscription.endpoint, syncedAt: Date.now() });
+    })(),
+  );
+});