Push Notification Tracking

self.addEventListener('message', (event) => {
  const msg = event.data || {}
  if (msg.type === 'SDK_CONFIG') {
    if (msg.apiKey) WRITE_KEY = msg.apiKey
    if (msg.apiBase) {
      ZIXFLOW_API = String(msg.apiBase).replace(/\/$/, '') + '/track'
    }
  }
  if (msg.type === 'SET_USER_ID') {
    self.__ZIXFLOW_USER_ID__ = msg.userId || null
  }
  if (msg.type === 'SET_WRITE_KEY' && msg.writeKey) {
    WRITE_KEY = msg.writeKey
  }
})

function trackEvent(eventName, properties) {
  if (!WRITE_KEY) return Promise.resolve()
  return fetch(ZIXFLOW_API, {
    method: 'POST',
    keepalive: true,
    headers: {
      'Content-Type': 'application/json',
      Authorization: 'Basic ' + btoa(WRITE_KEY + ':'),
    },
    body: JSON.stringify({
      event: eventName,
      userId: self.__ZIXFLOW_USER_ID__,
      properties,
    }),
  }).catch(() => {})
}

const buttons = parseActionButtons(data.action_buttons) // { action, title } for Notification API
// For name/deeplink later, keep parseActionButtonsRaw separately

self.addEventListener('notificationclick', (event) => {
  const data = event.notification.data || {}
  const deliveryId = data['Zixflow-Delivery-ID'] || ''
  const token = data['Zixflow-Delivery-Token'] || ''
  const action = event.action || ''

  event.notification.close()

  const trackPromises = []
  if (deliveryId && token) {
    trackPromises.push(
      trackEvent('Push Notification Opened', {
        'Zixflow-Delivery-ID': deliveryId,
        'Zixflow-Delivery-Token': token,
      })
    )
  }

  let deeplink = data.deeplink_url || data.url || '/'

  if (action) {
    const actionIndex = parseInt(String(action).replace(/\D/g, ''), 10) || 0
    const rawButtons = parseActionButtonsRaw(data.action_buttons)
    const clicked = rawButtons[actionIndex] || {}
    const actionName = clicked.name || ''
    const actionDeeplink = clicked.deeplink || ''

    if (deliveryId && token) {
      trackPromises.push(
        trackEvent('Push Notification Action Clicked', {
          'Zixflow-Delivery-ID': deliveryId,
          'Zixflow-Delivery-Token': token,
          action_index: actionIndex,
          action_name: actionName,
          action_deeplink: actionDeeplink,
          source: 'web_push',
        })
      )
    }
    if (actionDeeplink) deeplink = actionDeeplink
  }

  event.waitUntil(
    Promise.all(trackPromises).then(() =>
      self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clientList) => {
        for (const c of clientList) {
          if (c.url.indexOf(self.location.origin) === 0 && 'focus' in c) {
            c.postMessage({ type: 'NOTIFICATION_CLICK', action, data, url: deeplink })
            return c.focus()
          }
        }
        return self.clients.openWindow(deeplink)
      })
    )
  )
})

function parseActionButtonsRaw(raw) {
  if (!raw) return []
  try {
    return typeof raw === 'string' ? JSON.parse(raw) : raw
  } catch {
    return []
  }
}

function parseActionButtons(raw) {
  return parseActionButtonsRaw(raw)
    .slice(0, 2)
    .map((btn, i) => ({
      action: `ACTION_${i}`,
      title: (btn && btn.name) || `Action ${i + 1}`,
    }))
}

navigator.serviceWorker.controller?.postMessage({
  type: 'SET_USER_ID',
  userId: 'user@example.com',
})

push → Delivered + showNotification(actions from action_buttons)
notificationclick
├── Opened
└── if event.action → Action Clicked (use raw buttons for name/deeplink)
    → focus client / openWindow