Merge pull request #1895 from thelounge/xpaw/sw-notification-focus

Open and focus correct channel when clicking on push notifications

client/js/webpush.js

@@ -8,6 +8,14 @@ let pushNotificationsButton;
 let clientSubscribed = null;
 let applicationServerKey;
 
+if ("serviceWorker" in navigator) {
+	navigator.serviceWorker.addEventListener("message", (event) => {
+		if (event.data && event.data.type === "open") {
+			$("#sidebar").find(`.chan[data-target="#${event.data.channel}"]`).click();
+		}
+	});
+}
+
 module.exports.hasServiceWorker = false;
 
 module.exports.configurePushNotifications = (subscribedOnServer, key) => {

client/service-worker.js

@@ -45,17 +45,38 @@ self.addEventListener("notificationclick", function(event) {
 	event.notification.close();
 
 	event.waitUntil(clients.matchAll({
+		includeUncontrolled: true,
 		type: "window",
-	}).then(function(clientList) {
+	}).then((clientList) => {
-		for (var i = 0; i < clientList.length; i++) {
+		if (clientList.length === 0) {
-			var client = clientList[i];
+			if (clients.openWindow) {
-			if ("focus" in client) {
+				return clients.openWindow(`.#${event.notification.tag}`);
-				return client.focus();
 			}
+
+			return;
 		}
 
-		if (clients.openWindow) {
+		const client = findSuitableClient(clientList);
-			return clients.openWindow(".");
+
+		client.postMessage({
+			type: "open",
+			channel: event.notification.tag,
+		});
+
+		if ("focus" in client) {
+			client.focus();
 		}
 	}));
 });
+
+function findSuitableClient(clientList) {
+	for (let i = 0; i < clientList.length; i++) {
+		const client = clientList[i];
+
+		if (client.focused || client.visibilityState === "visible") {
+			return client;
+		}
+	}
+
+	return clientList[0];
+}