@things-factory/shell 10.1.246 → 10.1.254

package/_index.html

@@ -5,7 +5,9 @@
     <meta name="google" content="notranslate" />
     <title>Things Factory App</title>
     <meta name="generator" content="Things Factory Starter Kit" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
+    <!-- interactive-widget: on a phone the on-screen keyboard shrinks the page, so the action bar and a popup's
+         last field stay above it instead of under it (Chrome on Android; Safari keeps its own behaviour). -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, interactive-widget=resizes-content" />
     <meta name="description" content="Reimagining Software" />
 
     <base href="/" />

package/client/serviceworker/push.ts

@@ -0,0 +1,61 @@
+/*
+ * [ Caution ]
+ * Since this module is being used by a service worker, be very careful about adding imports or using functions for browsers.
+ */
+
+export type PushWorker = {
+  registration: { showNotification(title: string, options?: any): Promise<void> }
+  channel: { postMessage(message: any): void }
+  store: { add(record: any): Promise<unknown>; limit(): Promise<unknown> }
+  /* the title of a push that brings none */
+  tagline?: string
+}
+
+/**
+ * Shows a web push, keeps it in the worker's store and tells the open screens. The work is handed to
+ * `event.waitUntil` before anything is awaited - otherwise the browser may stop the worker first, and a mobile
+ * browser drops the notice or revokes the subscription of a site that received a push and showed nothing.
+ */
+export function handlePush(event: { data?: any; waitUntil(work: Promise<unknown>): void }, worker: PushWorker) {
+  if (!event.data) {
+    return
+  }
+
+  try {
+    var { notification, data } = event.data.json()
+  } catch (e) {
+    notification = {
+      body: event.data.text()
+    }
+  }
+
+  const title = notification.title || worker.tagline
+
+  const options = {
+    icon: '/assets/manifest/icon-128x128.png',
+    badge: '/assets/manifest/badge-128x128.png',
+    ...notification,
+    data
+  }
+
+  event.waitUntil(
+    (async () => {
+      await worker.store.add({
+        timestamp: Date.now(),
+        ...notification,
+        ...data
+      })
+
+      await worker.store.limit()
+
+      worker.channel.postMessage({
+        type: 'notification',
+        notification,
+        data
+      })
+
+      /* https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification */
+      await worker.registration.showNotification(title, options)
+    })()
+  )
+}

package/client/serviceworker/sw-src.ts

@@ -6,6 +6,7 @@ import { precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching'
 import { StaleWhileRevalidate, NetworkFirst, CacheFirst, CacheOnly, NetworkOnly } from 'workbox-strategies'
 import 'broadcastchannel-polyfill'
 import { notificationStore } from './indexdb'
+import { handlePush } from './push'
 
 const ENV = process.env
 const production = ENV['NODE-ENV'] == 'production'
@@ -114,45 +115,9 @@ if (production) {
 }
 
 /* for push notification */
-addEventListener('push', async event => {
-  if (!event.data) {
-    return
-  }
-
-  try {
-    var { notification, data } = event.data.json()
-  } catch (e) {
-    notification = {
-      body: event.data.text()
-    }
-  }
-
-  const title = notification.title || ENV['APP-TAGLINE']
-
-  const options = {
-    icon: '/assets/manifest/icon-128x128.png',
-    badge: '/assets/manifest/badge-128x128.png',
-    ...notification,
-    data
-  }
-
-  await notificationStore.add({
-    timestamp: Date.now(),
-    ...notification,
-    ...data
-  })
-
-  await notificationStore.limit()
-
-  channel.postMessage({
-    type: 'notification',
-    notification,
-    data
-  })
-
-  /* https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification */
-  registration.showNotification(title, options)
-})
+addEventListener('push', (event: any) =>
+  handlePush(event, { registration, channel, store: notificationStore, tagline: ENV['APP-TAGLINE'] })
+)
 
 addEventListener('notificationclick', async event => {
   const { action, notification } = event

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/shell",
-  "version": "10.1.246",
+  "version": "10.1.254",
   "description": "Core module for framework",
   "bin": {
     "things-factory": "bin/things-factory",
@@ -142,5 +142,5 @@
     "pg": "^8.7.3",
     "sqlite3": "^5.0.8"
   },
-  "gitHead": "46c0d3c93edf765cc1f13040b1f9d03fd1d9e60b"
+  "gitHead": "793e2fd617db5bb917ec892e64956fb690f7e7b0"
 }

package/tests/service-worker-push.test.ts

@@ -0,0 +1,91 @@
+/**
+ * A web push is shown inside `event.waitUntil`.
+ *
+ * ## Why this is tested
+ *
+ * Until 2026-11-05 the worker's push handler awaited its store and then called `showNotification` without handing
+ * any of it to `event.waitUntil`. The browser may stop a worker as soon as the handler returns, and a mobile browser
+ * drops such a notice or revokes the subscription of a site that received a push and showed nothing.
+ */
+import { handlePush } from '../client/serviceworker/push'
+
+function worker() {
+  const shown: Array<{ title: string; options: any }> = []
+  const posted: any[] = []
+  let release: () => void = () => {}
+  const showing = new Promise<void>(resolve => (release = resolve))
+
+  return {
+    shown,
+    posted,
+    release: () => release(),
+    worker: {
+      registration: {
+        showNotification: async (title: string, options: any) => {
+          shown.push({ title, options })
+          await showing
+        }
+      },
+      channel: { postMessage: (message: any) => void posted.push(message) },
+      store: { add: async () => undefined, limit: async () => undefined },
+      tagline: 'Operato Office'
+    }
+  }
+}
+
+function pushEvent(payload: any) {
+  const kept: Promise<unknown>[] = []
+  return {
+    kept,
+    event: {
+      data: { json: () => payload, text: () => JSON.stringify(payload) },
+      waitUntil: (work: Promise<unknown>) => void kept.push(work)
+    }
+  }
+}
+
+const PAYLOAD = {
+  notification: { title: '결재 차례', body: '지출결의 1건' },
+  data: { type: 'approval', url: 'https://office.example.com/domain/hatiolab/activity-approval/a-1', timestamp: '1' }
+}
+
+describe('a web push in the service worker', () => {
+  it('hands its work to waitUntil before the handler returns', () => {
+    const { worker: w } = worker()
+    const { event, kept } = pushEvent(PAYLOAD)
+
+    handlePush(event, w)
+
+    expect(kept).toHaveLength(1)
+  })
+
+  it('keeps the worker alive until the notice is shown, with the full address to open', async () => {
+    const { worker: w, shown, posted, release } = worker()
+    const { event, kept } = pushEvent(PAYLOAD)
+
+    handlePush(event, w)
+
+    let done = false
+    void kept[0].then(() => (done = true))
+    for (let i = 0; i < 5; i++) await Promise.resolve()
+
+    expect(shown).toEqual([{ title: '결재 차례', options: expect.objectContaining({ body: '지출결의 1건', data: PAYLOAD.data }) }])
+    expect(posted).toEqual([{ type: 'notification', notification: PAYLOAD.notification, data: PAYLOAD.data }])
+    expect(done).toBe(false)
+
+    release()
+    await kept[0]
+    expect(done).toBe(true)
+  })
+
+  it('takes the application tagline when the push brings no title', async () => {
+    const { worker: w, shown, release } = worker()
+    const { event, kept } = pushEvent({ notification: { body: 'b' }, data: {} })
+
+    handlePush(event, w)
+    release()
+    await kept[0]
+
+    expect(shown[0].title).toBe('Operato Office')
+  })
+})