https://rozku.to/chat-notification-worker.js

1// Display notifications requested by an open site tab. No push subscription,
2// background network connection, fetch interception or offline cache.
3self.addEventListener("message", (event) => {
4  if (!event.source?.id) return
5  const { type, id, title, options } = event.data ?? {}
6  if (type === "chat-notification-show") {
7    event.waitUntil(
8      self.registration
9        .showNotification(title, {
10          ...options,
11          data: { id, clientId: event.source.id },
12        })
13        .then(
14          () => event.ports[0]?.postMessage({ ok: true }),
15          () => event.ports[0]?.postMessage({ ok: false }),
16        ),
17    )
18  } else if (type === "chat-notification-close") {
19    event.waitUntil(
20      self.registration.getNotifications().then((notifications) => {
21        for (const notification of notifications) {
22          if (
23            notification.data?.id === id &&
24            notification.data?.clientId === event.source.id
25          )
26            notification.close()
27        }
28      }),
29    )
30  }
31})
32self.addEventListener("notificationclick", (event) => {
33  event.notification.close()
34  // Only an existing tab can handle the click and recheck its current account.
35  // Closing the site does not cause it to reopen or receive more messages.
36  event.waitUntil(
37    self.clients.get(event.notification.data?.clientId).then(async (client) => {
38      if (!client) return
39      await client.focus()
40      client.postMessage({
41        type: "chat-notification-click",
42        id: event.notification.data?.id,
43      })
44    }),
45  )
46})
47
48self.addEventListener("notificationclose", (event) => {
49  event.waitUntil(
50    self.clients.get(event.notification.data?.clientId).then((client) => {
51      client?.postMessage({
52        type: "chat-notification-close",
53        id: event.notification.data?.id,
54      })
55    }),
56  )
57})