pwa ready

pwa/src/sw.ts

@@ -0,0 +1,59 @@
+/// <reference lib="webworker" />
+
+declare const self: ServiceWorkerGlobalScope
+
+import { precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching'
+import { registerRoute } from 'workbox-routing'
+import { StaleWhileRevalidate } from 'workbox-strategies'
+import { ExpirationPlugin } from 'workbox-expiration'
+import { CacheableResponsePlugin } from 'workbox-cacheable-response'
+
+precacheAndRoute(self.__WB_MANIFEST)
+cleanupOutdatedCaches()
+
+registerRoute(
+  ({ url }) => url.pathname.includes('/api/'),
+  new StaleWhileRevalidate({
+    cacheName: 'api-cache',
+    plugins: [
+      new CacheableResponsePlugin({
+        statuses: [0, 200],
+      }),
+      new ExpirationPlugin({
+        maxEntries: 100,
+        maxAgeSeconds: 60 * 60 * 24,
+      }),
+    ],
+  }),
+)
+
+self.addEventListener('push', (event: PushEvent) => {
+  const data = event.data?.json() ?? {}
+  const title = data.title ?? 'Placebo.mk'
+  const options = {
+    body: data.body ?? 'New update available',
+    icon: '/icons/icon-192.png',
+    badge: '/icons/badge-72.png',
+    data: data.url ?? '/',
+  }
+
+  event.waitUntil(self.registration.showNotification(title, options))
+})
+
+self.addEventListener('notificationclick', (event: NotificationEvent) => {
+  event.notification.close()
+
+  event.waitUntil(
+    self.clients.matchAll({ type: 'window' }).then((clientList) => {
+      const url = event.notification.data
+      for (const client of clientList) {
+        if (client.url === url && 'focus' in client) {
+          return client.focus()
+        }
+      }
+      return self.clients.openWindow(url)
+    }),
+  )
+})
+
+export {}