Web Push Notifications

register.js

var serviceWorkerRegistration;

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function () {
        serviceWorkerRegistration = registerServiceWorker();
    });
}

function registerServiceWorker() {
    return navigator.serviceWorker.register('service_worker.js')
        .then(function (registration) {
            console.log('Service worker successfully registered.');
            askPermission();
            return registration;
        })
        .catch(function (err) {
            console.error('Unable to register service worker.', err);
        });
}

function askPermission() {
    return new Promise(function (resolve, reject) {
            const permissionResult = Notification.requestPermission(function (result) {
                resolve(result);
            });

            if (permissionResult) {
                permissionResult.then(resolve, reject);
            }
        })
        .then(function (permissionResult) {
            if (permissionResult !== 'granted') {
                throw new Error('We weren\'t granted permission.');
            } else {
                subscribeUserToPush();
            }
        });
}

function subscribeUserToPush() {
    return serviceWorkerRegistration
        .then(function (registration) {
            const subscribeOptions = {
                userVisibleOnly: true,
                applicationServerKey: urlBase64ToUint8Array('BFTG0qcAZo1nFzwfsp1zIAX-YOw1PMG7Il2BnP7BebaCfdDGT21-G4prhzSuU5aW03i4mrYvkOF7yqLZmY8kYKk')
                // Generate public/private key from here https://web-push-codelab.appspot.com/
            };

            return registration.pushManager.subscribe(subscribeOptions);
        })
        .then(function (pushSubscription) {
            // TODO: Send pushSubscription to backend
            console.log('Received PushSubscription: ', JSON.stringify(pushSubscription));
            return pushSubscription;
        });
}

function urlBase64ToUint8Array(base64String) {
    const padding = '='.repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding)
        .replace(/\-/g, '+')
        .replace(/_/g, '/');
    const rawData = window.atob(base64);
    return Uint8Array.from([...rawData].map((char) => char.charCodeAt(0)));
}

service_worker.js

self.addEventListener('push', function (event) {
    if (event.data) {
        console.log('This push event has data: ', event.data.text());
        const promiseChain = self.registration.showNotification(event.data.text());
        event.waitUntil(promiseChain);
    } else {
        console.log('This push event has no data.');
    }
});