feat: add opt-in banner for push notifications

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 },
+	];
+}

plugin.json

@@ -13,6 +13,9 @@
 		{ "hook": "filter:service-worker.scripts", "method": "registerServiceWorker" }
 	],
 	"languages": "public/languages",
+	"scripts": [
+		"public/lib/prompt.js"
+	],
 	"modules": {
 		"../client/account/web-push.js": "./public/lib/settings.js",
 		"../admin/plugins/web-push.js": "./public/lib/admin.js"

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."
-}
+	"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",
+
+	"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.",
+	"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",
+
+	"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"
+}

public/languages/he/web-push.json

@@ -0,0 +1,43 @@
+{
+	"profile.label": "התראות דחיפה",
+	"profile.introduction": "בנוסף להתראות בתוך האפליקציה ולהתראות בדוא״ל, ניתן לבחור לקבל גם התראות דחיפה. כך תוכלו לקבל התראות גם כשהאפליקציה אינה פתוחה במכשיר.",
+	"profile.option": "הפעלת התראות דחיפה במכשיר זה",
+	"profile.devices": "כרגע נשלחות התראות ל־ <strong>%1</strong> מכשיר(ים).",
+	"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": "צפה בהתראות",
+
+	"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 המוגדר באתר.",
+	"prompt.title": "הישארו מעודכנים",
+	"prompt.body": "הפעילו התראות דחיפה וקבלו עדכונים גם כשאתם לא באתר.",
+	"prompt.confirm": "הפעלת התראות",
+	"prompt.dismiss": "לא תודה",
+
+	"admin.prompt-enabled": "הצגת הצעת הרשמה למשתמשים מחוברים",
+	"admin.prompt-enabled-help": "כאשר מופעל, באנר קטן בפינת המסך המזמין משתמשים להפעיל התראות דחיפה יוצג לאחר מספר הביקורים שהוגדר. הבאנר אינו חוסם את הדף, ולא יוצג שוב לאחר שהמשתמש דחה אותו או נרשם.",
+	"admin.prompt-delay": "הצגת ההצעה לאחר (מספר ביקורים)",
+	"admin.prompt-delay-help": "מספר הביקורים שמשתמש מחובר צריך לבצע לפני שהצעת ההרשמה תוצג. מינימום 1.",
+	"admin.users": "משתמשים",
+	"admin.user": "משתמש",
+	"admin.devices": "מכשירים"
+}

public/languages/zh-CN/web-push.json

@@ -7,5 +7,37 @@
 	"profile.send-test": "发送测试通知",
 
 	"toast.test_success": "测试通知已发送。",
-	"toast.test_unavailable": "由于此设备未启用推送通知，因此无法发送测试通知。"
-}
+	"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": "查看通知",
+
+	"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"。",
+	"prompt.title": "保持最新动态",
+	"prompt.body": "启用推送通知，即使不在网站时也能及时收到提醒。",
+	"prompt.confirm": "启用通知",
+	"prompt.dismiss": "不，谢谢",
+
+	"admin.prompt-enabled": "向已登录用户显示订阅提示",
+	"admin.prompt-enabled-help": "启用后，在达到设定的访问次数后，会在屏幕角落显示一个邀请用户启用推送通知的小横幅。它不会阻挡页面，用户关闭或订阅后将不再显示。",
+	"admin.prompt-delay": "显示提示前的访问次数",
+	"admin.prompt-delay-help": "已登录用户需要访问多少次页面后才会显示订阅提示。最小值为 1。",
+	"admin.users": "用户",
+	"admin.user": "用户",
+	"admin.devices": "设备"
+}

public/lib/prompt.js

@@ -0,0 +1,85 @@
+'use strict';
+
+(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 {
+			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) {
+			alerts.warning('[[web-push:toast.subscribe_failed]]');
+		}
+	}
+
+	// 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;
+	}
+})();

public/lib/settings.js

@@ -7,10 +7,26 @@ import { success, warning } from 'alerts';
 export async function init() {
 	const containerEl = document.querySelector('[component="web-push-form"]');
 	if (!containerEl) {
-		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 hangs forever if no SW is registered; race against a timeout.
+	const registration = await Promise.race([
+		navigator.serviceWorker.ready,
+		new Promise((_, reject) => setTimeout(() => reject(), 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,27 +49,48 @@ export async function init() {
 				case 'toggle': {
 					const countEl = document.querySelector('#deviceCount strong');
 					if (!subscription) {
+						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) {
+							countEl.innerText = count + 1;
+						} catch (err) {
 							subselector.checked = false;
+							const stale = await registration.pushManager.getSubscription();
+							if (stale) {
+								await stale.unsubscribe();
+							}
+							subscription = null;
+							warning('[[web-push:toast.subscribe_failed]]');
 						}
 					} else {
 						await subscription.unsubscribe();
 						await del('/plugins/web-push/subscription', { subscription: subscription.toJSON() });
 						let count = parseInt(countEl.textContent, 10);
-						count -= 1;
-						countEl.innerText = count;
+						countEl.innerText = count - 1;
 						subscription = null;
 					}
 
@@ -68,19 +105,15 @@ export async function init() {
 		enabledEl.checked = true;
 	}
 
-	// Show permission warning if applicable
 	const state = await registration.pushManager.permissionState({
 		userVisibleOnly: true,
 		applicationServerKey: convertedVapidKey,
 	});
 	if (state === 'denied') {
-		const warningEl = document.getElementById('permission-warning');
-		warningEl.classList.remove('d-none');
+		document.getElementById('permission-warning').classList.remove('d-none');
 	}
 }
 
-// This function is needed because Chrome doesn't accept a base64 encoded string
-// as value for applicationServerKey in pushManager.subscribe yet
 // https://bugs.chromium.org/p/chromium/issues/detail?id=802280
 function urlBase64ToUint8Array(base64String) {
 	const padding = '='.repeat((4 - (base64String.length % 4)) % 4);