Push Notifications — Re-Engaging Users with Server Updates

// In your page JavaScript
async function subscribeToPush() {
    if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
        console.log('Push notifications not supported');
        return null;
    }

    try {
        const registration = await navigator.serviceWorker.register('/sw.js');
        const subscription = await registration.pushManager.subscribe({
            userVisibleOnly: true,
            applicationServerKey: urlBase64ToUint8Array(
                'BEl62iUYgUivxIkv69yViEuiBIa-Ib9SmkvMl3fA94MtBwM5mPwVvM9AA'
            )
        });

        console.log('Push subscription:', JSON.stringify(subscription));
        return subscription;
    } catch (error) {
        console.error('Push subscription failed:', error);
        throw error;
    }
}

// Helper: Convert VAPID key
function urlBase64ToUint8Array(base64String) {
    const padding = '='.repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding)
        .replace(/\-/g, '+')
        .replace(/_/g, '/');

    const rawData = window.atob(base64);
    const outputArray = new Uint8Array(rawData.length);

    for (let i = 0; i < rawData.length; i++) {
        outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
}

// sw.js — Handle push events
self.addEventListener('push', event => {
    console.log('Push received:', event);

    let data = {
        title: 'Default Title',
        body: 'You have a new notification',
        icon: '/icons/icon-192.png',
        badge: '/icons/badge.png',
        url: '/'
    };

    // Parse the push data
    if (event.data) {
        try {
            const payload = event.data.json();
            data = { ...data, ...payload };
            console.log('Push data:', payload);
        } catch (e) {
            console.log('Push data is text:', event.data.text());
            data.body = event.data.text();
        }
    }

    // Show the notification
    event.waitUntil(
        self.registration.showNotification(data.title, {
            body: data.body,
            icon: data.icon,
            badge: data.badge,
            data: {
                url: data.url,
                timestamp: Date.now()
            },
            actions: [
                { action: 'open', title: 'Open' },
                { action: 'dismiss', title: 'Dismiss' }
            ],
            vibrate: [200, 100, 200],
            requireInteraction: true
        })
    );
});

// Handle notification click
self.addEventListener('notificationclick', event => {
    console.log('Notification clicked:', event.action);

    event.notification.close();

    if (event.action === 'dismiss') return;

    // Open or focus the app
    const urlToOpen = event.notification.data.url || '/';

    event.waitUntil(
        clients.matchAll({ type: 'window', includeUncontrolled: true })
            .then(windowClients => {
                // If app is already open, focus it
                for (const client of windowClients) {
                    if (client.url === urlToOpen && 'focus' in client) {
                        return client.focus();
                    }
                }
                // Otherwise open new window
                if (clients.openWindow) {
                    return clients.openWindow(urlToOpen);
                }
            })
    );
});

// server.js — Send push notifications
const webpush = require('web-push');

// VAPID keys (generate once)
const vapidKeys = {
    publicKey: 'BEl62iUYgUivxIkv69yViEuiBIa-Ib9SmkvMl3fA94MtBwM5mPwVvM9AA',
    privateKey: 'YOUR_PRIVATE_KEY_HERE'
};

webpush.setVapidDetails(
    'mailto:admin@example.com',
    vapidKeys.publicKey,
    vapidKeys.privateKey
);

// Send notification to a subscriber
function sendNotification(subscription, payload) {
    webpush.sendNotification(subscription, JSON.stringify(payload))
        .then(result => {
            console.log('Notification sent:', result.statusCode);
        })
        .catch(error => {
            console.error('Send failed:', error);

            // 410 Gone: subscription expired
            if (error.statusCode === 410) {
                console.log('Removing expired subscription');
                removeSubscriptionFromDB(subscription.endpoint);
            }
        });
}

// Example: notify about new article
const subscription = {
    endpoint: 'https://fcm.googleapis.com/...',
    keys: {
        auth: '...',
        pkey: '...'
    }
};

sendNotification(subscription, {
    title: 'New Article Published',
    body: 'Check out our latest guide on PWAs',
    icon: '/icons/icon-192.png',
    badge: '/icons/badge.png',
    url: '/articles/pwa-guide',
    tag: 'new-article'
});

// Check if already subscribed
async function checkSubscription() {
    const registration = await navigator.serviceWorker.ready;
    const subscription = await registration.pushManager.getSubscription();

    if (subscription) {
        console.log('Already subscribed:', subscription.endpoint);
        return subscription;
    }

    console.log('Not subscribed');
    return null;
}

// Unsubscribe
async function unsubscribe() {
    const registration = await navigator.serviceWorker.ready;
    const subscription = await registration.pushManager.getSubscription();

    if (subscription) {
        const success = await subscription.unsubscribe();
        if (success) {
            console.log('Unsubscribed successfully');
            // Notify server
            await fetch('/api/unsubscribe', {
                method: 'POST',
                body: JSON.stringify({ endpoint: subscription.endpoint }),
                headers: { 'Content-Type': 'application/json' }
            });
        }
    }
}