@rivium/push-web 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rivium/push-web",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Web Push SDK for browsers - Firebase alternative that works everywhere",
   "type": "module",
   "main": "dist/index.js",

package/service-worker.js

@@ -6,7 +6,73 @@
  */
 
 // Cache name for offline support
-const CACHE_NAME = 'rivium-push-v1';
+const CACHE_NAME = 'rivium-push-v0.1.4';
+
+/**
+ * Config passed by the SDK on the registration URL.
+ *
+ * A service worker is terminated between pushes, so anything kept in memory is
+ * gone by the time the next one arrives. The script URL is persisted by the
+ * browser, so reading config from its query string works on every wake-up
+ * without needing IndexedDB.
+ */
+const RIVIUM_CONFIG = (() => {
+  try {
+    const params = new URL(self.location.href).searchParams;
+    return {
+      apiKey: params.get('riviumApiKey') || null,
+      serverUrl: params.get('riviumServerUrl') || 'https://push-api.rivium.co',
+      deviceId: params.get('riviumDeviceId') || null,
+    };
+  } catch (e) {
+    return { apiKey: null, serverUrl: 'https://push-api.rivium.co', deviceId: null };
+  }
+})();
+
+/**
+ * Confirm delivery to Rivium Push.
+ *
+ * Web Push, APNs and FCM all report only that the push service *accepted* a
+ * notification — none of them confirm it reached the device. This ack is the
+ * only signal that it actually arrived, so the dashboard can distinguish
+ * "accepted" from "delivered".
+ *
+ * Best-effort: a failure here must never stop the notification being shown.
+ */
+function riviumReportDelivered(messageId) {
+  if (!messageId || !RIVIUM_CONFIG.apiKey || !RIVIUM_CONFIG.deviceId) {
+    console.warn('[RiviumPush SW] Delivery ack skipped — missing messageId or SDK config', {
+      messageId: messageId || null,
+      hasApiKey: !!RIVIUM_CONFIG.apiKey,
+      hasDeviceId: !!RIVIUM_CONFIG.deviceId,
+    });
+    return Promise.resolve();
+  }
+
+  // No `keepalive`: event.waitUntil already holds the worker open, and
+  // keepalive is unreliable for fetches issued from a service worker.
+  return fetch(`${RIVIUM_CONFIG.serverUrl}/receipts/delivered`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'x-api-key': RIVIUM_CONFIG.apiKey,
+    },
+    body: JSON.stringify({ messageId, deviceId: RIVIUM_CONFIG.deviceId }),
+  })
+    .then((res) => {
+      // A non-2xx is a failure — resolving on it would hide the problem the
+      // same way the server used to hide an ack for a receipt that did not
+      // exist yet.
+      if (!res.ok) {
+        console.warn('[RiviumPush SW] Delivery ack rejected', res.status);
+        return;
+      }
+      console.log('[RiviumPush SW] Delivery confirmed', messageId);
+    })
+    .catch((err) => {
+      console.warn('[RiviumPush SW] Delivery ack failed:', err && err.message);
+    });
+}
 
 // Install event
 self.addEventListener('install', (event) => {
@@ -50,10 +116,33 @@ self.addEventListener('push', (event) => {
 
   const options = {
     body: localizedBody || data.body,
-    icon: data.iconUrl || data.icon,
-    badge: data.iconUrl || data.icon,
+    // Icons must resolve to a real file. Android Chrome silently drops a
+    // notification when the icon 404s (desktop is more forgiving), so keep
+    // /icon.png and /badge.png present in your public directory, or always
+    // send iconUrl from the backend.
+    icon: data.iconUrl || data.icon || '/icon.png',
+    // `badge` is the small monochrome icon Android shows in the status bar.
+    badge: data.badgeIcon || data.iconUrl || data.icon || '/badge.png',
     image: data.imageUrl || data.image,
-    tag: data.tag || data.collapseKey || data.threadId || 'rivium-push-notification',
+    // Per-message uniqueness by default. A fixed tag collapses every push
+    // into one slot in the Android shade — new notifications silently replace
+    // older ones and the user never sees the second, third, … arrive. The
+    // backend still opts into grouping by sending an explicit tag or
+    // collapseKey (e.g. to fold "N liked your post" into one).
+    tag:
+      data.tag ||
+      data.collapseKey ||
+      data.threadId ||
+      data.messageId ||
+      `rivium-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+    // renotify forces Android Chrome to actually surface the notification
+    // while Chrome is backgrounded but not closed. Without it Chrome treats
+    // the origin as "about to be focused" and swallows showNotification — the
+    // worker logs success and the shade stays empty. Harmless elsewhere.
+    renotify: true,
+    // A second signal to Android that this is a fresh user-visible event.
+    // Ignored on desktop.
+    vibrate: [200, 100, 200],
     data: {
       ...data.data,
       deepLink: data.deepLink,
@@ -78,8 +167,105 @@ self.addEventListener('push', (event) => {
   // Show notification with potentially localized title
   const title = localizedTitle || data.title;
 
+  event.waitUntil((async () => {
+    // Mirror the payload to any visible page. On mobile the app is usually
+    // backgrounded or the screen is locked, so the page-side connection is
+    // asleep and only the worker sees the push. Pages should dedupe by
+    // messageId, since a foreground client may receive it both ways.
+    try {
+      const clientsList = await self.clients.matchAll({
+        type: 'window',
+        includeUncontrolled: true,
+      });
+      for (const client of clientsList) {
+        client.postMessage({
+          type: 'rivium-push-message',
+          message: {
+            title,
+            body: localizedBody || data.body,
+            data: data.data || {},
+            deepLink: data.deepLink,
+            messageId: data.messageId,
+            campaignId: data.campaignId,
+          },
+        });
+      }
+    } catch (err) {
+      console.warn('[RiviumPush SW] client postMessage failed:', err);
+    }
+
+    // Always show the OS notification: Chrome's user-visible contract revokes
+    // subscriptions that push silently. Wrapped so an Android quirk that would
+    // otherwise fail silently surfaces here; the retry drops the optional
+    // fields (icon/badge/image/actions) that are the usual cause.
+    try {
+      await self.registration.showNotification(title, options);
+    } catch (err) {
+      console.warn('[RiviumPush SW] showNotification failed, retrying minimal', err);
+      try {
+        await self.registration.showNotification(title, {
+          body: options.body,
+          tag: options.tag,
+          data: options.data,
+        });
+      } catch (err2) {
+        console.error('[RiviumPush SW] showNotification (minimal) failed too', err2);
+      }
+    }
+
+    // Confirm arrival so the dashboard can show `delivered`, not only `sent`.
+    await riviumReportDelivered(data.messageId);
+  })());
+});
+
+/**
+ * The browser can rotate a push subscription at any time — after a long idle
+ * period, a browser update, or when it decides the old endpoint is stale.
+ * Without this handler the old endpoint stays registered server-side, keeps
+ * returning 410 Gone, and the user silently stops receiving notifications.
+ *
+ * Re-subscribe with the same VAPID key and register the new endpoint.
+ */
+self.addEventListener('pushsubscriptionchange', (event) => {
+  console.log('[RiviumPush SW] Push subscription changed, re-subscribing');
+
+  const applicationServerKey =
+    (event.oldSubscription &&
+      event.oldSubscription.options &&
+      event.oldSubscription.options.applicationServerKey) ||
+    null;
+
+  if (!applicationServerKey || !RIVIUM_CONFIG.apiKey || !RIVIUM_CONFIG.deviceId) {
+    console.warn(
+      '[RiviumPush SW] Cannot re-subscribe: missing VAPID key or SDK config',
+    );
+    return;
+  }
+
   event.waitUntil(
-    self.registration.showNotification(title, options)
+    self.registration.pushManager
+      .subscribe({ userVisibleOnly: true, applicationServerKey })
+      .then((subscription) =>
+        fetch(`${RIVIUM_CONFIG.serverUrl}/devices/register`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'x-api-key': RIVIUM_CONFIG.apiKey,
+          },
+          body: JSON.stringify({
+            deviceId: RIVIUM_CONFIG.deviceId,
+            platform: 'web',
+            appIdentifier: self.location.origin,
+            webPushSubscription: subscription.toJSON(),
+          }),
+        }),
+      )
+      .then(() => {
+        console.log('[RiviumPush SW] Re-subscribed and re-registered');
+      })
+      .catch((err) => {
+        console.error('[RiviumPush SW] Re-subscribe failed:', err && err.message);
+      }),
   );
 });