Install Campaign on your site

curl -o public/campaign-push/campaign-sw.js --create-dirs \
  https://axilrate.com/developers/campaign-sw.js
# or, for the stub:
curl -o public/campaign-push/campaign-sw.js --create-dirs \
  https://axilrate.com/developers/campaign-sw-stub.js

{
  "glob": "**/*",
  "input": "src/campaign-push",
  "output": "campaign-push"
}

/**
 * Campaign Web Push Service Worker — v1.3.0
 */
'use strict';

// ── Notification inbox (IndexedDB) ─────────────────────────────────────────
const INBOX_DB_NAME    = 'campaign_notification_inbox';
const INBOX_DB_VERSION = 1;
const INBOX_STORE_NAME = 'notifications';
const INBOX_MAX_AGE_MS = 7 * 24 * 60 * 60 * 1000;

// Not a real notification — a sentinel row in the SAME store (same keyPath,
// no version bump needed) so the page can tell "has a genuinely new SW
// version activated since I last checked" without racing a live postMessage
// against page load. activate only fires once per real content update
// (skipWaiting()+clients.claim() below run there, not on every routine idle
// restart of an already-active worker), so this timestamp changing IS "the
// SW was updated." The page-side reader (notificationInbox.ts) filters this
// id out of listInboxNotifications() and reads it separately — see
// getServiceWorkerActivationTs()/webpush.ts's syncWebPushSubscription().
const SW_ACTIVATION_MARKER_ID = '__sw_activation__';

function openInboxDb() {
  return new Promise((resolve, reject) => {
    const req = indexedDB.open(INBOX_DB_NAME, INBOX_DB_VERSION);
    req.onupgradeneeded = () => {
      const db = req.result;
      if (!db.objectStoreNames.contains(INBOX_STORE_NAME)) {
        const store = db.createObjectStore(INBOX_STORE_NAME, { keyPath: 'id' });
        store.createIndex('timestamp', 'timestamp');
      }
    };
    req.onsuccess = () => resolve(req.result);
    req.onerror  = () => reject(req.error);
  });
}

function saveInboxNotification(record) {
  return openInboxDb().then((db) =>
    new Promise((resolve) => {
      const tx = db.transaction(INBOX_STORE_NAME, 'readwrite');
      tx.objectStore(INBOX_STORE_NAME).put(record);
      tx.oncomplete = () => resolve();
      tx.onerror    = () => resolve();
    })
  ).catch(() => {});
}

function deleteInboxNotification(id) {
  if (!id) return Promise.resolve();
  return openInboxDb().then((db) =>
    new Promise((resolve) => {
      const tx = db.transaction(INBOX_STORE_NAME, 'readwrite');
      tx.objectStore(INBOX_STORE_NAME).delete(id);
      tx.oncomplete = () => resolve();
      tx.onerror    = () => resolve();
    })
  ).catch(() => {});
}

function pruneOldInboxNotifications() {
  const cutoff = Date.now() - INBOX_MAX_AGE_MS;
  return openInboxDb().then((db) =>
    new Promise((resolve) => {
      const tx        = db.transaction(INBOX_STORE_NAME, 'readwrite');
      const cursorReq = tx.objectStore(INBOX_STORE_NAME)
                          .index('timestamp')
                          .openCursor(IDBKeyRange.upperBound(cutoff));
      cursorReq.onsuccess = () => {
        const cursor = cursorReq.result;
        if (cursor) { cursor.delete(); cursor.continue(); }
      };
      tx.oncomplete = () => resolve();
      tx.onerror    = () => resolve();
    })
  ).catch(() => {});
}

function broadcastInboxChanged() {
  try {
    new BroadcastChannel('campaign_notification_inbox')
      .postMessage({ type: 'CAMPAIGN_INBOX_CHANGED' });
  } catch { /* BroadcastChannel unsupported — widget won't live-update across tabs */ }
}

// ── Delivery tracking ──────────────────────────────────────────────────────
function parseCampaignIdFromUrl(url) {
  try {
    return new URL(url, self.location.origin).searchParams.get('campaignid') || undefined;
  } catch { return undefined; }
}

// buttonInfo (optional): { action, title } for the specific action button that
// was clicked, when this report is for one — see notificationclick below.
function reportWebPushStatus(url, tracking, eventName, buttonInfo) {
  if (!tracking || !tracking.ingest_url || !tracking.write_key) return Promise.resolve();
  const campaignId = tracking.campaign_id || parseCampaignIdFromUrl(url);
  if (!campaignId || !tracking.anonymous_id) return Promise.resolve();
  return fetch(tracking.ingest_url.replace(/\/$/, '') + '/v1/webpush/status', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'x-write-key': tracking.write_key },
    body: JSON.stringify({
      client_id: tracking.client_id,
      campaign_id: campaignId,
      campaign_schedule_sequence_id: tracking.campaign_schedule_sequence_id,
      end_user_sequence_id: tracking.end_user_sequence_id,
      anonymous_id: tracking.anonymous_id,
      event: eventName,
      ...(buttonInfo ? { button_action: buttonInfo.action, button_title: buttonInfo.title } : {}),
    }),
  }).catch(() => {});
}

// ── Push received ──────────────────────────────────────────────────────────
self.addEventListener('push', (event) => {
  if (!event.data) return;
  let payload;
  try { payload = event.data.json(); }
  catch { payload = { title: event.data.text(), body: '' }; }

  const url            = payload.data?.url || '/';
  const title          = payload.title  || 'Notification';
  const body           = payload.body   || '';
  const tracking       = payload.data?.tracking || null;
  const storeInInbox   = payload.data?.store_in_inbox !== false;
  const notificationId = `${tracking?.campaign_id || 'n'}:${Date.now()}:${Math.random().toString(36).slice(2)}`;
  // Already sanitized/capped server-side (Campaign_Comms's channels/webpush/index.ts
  // sanitizeActions()) to {action, title, icon?, url?} — url is our own
  // extension (not part of the Notification API), read back in
  // notificationclick below via event.action, not passed to showNotification()
  // itself (the browser ignores unknown keys there, but keeping it out of
  // options.actions avoids relying on that).
  const actions = Array.isArray(payload.actions) ? payload.actions : [];

  const options = {
    body,
    icon:    payload.icon  || '/icons/icon-192.png',
    badge:   payload.badge || '/icons/badge-72.png',
    // Chromium-only (Chrome/Edge/Opera) — Firefox/Safari ignore this option
    // and render without an image regardless. See Campaign_Comms's
    // channels/webpush/index.ts, which sends this under the same `image` key.
    ...(payload.image ? { image: payload.image } : {}),
    // Same Chromium-only caveat as image — Firefox/Safari render the
    // notification with no buttons. Only action/title/icon matter to the
    // browser here; url (per-action destination) rides along in data
    // instead so notificationclick can look it up by event.action.
    ...(actions.length > 0 ? { actions: actions.map((a) => ({ action: a.action, title: a.title, icon: a.icon })) } : {}),
    data:    { url, tracking, notificationId, actions },
    vibrate: [200, 100, 200],
    requireInteraction: false,
  };

  event.waitUntil(Promise.all([
    self.registration.showNotification(title, options),
    reportWebPushStatus(url, tracking, 'delivered'),
    storeInInbox
      ? saveInboxNotification({ id: notificationId, title, body, url, image: payload.image, tracking, timestamp: Date.now() })
          .then(broadcastInboxChanged)
      : Promise.resolve(),
    pruneOldInboxNotifications().then(broadcastInboxChanged),
  ]));
});

// ── Notification click ─────────────────────────────────────────────────────
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  // event.action is the clicked button's action id, or '' when the
  // notification body itself was clicked (not a button). A button with its
  // own url navigates there; one without (or a body click) falls back to
  // the main target url.
  const clickedAction  = (event.notification.data?.actions || []).find((a) => a.action === event.action);
  const url            = clickedAction?.url || event.notification.data?.url || '/';
  const tracking       = event.notification.data?.tracking;
  const notificationId = event.notification.data?.notificationId;

  event.waitUntil(Promise.all([
    // clickedAction is undefined for a body click (event.action === '') —
    // reportWebPushStatus only sends button_action/button_title when it's set.
    reportWebPushStatus(url, tracking, 'clicked', clickedAction ? { action: clickedAction.action, title: clickedAction.title } : undefined),
    deleteInboxNotification(notificationId).then(broadcastInboxChanged),
    clients.matchAll({ type: 'window', includeUncontrolled: true }).then((wins) => {
      for (const w of wins) {
        if (w.url === url && 'focus' in w) return w.focus();
      }
      if (clients.openWindow) return clients.openWindow(url);
    }),
  ]));
});

// ── Notification dismissed ─────────────────────────────────────────────────
self.addEventListener('notificationclose', (event) => {
  const url      = event.notification.data?.url || '/';
  const tracking = event.notification.data?.tracking;
  // Inbox row intentionally kept — dismissed toast stays recoverable for 7 days.
  event.waitUntil(reportWebPushStatus(url, tracking, 'discarded'));
});

// ── Subscription rotation ──────────────────────────────────────────────────
self.addEventListener('pushsubscriptionchange', (event) => {
  event.waitUntil(
    self.registration.pushManager.subscribe({
      userVisibleOnly:      true,
      applicationServerKey: event.oldSubscription?.options?.applicationServerKey,
    }).then((sub) =>
      clients.matchAll({ type: 'window' }).then((wins) => {
        for (const w of wins)
          w.postMessage({ type: 'CAMPAIGN_SUBSCRIPTION_CHANGED', subscription: sub.toJSON() });
      })
    )
  );
});

// ── Install & activate ─────────────────────────────────────────────────────
self.addEventListener('install',  () => self.skipWaiting());
self.addEventListener('activate', (event) => event.waitUntil(
  Promise.all([
    clients.claim(),
    pruneOldInboxNotifications().then(broadcastInboxChanged),
    saveInboxNotification({ id: SW_ACTIVATION_MARKER_ID, timestamp: Date.now() }),
  ])
));

campaign('identify', 'user_123', { email: '[email protected]' });

<script async
  src="https://config.axilrate.com/sdk/campaign.min.js"
  data-write-key="cpk_..."
  data-webpush-prompt-audience="logged-in"
></script>

<script async
  src="https://config.axilrate.com/sdk/campaign.min.js"
  data-write-key="cpk_..."
  data-webpush-prompt="off"
></script>

<script async
  src="https://config.axilrate.com/sdk/campaign.min.js"
  data-write-key="cpk_..."
  data-capture="logged-in-only"
></script>

<script async
  src="https://config.axilrate.com/sdk/campaign.min.js"
  data-write-key="cpk_..."
  data-require-analytics-consent="true"
></script>
<script>
  // call when the visitor accepts (and again with 'denied' if they later withdraw)
  campaign('consent', { analytics: { status: 'granted', method: 'checkbox' } });
</script>