Push Messages #1

app/templates/js/script.js

@@ -1,10 +1,37 @@
 var pending = false;
 
+var firebaseConfig = {
+    apiKey: "AIzaSyBFZjXvnCMpGurSWEuVgHkE9jD9jxGJhx8",
+    authDomain: "test-push-notf.firebaseapp.com",
+    databaseURL: "https://test-push-notf.firebaseio.com",
+    projectId: "test-push-notf",
+    storageBucket: "",
+    messagingSenderId: "93473765978",
+    appId: "1:93473765978:web:5d959a487fe5382480f663"
+};
+firebase.initializeApp(firebaseConfig);
+
+const messaging = firebase.messaging();
 if ('serviceWorker' in navigator) {
     window.addEventListener('load', () => {
         navigator.serviceWorker.register('serviceWorker.js')
         .then(registration => {
             console.log('Service Worker is registered', registration);
+            messaging.useServiceWorker(registration);
+            messaging.usePublicVapidKey('BDYQ7X7J7PX0aOFNqB-CivQeqLq4-SqCxQJlDfJ6yNnQeYRoK8H2KOqxHRh47fLrbUhC8O3tve67MqJAIqox7Ng');
+            messaging.requestPermission().then(function () {
+                console.log("Notification permission granted.");
+                return messaging.getToken()
+            })
+            .then(function(token) {
+                console.log("token is : " + token);
+            })
+            .catch(function (err) {
+                console.log("Unable to get permission to notify.", err);
+            });
+            messaging.onMessage(function(payload) {
+                console.log("Message received. ", payload);
+            });
         })
         .catch(err => {
             console.error('Registration failed:', err);
@@ -191,7 +218,7 @@ $( '[name="room"]' ).change(function (e) {
         });
     }
 });
-
+/*
 var windowLoc = $(location).attr('pathname');
 windowLoc = windowLoc.substring(windowLoc.lastIndexOf("/"));
 console.log();
@@ -227,7 +254,7 @@ if (windowLoc == "/") {
 });
 }
 },4000);
-}
+}*/
 
 
 //Graphs
@@ -235,6 +262,7 @@ $('.graph-period').on('click', function (e) {
     var subId = $(this).attr('data-sub-device-id');
     var period = $(this).attr('data-period');
     var groupBy = $(this).attr('data-group');
+    
     ajaxChart(subId, period, groupBy);
 });
 

app/templates/part/footer.phtml

@@ -1,3 +1,5 @@
 <script src="./app/templates/js/jquery.js"></script>
-<script src="./app/templates/js/post.js"></script>
+<script src="https://www.gstatic.com/firebasejs/7.1.0/firebase-app.js"></script>
+<script src="https://www.gstatic.com/firebasejs/7.1.0/firebase-messaging.js"></script>
 <script src="./app/templates/js/script.js"></script>
+<script src="./app/templates/js/post.js"></script>

serviceWorker.js

@@ -1,3 +1,6 @@
+importScripts('https://www.gstatic.com/firebasejs/7.1.0/firebase-app.js');
+importScripts('https://www.gstatic.com/firebasejs/7.1.0/firebase-messaging.js');
+
 /**
 * Cache version, change name to force reload
 */
@@ -22,37 +25,31 @@ var CACHE_FILES  = [
     'assets/logo.svg'
 ];
 
-/**
-* Service worker 'install' event.
-* If all the files are successfully cached, then the service worker will be installed.
-* If any of the files fail to download, then the install step will fail.
-*/
 this.addEventListener('install', function(event) {
-    console.log('Install');
 });
 
-/**
-* After a service worker is installed and the user navigates to a different page or refreshes,
-* the service worker will begin to receive fetch events.
-*
-* Network-first approach: if online, request is fetched from network and not from cache
-*/
 
 self.addEventListener('push', function(event) {  
     console.log('Received a push message', event);
+    if (!firebase.apps.length) {
+        firebase.initializeApp({
+        'messagingSenderId': '93473765978'
+    });
+}
     
-    var title = 'Notification';  
-    var body = 'There is newly updated content available on the site. Click to see more.';  
-    var icon = 'https://raw.githubusercontent.com/deanhume/typography/gh-pages/icons/typography.png';  
-    var tag = 'simple-push-demo-notification-tag';
+    const messaging = firebase.messaging();
+    messaging.setBackgroundMessageHandler(function(payload) {
+        console.log('[firebase-messaging-sw.js] Received background message ', payload);
+        // Customize notification here
+        const notificationTitle = 'Background Message Title';
+        const notificationOptions = {
+            body: 'Background Message body.',
+            icon: '/itwonders-web-logo.png'
+        };
         
-    event.waitUntil(  
-        self.registration.showNotification(title, {  
-            body: body,  
-            icon: icon,  
-            tag: tag  
-        })  
-    );  
+        return self.registration.showNotification(notificationTitle,
+            notificationOptions);
+        });
     });
     
     self.addEventListener('sync', function(event) {
@@ -75,4 +72,8 @@ self.addEventListener('notificationclick', function(e) {
         
     });
     
+    // Initialize the Firebase app in the service worker by passing in the
+    // messagingSenderId.
+    
+