From 8791a17fc47695ce5666ceb410d9656617d62416 Mon Sep 17 00:00:00 2001 From: Pavel Djundik Date: Thu, 28 Sep 2017 11:53:32 +0300 Subject: [PATCH] Use service worker to display notifications if available --- client/js/socket-events/msg.js | 35 ++++++++++++++++++++++++---------- client/js/webpush.js | 8 ++++++-- client/service-worker.js | 10 ++++++++-- 3 files changed, 39 insertions(+), 14 deletions(-) diff --git a/client/js/socket-events/msg.js b/client/js/socket-events/msg.js index ccb17c3d..2ba35cec 100644 --- a/client/js/socket-events/msg.js +++ b/client/js/socket-events/msg.js @@ -6,6 +6,7 @@ const render = require("../render"); const utils = require("../utils"); const options = require("../options"); const helpers_roundBadgeNumber = require("../libs/handlebars/roundBadgeNumber"); +const webpush = require("../webpush"); const chat = $("#chat"); const sidebar = $("#sidebar"); @@ -131,16 +132,30 @@ function notifyMessage(targetId, channel, msg) { } try { - const notify = new Notification(title, { - body: body, - icon: "img/logo-64.png", - tag: `lounge-${targetId}`, - }); - notify.addEventListener("click", function() { - window.focus(); - button.click(); - this.close(); - }); + if (webpush.hasServiceWorker) { + navigator.serviceWorker.ready.then((registration) => { + registration.active.postMessage({ + type: "notification", + chanId: targetId, + timestamp: msg.time, + title: title, + body: body, + }); + }); + } else { + const notify = new Notification(title, { + tag: `chan-${targetId}`, + badge: "img/logo-64.png", + icon: "img/touch-icon-192x192.png", + body: body, + timestamp: msg.time, + }); + notify.addEventListener("click", function() { + window.focus(); + button.click(); + this.close(); + }); + } } catch (exception) { // `new Notification(...)` is not supported and should be silenced. } diff --git a/client/js/webpush.js b/client/js/webpush.js index 56d5f0c6..16eb9dd8 100644 --- a/client/js/webpush.js +++ b/client/js/webpush.js @@ -8,6 +8,8 @@ const pushNotificationsButton = $("#pushNotifications"); let clientSubscribed = null; let applicationServerKey; +module.exports.hasServiceWorker = false; + module.exports.configurePushNotifications = (subscribedOnServer, key) => { applicationServerKey = key; @@ -16,7 +18,7 @@ module.exports.configurePushNotifications = (subscribedOnServer, key) => { if (clientSubscribed === true && subscribedOnServer === false) { pushNotificationsButton.attr("disabled", true); - navigator.serviceWorker.register("service-worker.js") + navigator.serviceWorker.ready .then((registration) => registration.pushManager.getSubscription()) .then((subscription) => subscription && subscription.unsubscribe()) .then((successful) => { @@ -32,6 +34,8 @@ if (isAllowedServiceWorkersHost()) { if ("serviceWorker" in navigator) { navigator.serviceWorker.register("service-worker.js").then((registration) => { + module.exports.hasServiceWorker = true; + if (!registration.pushManager) { return; } @@ -58,7 +62,7 @@ if (isAllowedServiceWorkersHost()) { function onPushButton() { pushNotificationsButton.attr("disabled", true); - navigator.serviceWorker.register("service-worker.js").then((registration) => { + navigator.serviceWorker.ready.then((registration) => { registration.pushManager.getSubscription().then((existingSubscription) => { if (existingSubscription) { socket.emit("push:unregister"); diff --git a/client/service-worker.js b/client/service-worker.js index e0600045..77882983 100644 --- a/client/service-worker.js +++ b/client/service-worker.js @@ -2,13 +2,19 @@ /* global clients */ "use strict"; +self.addEventListener("message", function(event) { + showNotification(event, event.data); +}); + self.addEventListener("push", function(event) { if (!event.data) { return; } - const payload = event.data.json(); + showNotification(event, event.data.json()); +}); +function showNotification(event, payload) { if (payload.type !== "notification") { return; } @@ -33,7 +39,7 @@ self.addEventListener("push", function(event) { }); }) ); -}); +} self.addEventListener("notificationclick", function(event) { event.notification.close();