//Service Worker Registration let isSubscribed = false; let swRegistration = null; const applicationServerPublicKey = 'BHTLd76Yura3OIkZ52f4qh3G_i8RY3kvyOooVJXFVGle04JNW4d3JvwYQJ1JOZ9Y_uuZFsB_URqrlHQFhQ01V6M'; /* Make sure that we support service worker :) */ if('serviceWorker' in navigator){ window.addEventListener('load', () => { navigator.serviceWorker .register('/serviceWorkerCachedWebpags.js') .then(reg => { console.log("Service Worker registered") swRegistration = reg; var serviceworker; if (reg.installing) serviceworker = reg.installing; else if (reg.waiting) serviceworker = reg.waiting; else if (reg.active) serviceworker = reg.active; initializeUI(); if (serviceworker) { console.log("sw current state", serviceworker.state); if (serviceworker.state == "activated") { subscribeUser(); } else { serviceworker.addEventListener("statechange", function (e) { console.log("service worker statechange: ", e.target.state); if (e.target.state == "activated") { subscribeUser(reg); initializeUI(); } }); } } }) .catch(err => console.log(`Service Worker error: ${err}`)) }); } Notification.requestPermission().then(function(permission){ console.log('Notification ', permission) }); if('caches' in window){ console.log("The browser supports caching ") }else { console.log("This browser is some junk, it dosen't support caching :(") } //Push Notifications const urlB64ToUint8Array = base64String => { const padding = '='.repeat((4 - (base64String.length % 4)) % 4) const base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/') const rawData = atob(base64) const outputArray = new Uint8Array(rawData.length) for (let i = 0; i < rawData.length; ++i) { outputArray[i] = rawData.charCodeAt(i) } return outputArray } function subscribeUser(reg) { const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: applicationServerKey }) .then(function(subscription) { console.log('User is subscribed.'); updateSubscriptionOnServer(subscription); isSubscribed = true; }) .catch(function(err) { console.log('Failed to subscribe the user: ', err); }); } function updateSubscriptionOnServer(subscription) { storePushSubscription(subscription); console.log(JSON.stringify(subscription)); } function initializeUI() { // Set the initial subscription value swRegistration.pushManager.getSubscription() .then(function(subscription) { isSubscribed = !(subscription === null); if (isSubscribed) { console.log('User IS subscribed.'); } else { console.log('User is NOT subscribed.'); } }); } function storePushSubscription(pushSubscription) { const token = document.querySelector('meta[name=csrf-token]').getAttribute('content'); fetch('/push', { method: 'POST', body: JSON.stringify(pushSubscription), headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'X-CSRF-Token': token } }) .then((res) => { return res.json(); }) .then((res) => { console.log(res) }) .catch((err) => { console.log(err) }); }