astra
/
ntfy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use the same notification pipeline everywhere 

This means less duplication and `actions` support for all
notifications.
pull/751/head
nimbleghost 2023-06-14 23:20:48 +02:00
parent fa418eef16
commit b197ea3ab6
5 changed files with 102 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
web/public/sw.js
View File

@ -4,7 +4,8 @@ import { NavigationRoute, registerRoute } from "workbox-routing";
import { NetworkFirst } from "workbox-strategies";
import { dbAsync } from "../src/app/db";
import { formatMessage, formatTitleWithDefault } from "../src/app/notificationUtils";
import { getNotificationParams, icon, badge } from "../src/app/notificationUtils";
import i18n from "../src/app/i18n";
@ -20,15 +21,9 @@ import i18n from "../src/app/i18n";
const broadcastChannel = new BroadcastChannel("web-push-broadcast");
const isImage = (filenameOrUrl) => filenameOrUrl?.match(/\.(png|jpe?g|gif|webp)$/i) ?? false;
const icon = "/static/images/ntfy.png";
const addNotification = async (data) => {
const addNotification = async ({ subscriptionId, message }) => {
const db = await dbAsync();
const { subscription_id: subscriptionId, message } = data;
await db.notifications.add({
...message,
subscriptionId,
@ -45,27 +40,6 @@ const addNotification = async (data) => {
self.navigator.setAppBadge?.(badgeCount);
};
const showNotification = async (data) => {
const { subscription_id: subscriptionId, message } = data;
// Please update the desktop notification in Notifier.js to match any changes here
const image = isImage(message.attachment?.name) ? message.attachment.url : undefined;
await self.registration.showNotification(formatTitleWithDefault(message, message.topic), {
tag: subscriptionId,
body: formatMessage(message),
icon: image ?? icon,
image,
data,
timestamp: message.time * 1_000,
actions: message.actions
?.filter(({ action }) => action === "view" || action === "http")
.map(({ label }) => ({
action: label,
title: label,
})),
});
};
/**
* Handle a received web push notification
* @param {object} data see server/types.go, type webPushPayload
@ -76,21 +50,33 @@ const handlePush = async (data) => {
body: i18n.t("web_push_subscription_expiring_body"),
icon,
data,
badge,
});
} else if (data.event === "message") {
const { subscription_id: subscriptionId, message } = data;
// see: web/src/app/WebPush.js
// the service worker cannot play a sound, so if the web app
// is running, it receives the broadcast and plays it.
broadcastChannel.postMessage(data.message);
broadcastChannel.postMessage(message);
await addNotification(data);
await showNotification(data);
await addNotification({ subscriptionId, message });
await self.registration.showNotification(
...getNotificationParams({
subscriptionId,
message,
defaultTitle: message.topic,
topicRoute: new URL(message.topic, self.location.origin).toString(),
})
);
} else {
// We can't ignore the push, since permission can be revoked by the browser
await self.registration.showNotification(i18n.t("web_push_unknown_notification_title"), {
body: i18n.t("web_push_unknown_notification_body"),
icon,
data,
badge,
});
}
};
@ -104,17 +90,23 @@ const handleClick = async (event) => {
const rootUrl = new URL(self.location.origin);
const rootClient = clients.find((client) => client.url === rootUrl.toString());
// perhaps open on another topic
const fallbackClient = clients[0];
if (event.notification.data?.event !== "message") {
// e.g. subscription_expiring event, simply open the web app on the root route (/)
if (!event.notification.data?.message) {
// e.g. something other than a message, e.g. a subscription_expiring event
// simply open the web app on the root route (/)
if (rootClient) {
rootClient.focus();
} else if (fallbackClient) {
fallbackClient.focus();
fallbackClient.navigate(rootUrl.toString());
} else {
self.clients.openWindow(rootUrl);
}
event.notification.close();
} else {
const { message } = event.notification.data;
const { message, topicRoute } = event.notification.data;
if (event.action) {
const action = event.notification.data.message.actions.find(({ label }) => event.action === label);
@ -134,9 +126,10 @@ const handleClick = async (event) => {
}
} catch (e) {
console.error("[ServiceWorker] Error performing http action", e);
self.registration.showNotification(`${i18n.t('notifications_actions_failed_notification')}: ${action.label} (${action.action})`, {
self.registration.showNotification(`${i18n.t("notifications_actions_failed_notification")}: ${action.label} (${action.action})`, {
body: e.message,
icon,
badge,
});
}
}
@ -151,18 +144,22 @@ const handleClick = async (event) => {
} else {
// If no action was clicked, and the message doesn't have a click url:
// - first try focus an open tab on the `/:topic` route
// - if not, an open tab on the root route (`/`)
// - if no ntfy window is open, open a new tab on the `/:topic` route
// - if not, use an open tab on the root route (`/`) and navigate to the topic
// - if not, use whichever tab we have open and navigate to the topic
// - finally, open a new tab focused on the topic
const topicUrl = new URL(message.topic, self.location.origin);
const topicClient = clients.find((client) => client.url === topicUrl.toString());
const topicClient = clients.find((client) => client.url === topicRoute);
if (topicClient) {
topicClient.focus();
} else if (rootClient) {
rootClient.focus();
rootClient.navigate(topicRoute);
} else if (fallbackClient) {
fallbackClient.focus();
fallbackClient.navigate(topicRoute);
} else {
self.clients.openWindow(topicUrl);
self.clients.openWindow(topicRoute);
}
event.notification.close();

49
web/src/app/Notifier.js
View File

@ -1,39 +1,34 @@
import { openUrl, playSound, topicDisplayName, topicShortUrl, urlB64ToUint8Array } from "./utils";
import { formatMessage, formatTitleWithDefault } from "./notificationUtils";
import { playSound, topicDisplayName, topicShortUrl, urlB64ToUint8Array } from "./utils";
import { getNotificationParams } from "./notificationUtils";
import prefs from "./Prefs";
import logo from "../img/ntfy.png";
import routes from "../components/routes";
/**
* The notifier is responsible for displaying desktop notifications. Note that not all modern browsers
* support this; most importantly, all iOS browsers do not support window.Notification.
*/
class Notifier {
async notify(subscription, notification, onClickFallback) {
async notify(subscription, notification) {
if (!this.supported()) {
return;
}
const shortUrl = topicShortUrl(subscription.baseUrl, subscription.topic);
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;
await this.playSound();
// 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: image ?? logo,
image,
timestamp: message.time * 1_000,
});
if (notification.click) {
n.onclick = () => openUrl(notification.click);
} else {
n.onclick = () => onClickFallback(subscription);
}
const shortUrl = topicShortUrl(subscription.baseUrl, subscription.topic);
const defaultTitle = topicDisplayName(subscription);
console.log(`[Notifier, ${shortUrl}] Displaying notification ${notification.id}`);
const registration = await this.serviceWorkerRegistration();
await registration.showNotification(
...getNotificationParams({
subscriptionId: subscription.id,
message: notification,
defaultTitle,
topicRoute: new URL(routes.forSubscription(subscription), window.location.origin).toString(),
})
);
}
async playSound() {
@ -73,11 +68,15 @@ class Notifier {
}
async pushManager() {
return (await this.serviceWorkerRegistration()).pushManager;
}
async serviceWorkerRegistration() {
const registration = await navigator.serviceWorker.getRegistration();
if (!registration) {
throw new Error("No service worker registration found");
}
return registration.pushManager;
return registration;
}
notRequested() {

4
web/src/app/SubscriptionManager.js
View File

@ -42,7 +42,7 @@ class SubscriptionManager {
return this.db.subscriptions.get(subscriptionId);
}
async notify(subscriptionId, notification, defaultClickAction) {
async notify(subscriptionId, notification) {
const subscription = await this.get(subscriptionId);
if (subscription.mutedUntil > 0) {
return;
@ -53,7 +53,7 @@ class SubscriptionManager {
return;
}
await Promise.all([notifier.playSound(), notifier.notify(subscription, notification, defaultClickAction)]);
await notifier.notify(subscription, notification);
}
/**

37
web/src/app/notificationUtils.js
View File

@ -16,7 +16,7 @@ export const formatTitle = (m) => {
return m.title;
};
export const formatTitleWithDefault = (m, fallback) => {
const formatTitleWithDefault = (m, fallback) => {
if (m.title) {
return formatTitle(m);
}
@ -33,3 +33,38 @@ export const formatMessage = (m) => {
}
return m.message;
};
const isImage = (filenameOrUrl) => filenameOrUrl?.match(/\.(png|jpe?g|gif|webp)$/i) ?? false;
export const icon = "/static/images/ntfy.png";
export const badge = "/static/images/mask-icon.svg";
export const getNotificationParams = ({ subscriptionId, message, defaultTitle, topicRoute }) => {
const image = isImage(message.attachment?.name) ? message.attachment.url : undefined;
// https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API
return [
formatTitleWithDefault(message, defaultTitle),
{
body: formatMessage(message),
badge,
icon,
image,
timestamp: message.time * 1_000,
tag: subscriptionId,
renotify: true,
silent: false,
// This is used by the notification onclick event
data: {
message,
topicRoute,
},
actions: message.actions
?.filter(({ action }) => action === "view" || action === "http")
.map(({ label }) => ({
action: label,
title: label,
})),
},
];
};

6
web/src/components/hooks.js
View File

@ -1,4 +1,4 @@
import { useNavigate, useParams } from "react-router-dom";
import { useParams } from "react-router-dom";
import { useEffect, useMemo, useState } from "react";
import subscriptionManager from "../app/SubscriptionManager";
import { disallowedTopic, expandSecureUrl, topicUrl } from "../app/utils";
@ -21,7 +21,6 @@ import { webPush, useWebPushTopicListener } from "../app/WebPush";
* topics, such as sync topics (st_...).
*/
export const useConnectionListeners = (account, subscriptions, users, webPushTopics) => {
const navigate = useNavigate();
const wsSubscriptions = useMemo(
() => (subscriptions && webPushTopics ? subscriptions.filter((s) => !webPushTopics.includes(s.topic)) : []),
// wsSubscriptions should stay stable unless the list of subscription IDs changes. Without the memo, the connection
@ -51,8 +50,7 @@ export const useConnectionListeners = (account, subscriptions, users, webPushTop
const handleNotification = async (subscriptionId, notification) => {
const added = await subscriptionManager.addNotification(subscriptionId, notification);
if (added) {
const defaultClickAction = (subscription) => navigate(routes.forSubscription(subscription));
await subscriptionManager.notify(subscriptionId, notification, defaultClickAction);
await subscriptionManager.notify(subscriptionId, notification);
}
};