diff --git a/.gitignore b/.gitignore index d77e539..9b1a035 100644 --- a/.gitignore +++ b/.gitignore @@ -216,3 +216,4 @@ pip-log.txt sftp-config.json node_modules/ + diff --git a/library.js b/library.js index 89b54f2..0876aa9 100644 --- a/library.js +++ b/library.js @@ -38,9 +38,12 @@ plugin.init = async (params) => { }; plugin.appendConfig = async (config) => { - const { publicKey } = await meta.settings.get('web-push'); + const { publicKey, promptEnabled, promptDelay } = await meta.settings.get('web-push'); config['web-push'] = { vapidKey: publicKey, + // checkbox serialization varies by database and core version + promptEnabled: [true, 'true', 'on', 1, '1'].includes(promptEnabled), + promptDelay: Math.max(parseInt(promptDelay, 10) || 3, 1), }; return config; @@ -104,8 +107,8 @@ plugin.addRoutes = async ({ router, middleware, helpers }) => { const { subscription } = req.body; const payload = await constructPayload({ nid: utils.generateUUID(), - bodyShort: 'Test notification', - bodyLong: 'This is a test message sent from NodeBB', + bodyShort: '[[web-push:test.title]]', + bodyLong: '[[web-push:test.body]]', path: `/me/web-push`, }, req.uid, userLang); await webPush.sendNotification(subscription, JSON.stringify(payload)); @@ -116,7 +119,7 @@ plugin.addAdminNavigation = (header) => { header.plugins.push({ route: '/plugins/web-push', icon: 'fa-tint', - name: 'Push Notifications (via Push API)', + name: '[[web-push:admin.menu-label]]', }); return header; @@ -239,12 +242,27 @@ async function constructPayload(notification, uid, lang) { badge = `${nconf.get('url')}${meta.config['brand:maskableIcon'] || '/apple-touch-icon'}`; } + const actions = await constructActions(lang); + return { title, body, tag, lang, dir, - data: { url, icon, badge }, + actions, + data: { url, icon, badge, nid }, }; } + +async function constructActions(lang) { + const [markRead, viewNotifications] = await translator.translateKeys([ + '[[web-push:action.mark-read]]', + '[[web-push:action.view-notifications]]', + ], lang); + + return [ + { action: 'mark-read', title: markRead }, + { action: 'view-notifications', title: viewNotifications }, + ]; +} diff --git a/plugin.json b/plugin.json index 85ee949..ccb947a 100644 --- a/plugin.json +++ b/plugin.json @@ -13,6 +13,10 @@ { "hook": "filter:service-worker.scripts", "method": "registerServiceWorker" } ], "languages": "public/languages", + "scripts": [ + "public/lib/main.js", + "public/lib/prompt.js" + ], "modules": { "../client/account/web-push.js": "./public/lib/settings.js", "../admin/plugins/web-push.js": "./public/lib/admin.js" diff --git a/public/languages/en-GB/web-push.json b/public/languages/en-GB/web-push.json index 2e8f3ab..8945797 100644 --- a/public/languages/en-GB/web-push.json +++ b/public/languages/en-GB/web-push.json @@ -7,5 +7,37 @@ "profile.send-test": "Send Test Notification", "toast.test_success": "Test notification sent.", - "toast.test_unavailable": "Cannot send test notification as push notifications are not enabled on this device." -} \ No newline at end of file + "toast.subscribe_success": "Push notifications enabled on this device.", + "toast.test_unavailable": "Cannot send test notification as push notifications are not enabled on this device.", + "toast.permission_denied": "Notification permission was denied. Please enable notifications for this site in your browser settings.", + "toast.subscribe_failed": "Could not enable push notifications on this device. Please try again.", + "toast.unsupported": "This browser does not support push notifications.", + "toast.sw_not_registered": "Push notifications are unavailable: the background service is not registered. On iOS, install this site to your Home Screen first.", + + "action.mark-read": "Mark as read", + "action.view-notifications": "View notifications", + + "prompt.title": "Stay in the loop", + "prompt.body": "Enable push notifications to get alerted even when you're not on the site.", + "prompt.confirm": "Enable notifications", + "prompt.dismiss": "No thanks", + + "test.title": "Test notification", + "test.body": "This is a test message sent from NodeBB", + + "admin.menu-label": "Push Notifications (via Push API)", + "admin.settings": "Settings", + "admin.max-length": "Maximum length", + "admin.max-length-help": "Additional characters beyond this specified length will be truncated. Due to a software limitation, if the message body is greater than 4096 bytes, the message itself will be an attachment in the push notification.", + "admin.badge": "Badge URL", + "admin.badge-help": "Optional — overrides the badge for messages sent (usually seen in the notification bar on mobile devices). By default, the site's configured \"touch icon\" is sent.", + "admin.icon": "Icon URL", + "admin.icon-help": "Optional — overrides the icon for messages sent (can be used for branding, etc.). By default, the site's configured \"touch icon\" is sent.", + "admin.prompt-enabled": "Show opt-in prompt to logged-in users", + "admin.prompt-enabled-help": "When enabled, a small corner banner inviting users to enable push notifications appears after the configured number of page visits. It does not block the page, and is never shown again once the user dismisses it or subscribes.", + "admin.prompt-delay": "Show prompt after (page visits)", + "admin.prompt-delay-help": "Number of page visits a logged-in user must make before the opt-in prompt appears. Minimum 1.", + "admin.users": "Users", + "admin.user": "User", + "admin.devices": "Devices" +} diff --git a/public/languages/he/web-push.json b/public/languages/he/web-push.json new file mode 100644 index 0000000..820e37e --- /dev/null +++ b/public/languages/he/web-push.json @@ -0,0 +1,43 @@ +{ + "profile.label": "התראות דחיפה", + "profile.introduction": "בנוסף להתראות בתוך האפליקציה ולהתראות בדוא״ל, ניתן לבחור לקבל גם התראות דחיפה. כך תוכלו לקבל התראות גם כשהאפליקציה אינה פתוחה במכשיר.", + "profile.option": "הפעלת התראות דחיפה במכשיר זה", + "profile.devices": "כרגע נשלחות התראות ל־ %1 מכשיר(ים).", + "profile.permissionBlocked": "המכשיר שלך אינו מאפשר כרגע לקבל התראות מאתר זה. יש לאשר את הרשאת ההתראות כדי להמשיך.", + "profile.send-test": "שליחת התראת בדיקה", + + "toast.test_success": "התראת הבדיקה נשלחה.", + "toast.subscribe_success": "התראות דחיפה הופעלו במכשיר זה.", + "toast.test_unavailable": "לא ניתן לשלוח התראת בדיקה כי התראות דחיפה אינן מופעלות במכשיר זה.", + "toast.permission_denied": "הרשאת ההתראות נדחתה. יש לאפשר התראות עבור אתר זה בהגדרות הדפדפן.", + "toast.subscribe_failed": "לא ניתן להפעיל התראות דחיפה במכשיר זה. נסו שוב.", + "toast.unsupported": "הדפדפן הזה אינו תומך בהתראות דחיפה.", + "toast.sw_not_registered": "התראות דחיפה אינן זמינות: שירות הרקע לא נרשם. באייפון, יש להתקין את האתר תחילה למסך הבית.", + + "action.mark-read": "סמן כנקרא", + "action.view-notifications": "צפה בהתראות", + + "prompt.title": "הישארו מעודכנים", + "prompt.body": "הפעילו התראות דחיפה וקבלו עדכונים גם כשאתם לא באתר.", + "prompt.confirm": "הפעלת התראות", + "prompt.dismiss": "לא תודה", + + "test.title": "התראת בדיקה", + "test.body": "זוהי הודעת בדיקה שנשלחה מ־NodeBB", + + "admin.menu-label": "התראות דחיפה (Push API)", + "admin.settings": "הגדרות", + "admin.max-length": "אורך מרבי", + "admin.max-length-help": "תווים מעבר לאורך שצוין ייחתכו. בשל מגבלת תוכנה, אם גוף ההודעה גדול מ־4096 בתים, ההודעה עצמה תישלח כקובץ מצורף בהתראת הדחיפה.", + "admin.badge": "כתובת תג (Badge)", + "admin.badge-help": "אופציונלי — מחליף את התג בהודעות הנשלחות (מוצג בדרך כלל בשורת ההתראות במכשירים ניידים). כברירת מחדל נשלח סמל ה־touch icon המוגדר באתר.", + "admin.icon": "כתובת סמל (Icon)", + "admin.icon-help": "אופציונלי — מחליף את הסמל בהודעות הנשלחות (שימושי למיתוג וכדומה). כברירת מחדל נשלח סמל ה־touch icon המוגדר באתר.", + "admin.prompt-enabled": "הצגת הצעת הרשמה למשתמשים מחוברים", + "admin.prompt-enabled-help": "כאשר מופעל, באנר קטן בפינת המסך המזמין משתמשים להפעיל התראות דחיפה יוצג לאחר מספר הביקורים שהוגדר. הבאנר אינו חוסם את הדף, ולא יוצג שוב לאחר שהמשתמש דחה אותו או נרשם.", + "admin.prompt-delay": "הצגת ההצעה לאחר (מספר ביקורים)", + "admin.prompt-delay-help": "מספר הביקורים שמשתמש מחובר צריך לבצע לפני שהצעת ההרשמה תוצג. מינימום 1.", + "admin.users": "משתמשים", + "admin.user": "משתמש", + "admin.devices": "מכשירים" +} diff --git a/public/languages/zh-CN/web-push.json b/public/languages/zh-CN/web-push.json index ab3abcd..6ff19b6 100644 --- a/public/languages/zh-CN/web-push.json +++ b/public/languages/zh-CN/web-push.json @@ -7,5 +7,37 @@ "profile.send-test": "发送测试通知", "toast.test_success": "测试通知已发送。", - "toast.test_unavailable": "由于此设备未启用推送通知，因此无法发送测试通知。" -} \ No newline at end of file + "toast.subscribe_success": "已在此设备上启用推送通知。", + "toast.test_unavailable": "由于此设备未启用推送通知，因此无法发送测试通知。", + "toast.permission_denied": "通知权限已被拒绝。请在浏览器设置中允许此站点发送通知。", + "toast.subscribe_failed": "无法在此设备上启用推送通知。请重试。", + "toast.unsupported": "此浏览器不支持推送通知。", + "toast.sw_not_registered": "推送通知不可用：后台服务未注册。在 iOS 上，请先将本站添加到主屏幕。", + + "action.mark-read": "标记为已读", + "action.view-notifications": "查看通知", + + "prompt.title": "保持最新动态", + "prompt.body": "启用推送通知，即使不在网站时也能及时收到提醒。", + "prompt.confirm": "启用通知", + "prompt.dismiss": "不，谢谢", + + "test.title": "测试通知", + "test.body": "这是一条来自 NodeBB 的测试消息", + + "admin.menu-label": "推送通知（Push API）", + "admin.settings": "设置", + "admin.max-length": "最大长度", + "admin.max-length-help": "超出指定长度的字符将被截断。由于软件限制，如果消息正文超过 4096 字节，消息本身将作为附件随推送通知发送。", + "admin.badge": "徽章 URL", + "admin.badge-help": "可选 — 覆盖所发送消息的徽章（通常显示在移动设备的通知栏中）。默认发送站点配置的“touch icon”。", + "admin.icon": "图标 URL", + "admin.icon-help": "可选 — 覆盖所发送消息的图标（可用于品牌宣传等）。默认发送站点配置的“touch icon”。", + "admin.prompt-enabled": "向已登录用户显示订阅提示", + "admin.prompt-enabled-help": "启用后，在达到设定的访问次数后，会在屏幕角落显示一个邀请用户启用推送通知的小横幅。它不会阻挡页面，用户关闭或订阅后将不再显示。", + "admin.prompt-delay": "显示提示前的访问次数", + "admin.prompt-delay-help": "已登录用户需要访问多少次页面后才会显示订阅提示。最小值为 1。", + "admin.users": "用户", + "admin.user": "用户", + "admin.devices": "设备" +} diff --git a/public/lib/main.js b/public/lib/main.js index d51436f..d403994 100644 --- a/public/lib/main.js +++ b/public/lib/main.js @@ -1,11 +1,38 @@ -// this file here as placeholder in case needed. Add back to plugin.json to use - 'use strict'; +// NodeBB core skips serviceWorker.register() on Safari (see public/src/app.js). +// That predates iOS 16.4, where Safari/PWA does support Web Push. Without an SW, +// navigator.serviceWorker.ready hangs forever and our settings page silently fails. +// This script registers the SW ourselves on Safari/iOS. + (async () => { const [hooks] = await app.require(['hooks']); hooks.on('action:app.load', async () => { - // ... + if (!('serviceWorker' in navigator)) { + return; + } + + // Mirror core's own condition (config.useragent.isSafari) so the two + // checks can never disagree: core skips exactly when we register. + if (!config.useragent || !config.useragent.isSafari) { + return; + } + + // Core already tried (and skipped) registration by this point. If something + // is registered, leave it alone. + const existing = await navigator.serviceWorker.getRegistration(); + if (existing) { + return; + } + + const swUrl = (config.relative_path || '') + '/service-worker.js'; + const scope = (config.relative_path || '') + '/'; + + try { + await navigator.serviceWorker.register(swUrl, { scope }); + } catch (err) { + console.error('[web-push] service worker registration failed:', err); + } }); })(); diff --git a/public/lib/prompt.js b/public/lib/prompt.js new file mode 100644 index 0000000..9c94603 --- /dev/null +++ b/public/lib/prompt.js @@ -0,0 +1,94 @@ +'use strict'; + +// Invites logged-in users to enable push notifications via a corner banner, +// shown after a configurable number of page loads (see ACP settings). +// Visit count and dismissal are tracked per-device in localStorage. + +(async () => { + const [hooks, api, alerts, storage] = await app.require(['hooks', 'api', 'alerts', 'storage']); + + const visitsKey = 'web-push:visits'; + const dismissedKey = 'web-push:prompt-dismissed'; + + hooks.on('action:app.load', async () => { + const { promptEnabled, promptDelay, vapidKey } = config['web-push'] || {}; + if (!promptEnabled || !vapidKey || !app.user.uid || storage.getItem(dismissedKey)) { + return; + } + + if (!('serviceWorker' in navigator) || !('PushManager' in window) || + Notification.permission === 'denied') { + return; + } + + const registration = await navigator.serviceWorker.getRegistration(); + if (!registration || await registration.pushManager.getSubscription()) { + return; + } + + const visits = (parseInt(storage.getItem(visitsKey), 10) || 0) + 1; + storage.setItem(visitsKey, visits); + if (visits < promptDelay) { + return; + } + + showBanner(registration); + }); + + async function showBanner(registration) { + const $banner = await app.parseAndTranslate('partials/web-push/prompt', {}); + const banner = $banner.get(0); + document.body.append(banner); + + banner.addEventListener('click', (e) => { + const btn = e.target.closest('[data-action]'); + if (!btn) { + return; + } + + if (btn.dataset.action === 'subscribe') { + subscribe(registration); + } + + storage.setItem(dismissedKey, '1'); + banner.remove(); + }); + } + + async function subscribe(registration) { + try { + // As in settings.js: when permission is already granted there is no + // await before subscribe(), keeping the call within the click's user + // activation (iOS Safari requires this). + if (Notification.permission !== 'granted' && + await Notification.requestPermission() !== 'granted') { + alerts.warning('[[web-push:toast.permission_denied]]'); + return; + } + + const subscription = await registration.pushManager.subscribe({ + userVisibleOnly: true, + applicationServerKey: urlBase64ToUint8Array(config['web-push'].vapidKey), + }); + await api.post('/plugins/web-push/subscription', { subscription: subscription.toJSON() }); + alerts.success('[[web-push:toast.subscribe_success]]'); + } catch (err) { + console.error('[web-push] subscribing from prompt failed:', err); + alerts.warning('[[web-push:toast.subscribe_failed]]'); + } + } + + // Chrome doesn't accept a base64 string for applicationServerKey + // https://bugs.chromium.org/p/chromium/issues/detail?id=802280 + function urlBase64ToUint8Array(base64String) { + const padding = '='.repeat((4 - (base64String.length % 4)) % 4); + const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/'); + + const rawData = window.atob(base64); + const outputArray = new Uint8Array(rawData.length); + for (let i = 0; i < rawData.length; ++i) { + outputArray[i] = rawData.charCodeAt(i); + } + return outputArray; + } +})(); diff --git a/public/lib/settings.js b/public/lib/settings.js index 9ed61e9..0b44b48 100644 --- a/public/lib/settings.js +++ b/public/lib/settings.js @@ -10,7 +10,29 @@ export async function init() { console.error('Web Push form container not found'); return; } - const registration = await navigator.serviceWorker.ready; + + if (!('serviceWorker' in navigator) || !('PushManager' in window)) { + warning('[[web-push:toast.unsupported]]'); + return; + } + + // navigator.serviceWorker.ready never rejects — it hangs forever if no SW is registered. + // On iOS this is a common failure mode (PWA not installed, scope mismatch, core SW failed + // to register). Race it against a timeout so we surface the problem instead of hanging. + const registration = await Promise.race([ + navigator.serviceWorker.ready, + new Promise((_, reject) => setTimeout( + () => reject(new Error('Service worker not ready after 5s — likely not registered')), + 5000 + )), + ]).catch(() => { + warning('[[web-push:toast.sw_not_registered]]'); + return null; + }); + if (!registration) { + return; + } + let subscription = await registration.pushManager.getSubscription(); const convertedVapidKey = urlBase64ToUint8Array(config['web-push'].vapidKey); @@ -33,20 +55,51 @@ export async function init() { case 'toggle': { const countEl = document.querySelector('#deviceCount strong'); if (!subscription) { + // iOS Safari is strict about user activation: subscribe() must be + // called from the same synchronous task as the click. We branch BEFORE + // any await: if permission is already granted, call subscribe() first + // (no awaits in between). Otherwise request permission, which itself + // preserves activation on Chrome but may lose it on iOS — the user can + // just tap again. + if (Notification.permission === 'denied') { + subselector.checked = false; + warning('[[web-push:toast.permission_denied]]'); + document.getElementById('permission-warning').classList.remove('d-none'); + break; + } + try { + if (Notification.permission !== 'granted') { + const permission = await Notification.requestPermission(); + if (permission !== 'granted') { + subselector.checked = false; + warning('[[web-push:toast.permission_denied]]'); + document.getElementById('permission-warning').classList.remove('d-none'); + break; + } + } + subscription = await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: convertedVapidKey, }); await post('/plugins/web-push/subscription', { subscription: subscription.toJSON() }); + success('[[web-push:toast.subscribe_success]]'); // Update count let count = parseInt(countEl.textContent, 10); count += 1; countEl.innerText = count; - } catch (e) { + } catch (err) { subselector.checked = false; + // Roll back any browser-level subscription created before the failure. + const stale = await registration.pushManager.getSubscription(); + if (stale) { + await stale.unsubscribe(); + } + subscription = null; + warning('[[web-push:toast.subscribe_failed]]'); } } else { await subscription.unsubscribe(); diff --git a/static/web-push.js b/static/web-push.js index baa1f34..77302c3 100644 --- a/static/web-push.js +++ b/static/web-push.js @@ -4,7 +4,7 @@ // Register event listener for the 'push' event. self.addEventListener('push', (event) => { // Keep the service worker alive until the notification is created. - const { title, body, tag, data } = event.data.json(); + const { title, body, tag, data, actions } = event.data.json(); if (title && body) { const { icon } = data; @@ -12,8 +12,17 @@ self.addEventListener('push', (event) => { const { badge } = data; delete data.badge; + const options = { body, tag, data, icon, badge }; + + // Action buttons are not supported everywhere (e.g. Firefox, Safari); + // Notification.maxActions only exists where they are. + if (Array.isArray(actions) && typeof Notification !== 'undefined' && + 'maxActions' in Notification && Notification.maxActions > 0) { + options.actions = actions.slice(0, Notification.maxActions); + } + event.waitUntil( - self.registration.showNotification(title, { body, tag, data, icon, badge }) + self.registration.showNotification(title, options) ); } else if (tag) { event.waitUntil( @@ -26,29 +35,66 @@ self.addEventListener('push', (event) => { } }); +// Marks a notification read directly against the API. Push notifications are +// usually acted on when no forum window is open, so this cannot rely on +// postMessage to a client — the session cookie and a freshly-fetched csrf +// token are enough to call the write API from the worker itself. +async function markNotificationRead(nid) { + const base = self.registration.scope; + + const configRes = await fetch(new URL('api/config', base), { credentials: 'same-origin' }); + if (!configRes.ok) { + return; + } + const { csrf_token: csrfToken } = await configRes.json(); + + await fetch(new URL(`api/v3/notifications/${encodeURIComponent(nid)}/read`, base), { + method: 'PUT', + credentials: 'same-origin', + headers: { 'x-csrf-token': csrfToken }, + }); +} + +// Focuses an existing forum window (navigating it via ajaxify) or opens a new one. +function focusOrOpen(target) { + return self.clients + .matchAll({ type: 'window' }) + .then((clientList) => { + for (const client of clientList) { + const { hostname } = new URL(client.url); + if (target && hostname === target.hostname && 'focus' in client) { + client.postMessage({ + action: 'ajaxify', + url: target.pathname, + }); + return client.focus(); + } + } + if (target && self.clients.openWindow) return self.clients.openWindow(target.pathname); + }); +} + self.addEventListener('notificationclick', (event) => { event.notification.close(); + + if (event.action === 'mark-read') { + const nid = event.notification.data && event.notification.data.nid; + if (nid) { + event.waitUntil(markNotificationRead(nid).catch(() => {})); + } + return; + } + + if (event.action === 'view-notifications') { + event.waitUntil(focusOrOpen(new URL('notifications', self.registration.scope))); + return; + } + let target; if (event.notification.data && event.notification.data.url) { target = new URL(event.notification.data.url); } // This looks to see if the current is already open and focuses if it is - event.waitUntil( - self.clients - .matchAll({ type: 'window' }) - .then((clientList) => { - for (const client of clientList) { - const { hostname } = new URL(client.url); - if (target && hostname === target.hostname && 'focus' in client) { - client.postMessage({ - action: 'ajaxify', - url: target.pathname, - }); - return client.focus(); - } - } - if (self.clients.openWindow) return self.clients.openWindow(target.pathname); - }) - ); + event.waitUntil(focusOrOpen(target)); }); diff --git a/templates/admin/plugins/web-push.tpl b/templates/admin/plugins/web-push.tpl index e7fa8f2..f7ff3c3 100644 --- a/templates/admin/plugins/web-push.tpl +++ b/templates/admin/plugins/web-push.tpl @@ -5,44 +5,47 @@
-
Settings
+
[[web-push:admin.settings]]
- - -

- Additional characters beyond this specified length will be truncated. - Due to a software limitation, if the message body is greater than 4096 bytes, the message itself will be an attachment in the push notification. -

+ + +

[[web-push:admin.max-length-help]]

- - -

- Optional — overrides the badge for messages sent (usually seen in the notification bar on mobile devices) - By default, the site's configured "touch icon" is sent. -

+ + +

[[web-push:admin.badge-help]]

- - -

- Optional — overrides the icon for messages sent (can be used for branding, etc.) - By default, the site's configured "touch icon" is sent. -

+ + +

[[web-push:admin.icon-help]]

+
+ +
+ + +

[[web-push:admin.prompt-enabled-help]]

+
+ +
+ + +

[[web-push:admin.prompt-delay-help]]

-
Users
+
[[web-push:admin.users]]
- - + + diff --git a/templates/partials/web-push/prompt.tpl b/templates/partials/web-push/prompt.tpl new file mode 100644 index 0000000..13eb145 --- /dev/null +++ b/templates/partials/web-push/prompt.tpl @@ -0,0 +1,10 @@ +
+
+
[[web-push:prompt.title]]
+

[[web-push:prompt.body]]

+
+ + +
+
+
UserDevices[[web-push:admin.user]][[web-push:admin.devices]]