diff --git a/web/public/sw.js b/web/public/sw.js index dba350fa..96e5bf51 100644 --- a/web/public/sw.js +++ b/web/public/sw.js @@ -46,6 +46,8 @@ self.addEventListener("push", (event) => { const db = await getDbAsync(); + const image = message.attachment?.name.match(/\.(png|jpe?g|gif|webp)$/i) ? message.attachment.url : undefined; + await Promise.all([ (async () => { await db.notifications.add({ @@ -61,11 +63,14 @@ self.addEventListener("push", (event) => { db.subscriptions.update(subscriptionId, { last: message.id, }), + // Please update the desktop notification in Notifier.js to match any changes self.registration.showNotification(formatTitleWithDefault(message, message.topic), { tag: subscriptionId, body: formatMessage(message), - icon: "/static/images/ntfy.png", + icon: image ?? "/static/images/ntfy.png", + image, data, + timestamp: message.time * 1_000, }), ]); } else { @@ -81,6 +86,8 @@ self.addEventListener("push", (event) => { }); self.addEventListener("notificationclick", (event) => { + console.log("[ServiceWorker] NotificationClick"); + event.notification.close(); event.waitUntil( diff --git a/web/src/app/Notifier.js b/web/src/app/Notifier.js index 428b8979..4b8b832c 100644 --- a/web/src/app/Notifier.js +++ b/web/src/app/Notifier.js @@ -17,13 +17,17 @@ class Notifier { const displayName = topicDisplayName(subscription); const message = formatMessage(notification); const title = formatTitleWithDefault(notification, displayName); + const image = notification.attachment?.name.match(/\.(png|jpe?g|gif|webp)$/i) ? notification.attachment.url : undefined; // Show notification console.log(`[Notifier, ${shortUrl}] Displaying notification ${notification.id}: ${message}`); + // Please update sw.js if formatting changes const n = new Notification(title, { body: message, tag: subscription.id, - icon: logo, + icon: image ?? logo, + image, + timestamp: message.time * 1_000, }); if (notification.click) { n.onclick = () => openUrl(notification.click);