Web Push Notifications

npm install @zixflow/analytics-browser

// Service Worker for Zixflow Web Push Notifications

self.addEventListener('install', (event) => {
  console.log('[SW] Installing service worker')
  self.skipWaiting()
})

self.addEventListener('activate', (event) => {
  console.log('[SW] Activating service worker')
  event.waitUntil(self.clients.claim())
})

self.addEventListener('push', (event) => {
  console.log('[SW] Push event received')

  if (!event.data) {
    console.warn('[SW] Push event has no data')
    return
  }

  let data
  try {
    data = event.data.json()
  } catch (e) {
    console.error('[SW] Failed to parse push data:', 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) => {
  console.log('[SW] Notification clicked:', event.action)

  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 } from '@zixflow/analytics-browser'

// Initialize analytics with web push
const analytics = AnalyticsBrowser.load({
  apiKey: 'YOUR_API_KEY',
  plugins: [
    {
      name: 'WebPush',
      settings: {
        apiHost: 'api-events.zixflow.com/v1',  // Optional
        protocol: 'https',                      // Optional
        swUrl: '/sw.js',                 // Path to service worker
        autoSubscribe: false,            // Don't auto-request permission
        onNotificationClick: (url, action, data) => {
          // Handle notification clicks when app is open
          console.log('Notification clicked:', url, action, data)
          // Navigate to URL or perform action
          window.location.href = url
        }
      }
    }
  ]
})

// HTML
<button id="subscribe-btn">Enable Notifications</button>

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

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

// The push subscription is automatically linked to the user

// Request permission and subscribe
await analytics.plugins.WebPush.subscribeToPush()

// Unsubscribe from push notifications
await analytics.plugins.WebPush.unsubscribeFromPush()

// Check if user is subscribed
const subscription = await analytics.plugins.WebPush.getSubscription()
console.log('Subscription:', subscription)

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