Advanced Service Worker Features: Push Beyond the Basics

// service-worker.js
self.addEventListener('push', function(event) {
  console.log('Push event received:', event);
  
  // Extract data from push payload
  const data = event.data ? event.data.json() : {};
  const title = data.title || 'Default Notification Title';
  const options = {
    body: data.body || 'You have a new message!',
    icon: '/icons/notification-icon.png',
    badge: '/icons/badge.png',
    tag: data.tag || 'default-tag',
    requireInteraction: true,
    actions: [
      {
        action: 'view',
        title: 'View Details',
        icon: '/icons/view-icon.png'
      },
      {
        action: 'dismiss',
        title: 'Dismiss'
      }
    ],
    data: {
      url: data.url || '/',
      timestamp: Date.now()
    }
  };

  // Display the notification
  event.waitUntil(
    self.registration.showNotification(title, options)
  );
});

// Handle notification click events
self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  
  if (event.action === 'view') {
    // Open the app and navigate to specific URL
    event.waitUntil(
      clients.openWindow(event.notification.data.url)
    );
  } else if (event.action === 'dismiss') {
    // Just close the notification
    return;
  } else {
    // Default click behavior
    event.waitUntil(
      clients.matchAll().then(function(clientList) {
        if (clientList.length > 0) {
          return clientList[0].focus();
        }
        return clients.openWindow('/');
      })
    );
  }
});

// Register background sync in your main app
navigator.serviceWorker.ready.then(function(registration) {
  return registration.sync.register('background-sync-tag');
});

// Handle sync events in service worker
self.addEventListener('sync', function(event) {
  console.log('Background sync triggered:', event.tag);
  
  if (event.tag === 'background-sync-tag') {
    event.waitUntil(
      processQueuedRequests()
    );
  }
});

async function processQueuedRequests() {
  // Retrieve queued requests from IndexedDB
  const queuedRequests = await getQueuedRequests();
  
  for (const request of queuedRequests) {
    try {
      const response = await fetch(request.url, {
        method: request.method,
        headers: request.headers,
        body: request.body
      });
      
      if (response.ok) {
        // Remove successful request from queue
        await removeFromQueue(request.id);
        console.log('Successfully synced request:', request.id);
      }
    } catch (error) {
      console.log('Sync failed for request:', request.id, error);
      // Request will remain in queue for next sync attempt
    }
  }
}

// Traditional approach with importScripts
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js');
importScripts('/js/utils.js');
importScripts('/js/cache-strategies.js');

// Modern ES6 module approach
import { precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst } from 'workbox-strategies';
import { customCacheStrategy } from '/js/cache-strategies.js';

// Clean, modular code organization
precacheAndRoute(self.__WB_MANIFEST);
cleanupOutdatedCaches();

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images-cache'
  })
);

// Performance-optimized caching with metrics
self.addEventListener('fetch', function(event) {
  const startTime = Date.now();
  
  event.respondWith(
    caches.match(event.request).then(function(cachedResponse) {
      if (cachedResponse) {
        // Log cache hit metrics
        logPerformanceMetric('cache-hit', Date.now() - startTime);
        return cachedResponse;
      }
      
      // Network fallback with performance tracking
      return fetch(event.request).then(function(response) {
        const endTime = Date.now();
        logPerformanceMetric('network-fetch', endTime - startTime);
        
        // Cache successful responses
        if (response.status === 200) {
          const responseClone = response.clone();
          caches.open('dynamic-cache').then(function(cache) {
            cache.put(event.request, responseClone);
          });
        }
        
        return response;
      });
    })
  );
});

function logPerformanceMetric(type, duration) {
  // Send metrics to analytics service
  self.registration.sync.register(`perf-${type}-${duration}`);
}