twilio-wp-plugin/assets/js/twp-service-worker.js

/**
 * Twilio WP Plugin Service Worker
 * Handles background notifications for incoming calls
 */

self.addEventListener('install', function(event) {
    console.log('TWP Service Worker: Installing...');
    self.skipWaiting();
});

self.addEventListener('activate', function(event) {
    console.log('TWP Service Worker: Activated');
    event.waitUntil(clients.claim());
});

// Handle notification clicks
self.addEventListener('notificationclick', function(event) {
    console.log('TWP Service Worker: Notification clicked');
    event.notification.close();
    
    // Focus the window if it's already open, otherwise open a new one
    event.waitUntil(
        clients.matchAll({
            type: 'window',
            includeUncontrolled: true
        }).then(function(clientList) {
            // Check if there's already a window/tab open
            for (let i = 0; i < clientList.length; i++) {
                const client = clientList[i];
                if (client.url.includes('/browser-phone') && 'focus' in client) {
                    return client.focus();
                }
            }
            // If not, open a new window
            if (clients.openWindow) {
                return clients.openWindow('/browser-phone');
            }
        })
    );
});

// Handle push events (for future use with push notifications)
self.addEventListener('push', function(event) {
    console.log('TWP Service Worker: Push event received');
    
    let data = {};
    if (event.data) {
        try {
            data = event.data.json();
        } catch (e) {
            data = {
                title: 'New Call Alert',
                body: event.data.text()
            };
        }
    }
    
    const options = {
        body: data.body || 'You have a new call waiting',
        icon: data.icon || '/wp-content/plugins/twilio-wp-plugin/assets/images/phone-icon.png',
        badge: '/wp-content/plugins/twilio-wp-plugin/assets/images/phone-badge.png',
        vibrate: [300, 200, 300],
        tag: data.tag || 'twp-notification',
        requireInteraction: true,
        data: data.data || {}
    };
    
    event.waitUntil(
        self.registration.showNotification(data.title || 'Incoming Call', options)
    );
});

// Handle messages from the main script
self.addEventListener('message', function(event) {
    console.log('TWP Service Worker: Message received', event.data);

    if (event.data && event.data.type === 'SHOW_NOTIFICATION') {
        const options = {
            body: event.data.body || 'You have a new call waiting',
            icon: event.data.icon || '/wp-content/plugins/twilio-wp-plugin/assets/images/phone-icon.png',
            badge: '/wp-content/plugins/twilio-wp-plugin/assets/images/phone-badge.png',
            vibrate: [300, 200, 300, 200, 300],
            tag: event.data.tag || 'incoming-call',
            requireInteraction: event.data.requireInteraction !== undefined ? event.data.requireInteraction : true,
            data: event.data.data || {}
        };

        console.log('TWP Service Worker: Showing notification', event.data.title, options);

        event.waitUntil(
            self.registration.showNotification(event.data.title || 'Incoming Call', options)
        );
    }
});