v1.5.0 Added notifications - Pytlick

skolehjem/public/serviceWorkerCachedWebpags.js

@@ -30,20 +30,20 @@ const assets = [
 
 // install event
 self.addEventListener('install', evt => {
-    //console.log('service worker installed');
+    console.log('service worker installed');
     evt.waitUntil(
         caches.open(staticCacheName).then((cache) => {
             //console.log('caching shell assets');
             return cache.addAll(assets);
         }).catch((r) => {
-            console.log("I dont workkkkk");
+            console.log("Install Fail");
         })
     );
 });
 
 // activate event
 self.addEventListener('activate', evt => {
-    //console.log('service worker activated');
+    console.log('service worker activated');
     evt.waitUntil(
         caches.keys().then(keys => {
             //console.log(keys);
@@ -53,29 +53,11 @@ self.addEventListener('activate', evt => {
             );
         })
     );
+
 });
 
-// fetch event
-/*
 self.addEventListener('fetch', evt => {
     console.log('fetch event');
-        evt.respondWith(
-            caches.match(evt.request).then(async function (cacheRes) {
-                return cacheRes || fetch(evt.request).then(fetchRes => {
-                    return caches.open(dynamicCacheName).then(cache => {
-                        cache.put(evt.request.url, fetchRes.clone()).then(r => {
-                            return fetchRes;
-                        });
-                    }).catch((r) => {
-                        console.log("I dont work");
-                    });
-                });
-            })
-        );
-});*/
-
-self.addEventListener('fetch', evt => {
-    console.log('fetch event', evt);
     evt.respondWith(
         caches.match(evt.request).then(cacheRes => {
             return cacheRes || fetch(evt.request).then(fetchRes => {
@@ -90,53 +72,19 @@ self.addEventListener('fetch', evt => {
     );
 });
 
-/*
-self.addEventListener('fetch', evt => {
-    console.log("ARGHHHH");
-
-    if(navigator.onLine) {
-        evt.respondWith(async function() {
-            return fetch(evt.request).then((fetchRes) => {
-                caches.open(dynamicCacheName).then(cache => {
-                    cache.put(evt.request.url, fetchRes.clone());
-                })
-            })
-        });
-    } else {
-        console.log('fetch event');
-        evt.respondWith(async function () {
-            let cachedResponse = await caches.match(evt.request);
-
-            if(cachedResponse) return cachedResponse;
-            else return caches.match("/offline.html");
-        });
+self.addEventListener('push', function(event) {
+    if (!(self.Notification && self.Notification.permission === 'granted')) {
+        //notifications aren't supported or permission not granted!
+        return;
     }
-});*/
 
-
-/*
-self.addEventListener('push', evt => {
-    const title = "Test Notification";
-    const body = "Det her et en demo på hvordan en notification kan se ud! ";
-    const icon = "/icons/browserFavIcon.svg"
-    const tag = "simple-push-example-tag";
-    evt.waitUntil(
-      self.registration.showNotification(title, {
-          body : body,
-          icon : icon,
-          tag : tag
-      })
-    );
+    if (event.data) {
+        let msg = event.data.json();
+        console.log(msg)
+        event.waitUntil(self.registration.showNotification(msg.title, {
+            body: msg.body,
+            icon: msg.icon,
+            actions: msg.actions
+        }));
+    }
 });
-
-
-
-function displayNotification(){
-    if(Notification.permission === 'granted'){
-        navigator.serviceWorker.getRegistration()
-            .then(function (reg){
-                reg.showNotification('Helloe ')
-            })
-    }
-}
-*/

skolehjem/public/serviceWorkerRegistration.js

@@ -1,22 +1,56 @@
 //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 has been: registered"))
+            .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 was:', permission)
+    console.log('Notification ', permission)
 });
 
 
@@ -25,4 +59,82 @@ if('caches' in window){
 }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)
+        });
+}