feat: open the target when a background push notification is clicked

js/service-worker.js

@@ -13,6 +13,9 @@ function showBgNotification(content) {
 	const options = {
 		body: msg.join('\n'),
 		tag: 'nid' + content.nid,
+		data: {
+			link: content.link,
+		},
 	}
 	return self.registration.showNotification(title, options)
 }
@@ -88,6 +91,25 @@ self.addEventListener('push', function(event) {
 	}
 })
 
+self.addEventListener('notificationclick', function(event) {
+	event.notification.close()
+	const link = event.notification.data && event.notification.data.link
+	if (!link) {
+		// no target: focus an existing window of this instance if any
+		event.waitUntil(self.clients.matchAll({ type: 'window' }).then((clientList) => {
+			for (const client of clientList) {
+				if (client.url.startsWith(self.location.origin)) {
+					return client.focus()
+				}
+			}
+		}))
+		return
+	}
+	// always a new tab: existing tabs may be pinned or parked there on purpose
+	// and the client API cannot tell those apart
+	event.waitUntil(self.clients.openWindow(link))
+})
+
 self.addEventListener('pushsubscriptionchange', function(event) {
 	console.log('Push Subscription Change', event)
 	event.waitUntil(self.clients.matchAll()

lib/Push.php

@@ -902,7 +902,7 @@ protected function callSafelyForToken(IToken $token, string $method): ?int {
 	 * @param INotification $notification
 	 * @param int $maxLength max length of the push notification (shorter than 240 for proxy push, 3993 for webpush)
 	 * @return array
-	 * @psalm-return array{nid: int, app: string, subject: string, type: string, id: string}
+	 * @psalm-return array{nid: int, app: string, subject: string, type: string, id: string, link?: string}
 	 */
 	protected function encodeNotif(int $id, INotification $notification, int $maxLength): array {
 		$data = [
@@ -913,6 +913,13 @@ protected function encodeNotif(int $id, INotification $notification, int $maxLen
 			'id' => $notification->getObjectId(),
 		];
 
+		// The link lets the service worker navigate on notificationclick; the
+		// subject budget below shrinks accordingly, very long links are dropped
+		$link = $notification->getLink();
+		if ($link !== '' && strlen($link) < 128) {
+			$data['link'] = $link;
+		}
+
 		// Max length of encryption is ~240, so we need to make sure the subject is shorter.
 		// Also, subtract two for encapsulating quotes will be added.
 		$maxDataLength = $maxLength - strlen((string)json_encode($data)) - 2;

src/workers/service-worker.js

@@ -13,6 +13,9 @@ function showBgNotification(content) {
 	const options = {
 		body: msg.join('\n'),
 		tag: 'nid' + content.nid,
+		data: {
+			link: content.link,
+		},
 	}
 	return self.registration.showNotification(title, options)
 }
@@ -88,6 +91,25 @@ self.addEventListener('push', function(event) {
 	}
 })
 
+self.addEventListener('notificationclick', function(event) {
+	event.notification.close()
+	const link = event.notification.data && event.notification.data.link
+	if (!link) {
+		// no target: focus an existing window of this instance if any
+		event.waitUntil(self.clients.matchAll({ type: 'window' }).then((clientList) => {
+			for (const client of clientList) {
+				if (client.url.startsWith(self.location.origin)) {
+					return client.focus()
+				}
+			}
+		}))
+		return
+	}
+	// always a new tab: existing tabs may be pinned or parked there on purpose
+	// and the client API cannot tell those apart
+	event.waitUntil(self.clients.openWindow(link))
+})
+
 self.addEventListener('pushsubscriptionchange', function(event) {
 	console.log('Push Subscription Change', event)
 	event.waitUntil(self.clients.matchAll()