rosterchirp-dev/frontend/public/sw.js

// ── Firebase Messaging (background push for Android PWA) ──────────────────────
// Config must be hardcoded here — the SW is woken by push events before any
// async fetch can resolve, so Firebase must be initialised synchronously.
importScripts('https://www.gstatic.com/firebasejs/10.14.1/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.14.1/firebase-messaging-compat.js');

const FIREBASE_CONFIG = {
  apiKey:            "AIzaSyDx191unzXFT4WA1OvkdbrIY_c57kgruAU",
  authDomain:        "rosterchirp-push.firebaseapp.com",
  projectId:         "rosterchirp-push",
  storageBucket:     "rosterchirp-push.firebasestorage.app",
  messagingSenderId: "126479377334",
  appId:             "1:126479377334:web:280abdd135cf7e0c50d717"
};

// Initialise Firebase synchronously so the push listener is ready immediately
let messaging = null;
if (FIREBASE_CONFIG.apiKey !== '__FIREBASE_API_KEY__') {
  firebase.initializeApp(FIREBASE_CONFIG);
  messaging = firebase.messaging();
  console.log('[SW] Firebase initialised');
}

// ── Cache ─────────────────────────────────────────────────────────────────────
const CACHE_NAME = 'rosterchirp-v1';
const STATIC_ASSETS = ['/'];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => cache.addAll(STATIC_ASSETS))
  );
  self.skipWaiting();
});

self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((keys) =>
      Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k)))
    )
  );
  self.clients.claim();
});

self.addEventListener('fetch', (event) => {
  const url = event.request.url;

  // Only intercept same-origin requests — never intercept cross-origin calls
  // (Firebase API, Google CDN, socket.io CDN, etc.) or specific local paths.
  // Intercepting cross-origin requests causes Firebase SDK calls to return
  // cached HTML, producing "unsupported MIME type" errors and breaking FCM.
  if (!url.startsWith(self.location.origin)) return;
  if (url.includes('/api/') || url.includes('/socket.io/') || url.includes('/manifest.json')) return;

  event.respondWith(
    fetch(event.request).catch(() => caches.match(event.request))
  );
});

// ── Badge counter ─────────────────────────────────────────────────────────────
let badgeCount = 0;

function showRosterChirpNotification(data) {
  console.log('[SW] showRosterChirpNotification:', JSON.stringify(data));
  badgeCount++;
  if (self.navigator?.setAppBadge) self.navigator.setAppBadge(badgeCount).catch(() => {});

  return self.registration.showNotification(data.title || 'New Message', {
    body:    data.body || '',
    icon:    '/icons/icon-192.png',
    badge:   '/icons/icon-192-maskable.png',
    data:    { url: data.url || '/' },
    tag:     data.groupId ? `rosterchirp-group-${data.groupId}` : 'rosterchirp-message',
    renotify: true,
    vibrate:  [200, 100, 200],
  });
}

// ── FCM background messages ───────────────────────────────────────────────────
// Server sends notification+data messages (mirrors the working fcm-app pattern).
// payload.notification carries title/body; payload.data carries url/groupId.
// Fallback to payload.data.title/body supports any older data-only messages still
// in-flight during a deployment transition.
if (messaging) {
  messaging.onBackgroundMessage((payload) => {
    console.log('[SW] onBackgroundMessage received:', JSON.stringify({ notification: payload.notification, data: payload.data }));
    const n    = payload.notification || {};
    const d    = payload.data         || {};
    return showRosterChirpNotification({
      title:   n.title   || d.title   || 'New Message',
      body:    n.body    || d.body    || '',
      url:     d.url     || '/',
      groupId: d.groupId || '',
    });
  });
} else {
  console.warn('[SW] Firebase messaging not initialised — push notifications disabled');
}

// ── Raw push event (fallback for Android) ─────────────────────────────────────
// Only runs when Firebase messaging is NOT yet initialised (e.g. push arrives
// before firebaseConfigPromise resolves). If Firebase IS ready it already has
// its own push listener registered and will call onBackgroundMessage — running
// this handler too would show the notification twice.
self.addEventListener('push', (event) => {
  console.log('[SW] push event received, hasData:', !!event.data, 'messaging ready:', !!messaging);

  // Firebase compat SDK handles it via onBackgroundMessage — skip to avoid double notification.
  if (messaging) return;

  if (!event.data) return;

  event.waitUntil((async () => {
    try {
      const data = event.data.json();
      console.log('[SW] Push fallback — data parsed:', JSON.stringify(data));
      if (data.data || (data.title && data.body)) {
        await showRosterChirpNotification(data.data || data);
      }
    } catch (e) {
      console.warn('[SW] Push fallback — failed to parse push data:', e);
      const text = event.data.text();
      if (text) {
        await self.registration.showNotification('RosterChirp', {
          body:  text.slice(0, 100),
          icon:  '/icons/icon-192.png',
          badge: '/icons/icon-192-maskable.png',
          tag:   'rosterchirp-fallback',
        });
      }
    }
  })());
});

// ── Notification click ────────────────────────────────────────────────────────
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  badgeCount = 0;
  if (self.navigator?.clearAppBadge) self.navigator.clearAppBadge().catch(() => {});
  event.waitUntil(
    clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clientList) => {
      const url = event.notification.data?.url || '/';
      for (const client of clientList) {
        if (client.url.includes(self.location.origin) && 'focus' in client) {
          client.focus();
          return;
        }
      }
      return clients.openWindow(url);
    })
  );
});

// ── Badge control messages from main thread ───────────────────────────────────
self.addEventListener('message', (event) => {
  if (event.data?.type === 'CLEAR_BADGE') {
    badgeCount = 0;
    if (self.navigator?.clearAppBadge) self.navigator.clearAppBadge().catch(() => {});
  }
  if (event.data?.type === 'SET_BADGE') {
    badgeCount = event.data.count || 0;
    if (self.navigator?.setAppBadge) {
      if (badgeCount > 0) {
        self.navigator.setAppBadge(badgeCount).catch(() => {});
      } else {
        self.navigator.clearAppBadge().catch(() => {});
      }
    }
  }
});