Web Push Notifications

npm install @zixflow/analytics-browser@^1.1.5

// public/sw.js — prefer the full SDK worker for automatic tracking beacons

self.addEventListener('install', (event) => {
  self.skipWaiting()
})

self.addEventListener('activate', (event) => {
  event.waitUntil(self.clients.claim())
})

self.addEventListener('push', (event) => {
  if (!event.data) return

  let data
  try {
    data = event.data.json()
  } catch (e) {
    return
  }

  const title = data.title || 'Notification'
  const options = {
    body: data.body || '',
    icon: data.icon || '/icon.png',
    badge: data.badge || '/badge.png',
    image: data.image,
    data: data,
    tag: data.tag || 'zixflow-push',
    requireInteraction: data.requireInteraction || false,
    actions: data.actions || []
  }

  event.waitUntil(self.registration.showNotification(title, options))
})

self.addEventListener('notificationclick', (event) => {
  event.notification.close()

  const clickedUrl = event.action
    ? event.notification.data.actions?.[event.action]?.url
    : event.notification.data.url || '/'

  event.waitUntil(
    clients.openWindow(clickedUrl).then((windowClient) => {
      if (windowClient) windowClient.focus()
    })
  )
})

import {
  AnalyticsBrowser,
  subscribeToPush,
  unsubscribeFromPush,
} from '@zixflow/analytics-browser'

const analytics = AnalyticsBrowser.load(
  { writeKey: 'YOUR_WRITE_KEY' },
  {
    webPush: {
      enabled: true,
      swUrl: '/sw.js',
      autoSubscribe: false,
      // apiHost defaults to 'cdp.zixflow.com/v1'
      onNotificationClick: (url, action, data) => {
        console.log('Notification clicked:', url, action, data)
        window.location.href = url
      }
    }
  }
)

import { AnalyticsBrowser, WebPushPlugin } from '@zixflow/analytics-browser'

const analytics = AnalyticsBrowser.load({ writeKey: 'YOUR_WRITE_KEY' })
await analytics.register(
  WebPushPlugin({
    swUrl: '/sw.js',
    autoSubscribe: false,
  })
)

document.getElementById('subscribe-btn').addEventListener('click', async () => {
  try {
    await subscribeToPush(analytics)
    console.log('Push notifications enabled')
  } catch (err) {
    console.error('Failed to enable push notifications:', err)
  }
})

analytics.identify('user@example.com', {
  email: 'user@example.com',
  first_name: 'John'
})

import { subscribeToPush } from '@zixflow/analytics-browser'

await subscribeToPush(analytics)
// optional overrides: { apiHost, protocol, swUrl }

import { unsubscribeFromPush } from '@zixflow/analytics-browser'

await unsubscribeFromPush(analytics)

if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('/sw.js')
    .then((reg) => console.log('SW registered:', reg))
    .catch((err) => console.error('SW registration failed:', err))
}