Add sw activation logic

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "name": "Nsec.app",
-  "short_name": "Nsec.app - Nostr key management tool",
+  "name": "Nsec.app - Nostr key management tool",
+  "short_name": "Nsec.app",
   "start_url": ".",
   "icons": [
     {

src/App.tsx

@@ -1,6 +1,6 @@
 import { DbKey, dbi } from './modules/db'
 import { useCallback, useEffect, useState } from 'react'
-import { swicOnRender } from './modules/swic'
+import { swicOnReload, swicOnRender } from './modules/swic'
 import { useAppDispatch } from './store/hooks/redux'
 import { setApps, setKeys, setPending, setPerms } from './store/reducers/content.slice'
 import AppRoutes from './routes/AppRoutes'
@@ -77,6 +77,12 @@ function App() {
     setRender((r) => r + 1)
   })
 
+  // subscribe to service worker updates
+  swicOnReload(() => {
+    console.log('reload')
+    // FIXME show 'Please reload' badge at page top
+  })
+
   return (
     <>
       <AppRoutes />

src/modules/backend.ts

@@ -144,13 +144,8 @@ export class NoauthBackend {
 
     const self = this
     swg.addEventListener('activate', (event) => {
-      console.log('activate')
-      //			swg.addEventListener('activate', event => event.waitUntil(swg.clients.claim()));
-    })
-
-    swg.addEventListener('install', (event) => {
-      console.log('install')
-      //			swg.addEventListener('install', event => event.waitUntil(swg.skipWaiting()));
+      console.log('activate new sw worker')
+      this.reloadUI()
     })
 
     swg.addEventListener('push', (event) => {
@@ -1001,7 +996,7 @@ export class NoauthBackend {
   }
 
   private async editName(npub: string, name: string) {
-    const key = this.enckeys.find(k => k.npub == npub)
+    const key = this.enckeys.find(k => k.npub === npub)
     if (!key) throw new Error("Npub not found");
     if (key.name) {
       await this.sendDeleteNameToServer(npub, key.name)
@@ -1015,7 +1010,7 @@ export class NoauthBackend {
   }
 
   private async transferName(npub: string, name: string, newNpub: string) {
-    const key = this.enckeys.find(k => k.npub == npub)
+    const key = this.enckeys.find(k => k.npub === npub)
     if (!key) throw new Error("Npub not found")
     if (!name) throw new Error("Empty name")
     if (key.name !== name) throw new Error("Name changed, please reload")
@@ -1103,10 +1098,20 @@ export class NoauthBackend {
     }
   }
 
+  private async reloadUI() {
+    const clients = await this.swg.clients.matchAll({
+      includeUncontrolled: true,
+    })
+    console.log('reloadUI clients', clients.length)
+    for (const client of clients) {
+      client.postMessage({ result: 'reload' })
+    }
+  }
+
   public async onPush(event: any) {
     console.log('push', { data: event.data })
     // noop - we just need browser to launch this worker
     // FIXME use event.waitUntil and and unblock after we
-    // show a notification
+    // show a notification to avoid annoying the browser
   }
 }

src/modules/swic.ts

@@ -1,10 +1,12 @@
-// service-worker client interface
+// service-worker client interface,
+// works on the frontend, not sw
 import * as serviceWorkerRegistration from '../serviceWorkerRegistration'
 
 export let swr: ServiceWorkerRegistration | null = null
 const reqs = new Map<number, { ok: (r: any) => void; rej: (r: any) => void }>()
 let nextReqId = 1
 let onRender: (() => void) | null = null
+let onReload: (() => void) | null = null
 
 export async function swicRegister() {
   serviceWorkerRegistration.register({
@@ -13,8 +15,12 @@ export async function swicRegister() {
       swr = registration
     },
     onError(e) {
-      console.log(`error ${e}`)
+      console.log('sw error', e)
     },
+    onUpdate() {
+      // tell new SW that it should activate immediately
+      swr?.waiting?.postMessage({type: 'SKIP_WAITING'})
+    }
   })
 
   navigator.serviceWorker.ready.then((r) => {
@@ -37,7 +43,11 @@ function onMessage(data: any) {
   console.log('SW message', id, result, error)
 
   if (!id) {
+    if (result === 'reload') {
+      if (onReload) onReload()
+    } else {
       if (onRender) onRender()
+    }
     return
   }
 
@@ -76,3 +86,7 @@ export async function swicCall(method: string, ...args: any[]) {
 export function swicOnRender(cb: () => void) {
   onRender = cb
 }
+
+export function swicOnReload(cb: () => void) {
+  onReload = cb
+}