feat: keep background Updates badge current (Closes #1281)

frontend/dashboard.js

@@ -6,6 +6,7 @@
   const mobileAppBadge = createMobileAppBadge({
     control:qs('#app-badge-control'), status:qs('#app-badge-status'),
     container:qs('#app-badge-setting'), navigator, storage:localStorage,
+    serviceWorker:navigator.serviceWorker,
   });
   mobileAppBadge.start();
   const cardPlanning = createCardPlanning(document);

frontend/mobile-app-badge.js

@@ -7,6 +7,7 @@
   container,
   navigator,
   storage,
+  serviceWorker,
 }) {
   const ENABLED_KEY = 'stackchain.app-badge.enabled.v1';
   let enabled = false;
@@ -18,6 +19,16 @@
       && typeof navigator?.clearAppBadge === 'function';
   }
 
+  async function syncPreference() {
+    try {
+      const registration = await serviceWorker?.ready;
+      registration?.active?.postMessage({type:'stackchain-app-badge-preference', enabled});
+      return Boolean(registration?.active);
+    } catch (_error) {
+      return false;
+    }
+  }
+
   async function render() {
     if (!enabled || !available() || renderedCount === confirmedCount) return true;
     try {
@@ -36,6 +47,7 @@
     enabled = Boolean(control?.checked);
     if (enabled) storage?.setItem(ENABLED_KEY, 'true');
     else storage?.removeItem(ENABLED_KEY);
+    await syncPreference();
     if (!enabled && available()) {
       try {
         await navigator.clearAppBadge();
@@ -58,6 +70,7 @@
       return false;
     }
     enabled = storage?.getItem(ENABLED_KEY) === 'true';
+    if (enabled) void syncPreference();
     if (control) {
       control.checked = enabled;
       control.addEventListener('change', change);

frontend/private-data-registry.js

@@ -7,6 +7,7 @@
     'stackchain-search-reply-drafts-v1',
     'stackchain-conversation-reply-drafts-v1',
     'stackchain-today-action-mailbox-v1',
+    'stackchain-app-badge-preference-v1',
   ]);
   if (typeof module !== 'undefined' && module.exports) module.exports = databases;
   else root.stackchainPrivateDatabases = databases;

frontend/service-worker.js

@@ -9,6 +9,57 @@ const PUSH_ACTION_TIMEOUT_MS = self.__STACKCHAIN_PUSH_ACTION_TIMEOUT_MS || 8000;
 const TODAY_ACTION_TTL_MS = 2 * 60 * 1000;
 const PRIVATE_DATABASES = self.stackchainPrivateDatabases;
 
+function createAppBadgePreference() {
+  const dbName = 'stackchain-app-badge-preference-v1';
+  const storeName = 'preferences';
+  const open = () => new Promise((resolve, reject) => {
+    const request = indexedDB.open(dbName, 1);
+    request.onupgradeneeded = () => request.result.createObjectStore(storeName);
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error || new Error('App badge preference unavailable.'));
+  });
+  return {
+    async get() {
+      const database = await open();
+      const enabled = await new Promise((resolve, reject) => {
+        const request = database.transaction(storeName, 'readonly').objectStore(storeName).get('enabled');
+        request.onsuccess = () => resolve(request.result === true);
+        request.onerror = () => reject(request.error || new Error('App badge preference unavailable.'));
+      });
+      database.close();
+      return enabled;
+    },
+    async set(enabled) {
+      const database = await open();
+      await new Promise((resolve, reject) => {
+        const transaction = database.transaction(storeName, 'readwrite');
+        transaction.objectStore(storeName).put(enabled === true, 'enabled');
+        transaction.oncomplete = resolve;
+        transaction.onerror = () => reject(transaction.error || new Error('App badge preference could not be saved.'));
+        transaction.onabort = transaction.onerror;
+      });
+      database.close();
+    },
+  };
+}
+const appBadgePreference = self.__STACKCHAIN_APP_BADGE_PREFERENCE || createAppBadgePreference();
+let renderedBackgroundBadgeCount = null;
+
+async function reconcileBackgroundAppBadge(count) {
+  if (!Number.isSafeInteger(count) || count < 0 || count > 9999
+      || typeof self.registration.setAppBadge !== 'function'
+      || typeof self.registration.clearAppBadge !== 'function') return false;
+  let enabled = false;
+  try { enabled = await appBadgePreference.get(); } catch (_error) { return false; }
+  if (!enabled || renderedBackgroundBadgeCount === count) return false;
+  try {
+    if (count > 0) await self.registration.setAppBadge(count);
+    else await self.registration.clearAppBadge();
+    renderedBackgroundBadgeCount = count;
+    return true;
+  } catch (_error) { return false; }
+}
+
 function createTodayActionStore() {
   const dbName = 'stackchain-today-action-mailbox-v1';
   const storeName = 'commands';
@@ -524,6 +575,19 @@ async function updateTodayLockScreen(active, running, rawActionToken = '', rawBr
 }
 
 self.addEventListener('message', event => {
+  if (event.data?.type === 'stackchain-app-badge-preference') {
+    event.waitUntil((async () => {
+      if (!String(event.source?.url || '').startsWith(self.location.origin + BASE)) return;
+      const enabled = event.data.enabled === true;
+      try {
+        await appBadgePreference.set(enabled);
+        renderedBackgroundBadgeCount = null;
+        if (!enabled && typeof self.registration.clearAppBadge === 'function') {
+          await self.registration.clearAppBadge();
+        }
+      } catch (_error) { /* Page preference remains authoritative on next launch. */ }
+    })());
+  }
   if (event.data?.type === 'stackchain-resume-outbox') event.waitUntil((async () => {
     await issueSync.resume();
     await flushAndNotify();
@@ -582,6 +646,7 @@ self.addEventListener('push', event => {
   const tag = String(payload.tag || '');
   const notificationId = Number(payload.notification_id);
   const updateCount = Number(payload.update_count);
+  const unreadCount = typeof payload.unread_count === 'number' ? payload.unread_count : NaN;
   const deadlineCount = Number(payload.deadline_count);
   const planDate = String(payload.plan_date || '');
   if (
@@ -626,11 +691,12 @@ self.addEventListener('push', event => {
     && updateCount > 0
     && updateCount <= 50
   ) {
-    event.waitUntil(self.registration.showNotification(updateCount + ' new work updates', {
-      body: 'Tap to review them in Stackchain.',
-      tag,
-      data: {route},
-    }));
+    event.waitUntil(Promise.all([
+      reconcileBackgroundAppBadge(unreadCount),
+      self.registration.showNotification(updateCount + ' new work updates', {
+        body: 'Tap to review them in Stackchain.', tag, data: {route},
+      }),
+    ]));
     return;
   }
   if (!/^#\/my-work\/update\/\d+$/.test(route) || !/^stackchain-update-\d+$/.test(tag)) return;
@@ -650,7 +716,10 @@ self.addEventListener('push', event => {
     ];
     options.data.notificationId = notificationId;
   }
-  event.waitUntil(self.registration.showNotification('New work update', options));
+  event.waitUntil(Promise.all([
+    reconcileBackgroundAppBadge(unreadCount),
+    self.registration.showNotification('New work update', options),
+  ]));
 });
 
 async function openWorkRoute(route) {