From 1f456aaaac837b905fcc96dc05318e7e8bbd6425 Mon Sep 17 00:00:00 2001 From: JonatanRek Date: Tue, 8 Oct 2019 11:12:47 +0200 Subject: [PATCH] Push Messages #1 --- app/templates/js/script.js | 92 +++++++++++++++++++++------------ app/templates/part/footer.phtml | 4 +- serviceWorker.js | 85 +++++++++++++++--------------- 3 files changed, 106 insertions(+), 75 deletions(-) diff --git a/app/templates/js/script.js b/app/templates/js/script.js index 8afde10..d150873 100644 --- a/app/templates/js/script.js +++ b/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(){ - if (pending == false) { - pending = true; - $.ajax({ - url: 'ajax', - type: 'POST', - dataType: 'json', - data: { - "action": 'getState' - }, - success: function(data){ - console.log(data); - for (const key in data) { - if (data.hasOwnProperty(key)) { - const device = data[key]; - $('[data-sub-device-id="'+key+'"]') - .find('.device-button-value') - .text(device['value']) - .attr('title',device['time']) - } - } - }, - error: function (request, status, error) { - console.log("ERROR ajaxChart():", request, error); - }, - complete: function (){ - pending = false; - } - }); - } - },4000); +var autoUpdate = setInterval(function(){ +if (pending == false) { +pending = true; +$.ajax({ +url: 'ajax', +type: 'POST', +dataType: 'json', +data: { +"action": 'getState' +}, +success: function(data){ +console.log(data); +for (const key in data) { +if (data.hasOwnProperty(key)) { +const device = data[key]; +$('[data-sub-device-id="'+key+'"]') +.find('.device-button-value') +.text(device['value']) +.attr('title',device['time']) } +} +}, +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); }); diff --git a/app/templates/part/footer.phtml b/app/templates/part/footer.phtml index 58d86fd..0fcb4bf 100644 --- a/app/templates/part/footer.phtml +++ b/app/templates/part/footer.phtml @@ -1,3 +1,5 @@ - + + + diff --git a/serviceWorker.js b/serviceWorker.js index 77ace7c..e6cc4ec 100644 --- a/serviceWorker.js +++ b/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'; - 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' + }; + + return self.registration.showNotification(notificationTitle, + notificationOptions); + }); + }); - event.waitUntil( - self.registration.showNotification(title, { - body: body, - icon: icon, - tag: tag - }) - ); -}); - -self.addEventListener('sync', function(event) { - console.info('Event: Sync'); + 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) { -}); - -