add webmanifest and notification handler in service worker

worker/index.js

@@ -1,40 +0,0 @@
-"use strict";
-
-self.addEventListener("push", function (event) {
-	console.log("event.data.text()", event.data.text());
-	const data = JSON.parse(event.data.text());
-	event.waitUntil(
-		registration.showNotification(data.title, {
-			body: data.message,
-			icon: "/icons/android-chrome-192x192.png",
-		}),
-	);
-});
-
-self.addEventListener("notificationclick", function (event) {
-	event.notification.close();
-	event.waitUntil(
-		clients.matchAll({ type: "window", includeUncontrolled: true }).then(function (clientList) {
-			if (clientList.length > 0) {
-				let client = clientList[0];
-				for (let i = 0; i < clientList.length; i++) {
-					if (clientList[i].focused) {
-						client = clientList[i];
-					}
-				}
-				return client.focus();
-			}
-			return clients.openWindow("/");
-		}),
-	);
-});
-
-// self.addEventListener('pushsubscriptionchange', function(event) {
-//   event.waitUntil(
-//       Promise.all([
-//           Promise.resolve(event.oldSubscription ? deleteSubscription(event.oldSubscription) : true),
-//           Promise.resolve(event.newSubscription ? event.newSubscription : subscribePush(registration))
-//               .then(function(sub) { return saveSubscription(sub) })
-//       ])
-//   )
-// })

worker/notifications.ts

@@ -0,0 +1,53 @@
+import { Routes } from "blitz";
+
+const worker = self as unknown as ServiceWorkerGlobalScope & typeof globalThis;
+
+worker.addEventListener("push", function (event) {
+	if (!event.data) {
+		return;
+	}
+
+	console.log("event.data.text()", event.data.text());
+	const data = JSON.parse(event.data.text());
+	event.waitUntil(
+		worker.registration.showNotification(data.title, {
+			body: data.message,
+			icon: "/icons/android-chrome-192x192.png",
+			actions: [
+				{ title: "Open", action: "open" },
+				{ title: "Mark as read", action: "mark-as-read" },
+			],
+		}),
+	);
+});
+
+worker.addEventListener("notificationclick", (event) => {
+	event.notification.close();
+	event.waitUntil(
+		worker.clients.matchAll({ type: "window", includeUncontrolled: true }).then((clientList) => {
+			if (!event.notification.data) {
+				return;
+			}
+
+			switch (event.action) {
+				case "mark-as-read":
+					// TODO
+					return;
+				case "open":
+				default: {
+					const data = JSON.parse(event.notification.data.text());
+					const route = Routes.ConversationPage({ recipient: data.recipient });
+					const url = `${route.pathname}${route.query}`;
+
+					if (clientList.length > 0) {
+						const client = clientList.find((client) => client.focused) ?? clientList[0]!;
+
+						client.navigate(url);
+						return client.focus();
+					}
+					return worker.clients.openWindow(url);
+				}
+			}
+		}),
+	);
+});