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,43 +218,43 @@ $( '[name="room"]' ).change(function (e) {
         });
     }
 });
-
+/*
 var windowLoc = $(location).attr('pathname');
 windowLoc = windowLoc.substring(windowLoc.lastIndexOf("/"));
 console.log();
 if (windowLoc == "/") {
-    var autoUpdate = setInterval(function(){
+var autoUpdate = setInterval(function(){
-        if (pending == false) {
+if (pending == false) {
-            pending = true;
+pending = true;
-            $.ajax({
+$.ajax({
-                url: 'ajax',
+url: 'ajax',
-                type: 'POST',
+type: 'POST',
-                dataType: 'json',
+dataType: 'json',
-                data: {
+data: {
-                    "action": 'getState'
+"action": 'getState'
-                },
+},
-                success: function(data){
+success: function(data){
-                    console.log(data);
+console.log(data);
-                    for (const key in data) {
+for (const key in data) {
-                        if (data.hasOwnProperty(key)) {
+if (data.hasOwnProperty(key)) {
-                            const device = data[key];
+const device = data[key];
-                            $('[data-sub-device-id="'+key+'"]')
+$('[data-sub-device-id="'+key+'"]')
-                            .find('.device-button-value')
+.find('.device-button-value')
-                            .text(device['value'])
+.text(device['value'])
-                            .attr('title',device['time'])
+.attr('title',device['time'])
-                        }
-                    }
-                },
-                error: function (request, status, error) {
-                    console.log("ERROR ajaxChart():", request, error);
-                },
-                complete: function (){
-                    pending = false;
-                }
-            });
-        }
-    },4000);
 }
+}
+},
+error: function (request, status, error) {
+console.log("ERROR ajaxChart():", request, error);
+},
+complete: function (){
+pending = false;
+}
+});
+}
+},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,57 +25,55 @@ 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';  
+    const messaging = firebase.messaging();
-    var body = 'There is newly updated content available on the site. Click to see more.';  
+    messaging.setBackgroundMessageHandler(function(payload) {
-    var icon = 'https://raw.githubusercontent.com/deanhume/typography/gh-pages/icons/typography.png';  
+        console.log('[firebase-messaging-sw.js] Received background message ', payload);
-    var tag = 'simple-push-demo-notification-tag';
+        // Customize notification here
+        const notificationTitle = 'Background Message Title';
+        const notificationOptions = {
+            body: 'Background Message body.',
+            icon: '/itwonders-web-logo.png'
+        };
+        
+        return self.registration.showNotification(notificationTitle,
+            notificationOptions);
+        });
+    });
     
-    event.waitUntil(  
+    self.addEventListener('sync', function(event) {
-        self.registration.showNotification(title, {  
+        console.info('Event: Sync');
-            body: body,  
+        
-            icon: icon,  
+    });
-            tag: tag  
-        })  
-    );  
-});
-
-self.addEventListener('sync', function(event) {
-    console.info('Event: Sync');
     
-});
+    self.addEventListener('fetch', function (event) {
-
+        
-self.addEventListener('fetch', function (event) {
+    });
+    
+    self.addEventListener("online", function (event) {
+        
+    });
+    
+    self.addEventListener("offline", function (event) {
+    });
+    
+    self.addEventListener('notificationclick', function(e) {
+        
+    });
+    
+    // Initialize the Firebase app in the service worker by passing in the
+    // messagingSenderId.
     
-});
-
-self.addEventListener("online", function (event) {
     
-});
-
-self.addEventListener("offline", function (event) {
-});
-
-self.addEventListener('notificationclick', function(e) {
     
-});
-
-