Use service worker to display notifications if available

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.
 				}

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");

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();