feat: pwa with push notifications (#337)

service-worker/web-push-notifications.ts

@@ -0,0 +1,85 @@
+/// <reference lib="WebWorker" />
+/// <reference types="vite/client" />
+import type { PushPayload } from '~/service-worker/types'
+
+declare const self: ServiceWorkerGlobalScope
+
+export const onPush = (event: PushEvent) => {
+  const promise = isClientFocused().then((isFocused) => {
+    if (isFocused)
+      return Promise.resolve()
+
+    const options: PushPayload = event.data!.json()
+    const {
+      access_token,
+      body,
+      icon,
+      notification_id,
+      notification_type,
+      preferred_locale,
+    } = options
+
+    let url = 'home'
+    if (notification_type) {
+      switch (notification_type) {
+        case 'follow':
+          url = 'notifications'
+          break
+        case 'mention':
+          url = 'notifications/mention'
+          break
+      }
+    }
+
+    const notificationOptions: NotificationOptions = {
+      badge: '/pwa-192x192.png',
+      body,
+      data: {
+        access_token,
+        preferred_locale,
+        url: `/${url}`,
+      },
+      dir: 'auto',
+      icon,
+      lang: preferred_locale,
+      tag: notification_id,
+      timestamp: new Date().getUTCDate(),
+    }
+    return self.registration.showNotification(options.title, notificationOptions)
+  })
+
+  event.waitUntil(promise)
+}
+
+export const onNotificationClick = (event: NotificationEvent) => {
+  const reactToNotificationClick = new Promise((resolve) => {
+    event.notification.close()
+    resolve(openUrl(event.notification.data.url))
+  })
+
+  event.waitUntil(reactToNotificationClick)
+}
+
+function findBestClient(clients: WindowClient[]) {
+  const focusedClient = clients.find(client => client.focused)
+  const visibleClient = clients.find(client => client.visibilityState === 'visible')
+
+  return focusedClient || visibleClient || clients[0]
+}
+
+async function openUrl(url: string) {
+  const clients = await self.clients.matchAll({ type: 'window' })
+  // Chrome 42-48 does not support navigate
+  if (clients.length !== 0 && 'navigate' in clients[0]) {
+    const client = findBestClient(clients as WindowClient[])
+    await client.navigate(url).then(client => client?.focus())
+  }
+
+  await self.clients.openWindow(url)
+}
+
+function isClientFocused() {
+  return self.clients
+    .matchAll({ type: 'window', includeUncontrolled: true })
+    .then(windowClients => Promise.resolve(windowClients.some(windowClient => windowClient.focused)))
+}