@goodandready/dsh-plugin-notify 0.3.8 → 0.4.0

package/lib/client.js

@@ -13,7 +13,7 @@ window.__ModuleLoader__.load({
 
     const en = {
       title: 'Notify',
-      subtitle: 'IM webhook, sound, toast, and desktop notifications',
+      subtitle: 'IM webhook, sound, toast, desktop, and web push notifications',
       intro: 'Store each webhook URL under Settings → Credentials, then type only the credential name below. Do not paste URLs into this form.',
       'field.feishu': 'Feishu credential',
       'field.wecom': 'WeCom credential',
@@ -51,10 +51,21 @@ window.__ModuleLoader__.load({
       'settings.saving': 'Saving…',
       'settings.saved': 'Saved',
       'settings.saveFailed': 'Save failed: ',
+      'webpush.section': 'Web push (reaches devices with every dsh tab closed)',
+      'field.enableWebPush': 'Enable web push channel',
+      'field.webPushOnlyWhenAway': 'Only push when no browser is connected',
+      'btn.webpushEnable': 'Enable push on this device',
+      'btn.testPush': 'Test push',
+      'webpush.state.unsupported': 'Web push is not available in this context — open dsh in a browser (HTTPS or localhost) to use it',
+      'webpush.state.denied': 'Notification permission denied by browser settings',
+      'webpush.state.disabled': 'Web push channel is disabled — enable it above and save first',
+      'webpush.state.notSubscribed': 'This device is not subscribed yet',
+      'webpush.state.subscribed': 'This device is subscribed — push will reach it',
+      'webpush.state.error': 'Push setup failed: ',
     }
     const zh = {
       title: '通知',
-      subtitle: 'IM Webhook、音频、浮动弹窗与桌面系统通知',
+      subtitle: 'IM Webhook、音频、浮动弹窗、桌面系统通知与网页推送',
       intro: '请先在设置 → 凭据中保存 Webhook URL，然后只在下方填写凭据名称。不要直接粘贴 URL。',
       'field.feishu': '飞书凭据',
       'field.wecom': '企业微信凭据',
@@ -92,6 +103,17 @@ window.__ModuleLoader__.load({
       'settings.saving': '正在保存…',
       'settings.saved': '已保存',
       'settings.saveFailed': '保存失败：',
+      'webpush.section': '网页推送（所有 dsh 标签页关闭时也能收到）',
+      'field.enableWebPush': '启用网页推送通道',
+      'field.webPushOnlyWhenAway': '仅在无浏览器连接时推送',
+      'btn.webpushEnable': '在本设备上启用推送',
+      'btn.testPush': '测试推送',
+      'webpush.state.unsupported': '当前上下文不支持网页推送——请在浏览器中打开 dsh（HTTPS 或 localhost）使用该通道',
+      'webpush.state.denied': '通知权限已被浏览器设置拒绝',
+      'webpush.state.disabled': '网页推送通道未启用——请先在上方启用并保存',
+      'webpush.state.notSubscribed': '此设备尚未订阅推送',
+      'webpush.state.subscribed': '此设备已订阅——可以接收推送',
+      'webpush.state.error': '推送设置失败：',
     }
 
     let ChevronIcon = null
@@ -250,6 +272,117 @@ window.__ModuleLoader__.load({
       }
     }
 
+    function urlBase64ToUint8Array(base64String) {
+      try {
+        const padding = '='.repeat((4 - (base64String.length % 4)) % 4)
+        const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/')
+        const raw = window.atob(base64)
+        const output = new Uint8Array(raw.length)
+        for (let i = 0; i < raw.length; i++) output[i] = raw.charCodeAt(i)
+        return output
+      } catch (_err) {
+        return new Uint8Array(0)
+      }
+    }
+
+    // Document-relative on purpose: the web document declares <base href="./">,
+    // so plugin routes resolve correctly behind a --public-url mount prefix.
+    function pluginUrl(relPath) {
+      try {
+        return new URL(relPath, document.baseURI).href
+      } catch (_err) {
+        return relPath
+      }
+    }
+
+    function webPushSupported() {
+      if (typeof window === 'undefined' || typeof navigator === 'undefined') return false
+      if (!('serviceWorker' in navigator) || !('PushManager' in window) || !('Notification' in window)) return false
+      if (window.isSecureContext === false) return false
+      // Service workers only register on http(s) origins; desktop shells load
+      // the UI from custom schemes (e.g. dsh-app://) where they are unavailable.
+      const proto = window.location ? window.location.protocol : ''
+      if (proto !== 'https:' && proto !== 'http:') return false
+      return true
+    }
+
+    function registerNotifyServiceWorker() {
+      if (!webPushSupported()) return Promise.reject(new Error('unsupported'))
+      return navigator.serviceWorker.register(pluginUrl('dsh-plugin-notify/sw.js'), { scope: './' })
+    }
+
+    // Permission → service worker → applicationServerKey → subscribe → upload.
+    async function enableWebPushOnDevice() {
+      if (!webPushSupported()) throw new Error('unsupported')
+      const perm = await Notification.requestPermission()
+      if (perm !== 'granted') throw new Error('denied')
+      const reg = await registerNotifyServiceWorker()
+      const keyRes = await fetch(pluginUrl('dsh-plugin-notify/push/key'))
+      if (!keyRes.ok) throw new Error('disabled')
+      const keyInfo = await keyRes.json().catch(() => null)
+      if (!keyInfo || !keyInfo.publicKey) throw new Error('disabled')
+      // A stale subscription bound to a previous key blocks re-subscription.
+      const existing = await reg.pushManager.getSubscription()
+      if (existing) await existing.unsubscribe()
+      const sub = await reg.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: urlBase64ToUint8Array(keyInfo.publicKey),
+      })
+      const saveRes = await fetch(pluginUrl('dsh-plugin-notify/push/subscribe'), {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(sub.toJSON ? sub.toJSON() : sub),
+      })
+      if (!saveRes.ok) throw new Error('subscribe failed (' + saveRes.status + ')')
+      return sub
+    }
+
+    async function refreshWebPushStatus() {
+      if (!webPushSupported()) return 'unsupported'
+      if (Notification.permission === 'denied') return 'denied'
+      try {
+        const keyRes = await fetch(pluginUrl('dsh-plugin-notify/push/key'))
+        if (!keyRes.ok) return 'disabled'
+        const reg = await navigator.serviceWorker.getRegistration()
+        if (!reg) return 'notSubscribed'
+        const sub = await reg.pushManager.getSubscription()
+        return sub ? 'subscribed' : 'notSubscribed'
+      } catch (_err) {
+        return 'notSubscribed'
+      }
+    }
+
+    // A notification click that found no live window opened a fresh one with
+    // ?dshNotifySession=<id>: navigate once the sessions service shows up.
+    function consumeDeepLink(ctx) {
+      if (typeof window === 'undefined') return
+      let sessionId = ''
+      try {
+        const params = new URLSearchParams(window.location.search)
+        sessionId = params.get('dshNotifySession') || ''
+        if (!sessionId) return
+        params.delete('dshNotifySession')
+        const qs = params.toString()
+        window.history.replaceState({}, '', window.location.pathname + (qs ? '?' + qs : '') + window.location.hash)
+      } catch (_err) {
+        return
+      }
+      let tries = 0
+      const timer = setInterval(() => {
+        tries++
+        try {
+          if (ctx && ctx.sessions && typeof ctx.sessions.activate === 'function') {
+            ctx.sessions.activate(sessionId)
+            clearInterval(timer)
+            return
+          }
+        } catch (_err) {
+          // retry until the budget is exhausted
+        }
+        if (tries > 40) clearInterval(timer)
+      }, 250)
+    }
+
     function getToastContainer() {
       if (typeof document === 'undefined') return null
       let container = document.getElementById('dsh-notify-toast-container')
@@ -487,6 +620,49 @@ window.__ModuleLoader__.load({
         }
         return 'unsupported'
       })
+      const [webPushState, setWebPushState] = React.useState('')
+      const [webPushErr, setWebPushErr] = React.useState('')
+
+      React.useEffect(() => {
+        refreshWebPushStatus().then(setWebPushState).catch(() => {})
+      }, [])
+
+      const onEnableWebPush = async () => {
+        setWebPushErr('')
+        try {
+          await enableWebPushOnDevice()
+          setWebPushState('subscribed')
+          if (draft) setDraft({ ...draft, enableWebPush: true })
+        } catch (e) {
+          const msg = String((e && e.message) || e)
+          if (msg === 'denied' || msg === 'unsupported' || /not supported/i.test(msg)) {
+            setWebPushState('unsupported')
+          } else {
+            setWebPushState('error')
+            setWebPushErr(msg)
+          }
+        }
+      }
+
+      const onTestPush = async () => {
+        setWebPushErr('')
+        try {
+          const res = await fetch(pluginUrl('dsh-plugin-notify/push/test'), { method: 'POST' })
+          if (!res.ok) {
+            setWebPushState(res.status === 404 ? 'disabled' : 'error')
+            if (res.status !== 404) setWebPushErr('HTTP ' + res.status)
+            return
+          }
+          setWebPushState('subscribed')
+        } catch (e) {
+          setWebPushState('error')
+          setWebPushErr(String((e && e.message) || e))
+        }
+      }
+
+      const webPushStatusText = webPushState === 'error'
+        ? t('webpush.state.error') + webPushErr
+        : (webPushState ? t('webpush.state.' + webPushState) : '')
 
       const requestPermission = async () => {
         if (typeof window !== 'undefined' && 'Notification' in window) {
@@ -499,15 +675,23 @@ window.__ModuleLoader__.load({
         }
       }
 
-      const scope = React.useMemo(
-        () => (ctx && ctx.configForms ? ctx.configForms.get(NS) : undefined),
+      // dsh 0.1 keys the settings scope by package name; 0.2 keys it by the
+      // composition row id. get() always returns a controller, so hold BOTH and
+      // use whichever reports ready (the other stays permanently unavailable).
+      const [scopeNS, scopeRow] = React.useMemo(
+        () => (ctx && ctx.configForms ? [ctx.configForms.get(NS), ctx.configForms.get(ROW_ID)] : [undefined, undefined]),
         [ctx],
       )
-      const snapshot = React.useSyncExternalStore(
+      const useSnap = (scope) => React.useSyncExternalStore(
         React.useMemo(() => (cb) => (scope ? scope.subscribe(cb) : () => {}), [scope]),
         React.useCallback(() => (scope ? scope.getSnapshot() : { status: 'loading' }), [scope]),
         React.useCallback(() => ({ status: 'loading' }), []),
       )
+      const snapNS = useSnap(scopeNS)
+      const snapRow = useSnap(scopeRow)
+      const rowWins = scopeRow && snapNS.status !== 'ready' && snapRow.status === 'ready'
+      const scope = rowWins ? scopeRow : scopeNS
+      const snapshot = rowWins ? snapRow : snapNS
 
       React.useEffect(() => { ensureStyles() }, [])
 
@@ -529,6 +713,8 @@ window.__ModuleLoader__.load({
             enableSound: Boolean(stored.enableSound),
             enableToasts: Boolean(stored.enableToasts),
             enableDesktopNotifications: Boolean(stored.enableDesktopNotifications),
+            enableWebPush: Boolean(stored.webPush && stored.webPush.enabled),
+            webPushOnlyWhenAway: !(stored.webPush && stored.webPush.onlyWhenAway === false),
             notifyBackgroundOnly: !!stored.notifyBackgroundOnly,
             timeoutMs: String(stored.timeoutMs != null ? stored.timeoutMs : 5000),
             dndStart: (stored.dnd && stored.dnd.start) || '',
@@ -554,6 +740,7 @@ window.__ModuleLoader__.load({
           enableSound: !!draft.enableSound,
           enableToasts: !!draft.enableToasts,
           enableDesktopNotifications: !!draft.enableDesktopNotifications,
+          webPush: { enabled: !!draft.enableWebPush, onlyWhenAway: draft.webPushOnlyWhenAway !== false },
           notifyBackgroundOnly: !!draft.notifyBackgroundOnly,
           timeoutMs: Number.isFinite(timeoutNum) && timeoutNum > 0 ? timeoutNum : 5000,
           dnd: { start: String(draft.dndStart || '').trim(), end: String(draft.dndEnd || '').trim() },
@@ -585,6 +772,9 @@ window.__ModuleLoader__.load({
         return React.createElement('span', { className: 'pn-sub' }, t('subtitle'))
       }
       const page = !!(props && props.view === 'page')
+      // On the plugin page (view === 'page') the head button is hidden, so the
+      // body must not depend on the accordion state — always show the form there.
+      const expanded = page || open
 
       return React.createElement(page ? 'div' : 'li', { className: page ? 'pn-page' : 'pn-card' },
         React.createElement('button', { type: 'button', className: 'pn-head', style: page ? { display: 'none' } : undefined, 'aria-expanded': page ? true : open, onClick: () => setOpen((v) => !v) },
@@ -594,7 +784,7 @@ window.__ModuleLoader__.load({
           ),
           React.createElement(Chevron, { open }),
         ),
-        open ? React.createElement('div', { className: 'pn-body' },
+        expanded ? React.createElement('div', { className: 'pn-body' },
           status === 'loading'
             ? React.createElement('p', { className: 'pn-hint', style: { padding: '12px 0' } }, t('settings.loading'))
             : status !== 'ready'
@@ -649,6 +839,22 @@ window.__ModuleLoader__.load({
                       ? React.createElement('button', { type: 'button', className: 'pn-btn-action', onClick: requestPermission }, t('btn.reqPermission'))
                       : React.createElement('span', { className: 'pn-hint' }, permState === 'granted' ? t('perm.granted') : t('perm.denied')),
                   ),
+                  React.createElement('div', { className: 'pn-field' },
+                    React.createElement('span', { className: 'pn-label' }, t('webpush.section')),
+                    React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
+                      React.createElement('input', { type: 'checkbox', id: 'pn-webpush', checked: !!(draft && draft.enableWebPush), onChange: (e) => setDraft({ ...draft, enableWebPush: e.target.checked }) }),
+                      React.createElement('label', { htmlFor: 'pn-webpush', className: 'pn-label' }, t('field.enableWebPush')),
+                    ),
+                    React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
+                      React.createElement('input', { type: 'checkbox', id: 'pn-wponlyaway', checked: (draft && draft.webPushOnlyWhenAway) !== false, onChange: (e) => setDraft({ ...draft, webPushOnlyWhenAway: e.target.checked }) }),
+                      React.createElement('label', { htmlFor: 'pn-wponlyaway', className: 'pn-label' }, t('field.webPushOnlyWhenAway')),
+                    ),
+                    React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' } },
+                      React.createElement('button', { type: 'button', className: 'pn-btn-action', onClick: onEnableWebPush }, t('btn.webpushEnable')),
+                      React.createElement('button', { type: 'button', className: 'pn-btn-action', onClick: onTestPush }, t('btn.testPush')),
+                      webPushStatusText ? React.createElement('span', { className: 'pn-hint' }, webPushStatusText) : null,
+                    ),
+                  ),
                   React.createElement('div', { className: 'pn-field', style: { flexDirection: 'row', alignItems: 'center', gap: 8 } },
                     React.createElement('input', { type: 'checkbox', id: 'pn-bgonly', checked: !!(draft && draft.notifyBackgroundOnly), onChange: (e) => setDraft({ ...draft, notifyBackgroundOnly: e.target.checked }) }),
                     React.createElement('label', { htmlFor: 'pn-bgonly', className: 'pn-label' }, t('field.notifyBackgroundOnly')),
@@ -710,7 +916,9 @@ window.__ModuleLoader__.load({
       let currentSettings = {}
       if (ctx.configForms) {
         try {
-          const scope = ctx.configForms.get(NS)
+          const candidates = [ctx.configForms.get(NS), ctx.configForms.get(ROW_ID)]
+          const ready = candidates.find((s) => s && s.getSnapshot && s.getSnapshot().status === 'ready')
+          const scope = ready || candidates[0]
           if (scope && typeof scope.subscribe === 'function') {
             scope.subscribe(() => {
               const snap = scope.getSnapshot ? scope.getSnapshot() : null
@@ -735,6 +943,31 @@ window.__ModuleLoader__.load({
       } else {
         startSseListener(ctx, t, () => currentSettings)
       }
+
+      // Web push: a notification click that found this live window jumps it here.
+      try {
+        if (typeof navigator !== 'undefined' && navigator.serviceWorker && typeof navigator.serviceWorker.addEventListener === 'function') {
+          ctx.effect(() => {
+            const onMessage = (e) => {
+              const d = e && e.data
+              if (d && d.type === 'dsh-notify-jump' && d.sessionId) navigateToSession(ctx, d.sessionId)
+            }
+            navigator.serviceWorker.addEventListener('message', onMessage)
+            return () => {
+              try { navigator.serviceWorker.removeEventListener('message', onMessage) } catch (_err) { /* ignore */ }
+            }
+          }, 'dsh-plugin-notify: sw messages')
+        }
+      } catch (_err) {
+        // best effort: service worker messaging unavailable
+      }
+
+      // A push notification that opened a fresh window lands here: ?dshNotifySession=<id>.
+      try {
+        consumeDeepLink(ctx)
+      } catch (_err) {
+        // best effort: deep-link consumption is optional
+      }
     }
 
     module.exports = { apply, inject: ['slots', 'locale', 'configForms'] }