Simplify web push UX and updates
- Use a single endpoint - Use a declarative web push sync hook. This thus handles all edge cases that had to be manually handled before: logout, login, account sync, etc. - Simplify UX: browser notifications are always enabled (unless denied), web push toggle only shows up if permissions are already granted.
This commit is contained in:
nimbleghost
parent
4944e3ae4b
commit
47ad024ec7
20 changed files with 294 additions and 427 deletions
|
|
@ -6,8 +6,7 @@ import {
|
|||
topicUrlAuth,
|
||||
topicUrlJsonPoll,
|
||||
topicUrlJsonPollWithSince,
|
||||
topicUrlWebPushSubscribe,
|
||||
topicUrlWebPushUnsubscribe,
|
||||
webPushSubscriptionsUrl,
|
||||
} from "./utils";
|
||||
import userManager from "./UserManager";
|
||||
import { fetchOrThrow } from "./errors";
|
||||
|
|
@ -116,36 +115,15 @@ class Api {
|
|||
throw new Error(`Unexpected server response ${response.status}`);
|
||||
}
|
||||
|
||||
async subscribeWebPush(baseUrl, topic, browserSubscription) {
|
||||
const user = await userManager.get(baseUrl);
|
||||
const url = topicUrlWebPushSubscribe(baseUrl, topic);
|
||||
console.log(`[Api] Sending Web Push Subscription ${url}`);
|
||||
async updateWebPushSubscriptions(topics, browserSubscription) {
|
||||
const user = await userManager.get(config.base_url);
|
||||
const url = webPushSubscriptionsUrl(config.base_url);
|
||||
console.log(`[Api] Sending Web Push Subscriptions`, { url, topics, endpoint: browserSubscription.endpoint });
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: "POST",
|
||||
method: "PUT",
|
||||
headers: maybeWithAuth({}, user),
|
||||
body: JSON.stringify({ browser_subscription: browserSubscription }),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
return true;
|
||||
}
|
||||
|
||||
throw new Error(`Unexpected server response ${response.status}`);
|
||||
}
|
||||
|
||||
async unsubscribeWebPush(subscription, browserSubscription) {
|
||||
const user = await userManager.get(subscription.baseUrl);
|
||||
|
||||
const url = topicUrlWebPushUnsubscribe(subscription.baseUrl, subscription.topic);
|
||||
console.log(`[Api] Unsubscribing Web Push Subscription ${url}`);
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: "POST",
|
||||
headers: maybeWithAuth({}, user),
|
||||
body: JSON.stringify({
|
||||
endpoint: browserSubscription.endpoint,
|
||||
}),
|
||||
body: JSON.stringify({ topics, browser_subscription: browserSubscription }),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import Connection from "./Connection";
|
||||
import { NotificationType } from "./SubscriptionManager";
|
||||
import { hashCode } from "./utils";
|
||||
|
||||
const makeConnectionId = (subscription, user) =>
|
||||
|
|
@ -52,11 +51,9 @@ class ConnectionManager {
|
|||
const connectionId = makeConnectionId(s, user);
|
||||
return { ...s, user, connectionId };
|
||||
})
|
||||
// we want to create a ws for both sound-only and active browser notifications,
|
||||
// only background notifications don't need this as they come over web push.
|
||||
// however, if background notifications are muted, we again need the ws while
|
||||
// the page is active
|
||||
.filter((s) => s.notificationType !== NotificationType.BACKGROUND && s.mutedUntil !== 1);
|
||||
// background notifications don't need this as they come over web push.
|
||||
// however, if they are muted, we again need the ws while the page is active
|
||||
.filter((s) => !s.webPushEnabled && s.mutedUntil !== 1);
|
||||
|
||||
console.log();
|
||||
const targetIds = subscriptionsWithUsersAndConnectionId.map((s) => s.connectionId);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { openUrl, playSound, topicDisplayName, topicShortUrl, urlB64ToUint8Array
|
|||
import { formatMessage, formatTitleWithDefault } from "./notificationUtils";
|
||||
import prefs from "./Prefs";
|
||||
import logo from "../img/ntfy.png";
|
||||
import api from "./Api";
|
||||
|
||||
/**
|
||||
* The notifier is responsible for displaying desktop notifications. Note that not all modern browsers
|
||||
|
|
@ -45,44 +44,20 @@ class Notifier {
|
|||
}
|
||||
}
|
||||
|
||||
async unsubscribeWebPush(subscription) {
|
||||
try {
|
||||
const pushManager = await this.pushManager();
|
||||
const browserSubscription = await pushManager.getSubscription();
|
||||
if (!browserSubscription) {
|
||||
throw new Error("No browser subscription found");
|
||||
}
|
||||
await api.unsubscribeWebPush(subscription, browserSubscription);
|
||||
} catch (e) {
|
||||
console.error("[Notifier] Error unsubscribing from web push", e);
|
||||
}
|
||||
}
|
||||
|
||||
async subscribeWebPush(baseUrl, topic) {
|
||||
if (!this.supported() || !this.pushSupported() || !config.enable_web_push) {
|
||||
return {};
|
||||
async getBrowserSubscription() {
|
||||
if (!this.pushPossible()) {
|
||||
throw new Error("Unsupported or denied");
|
||||
}
|
||||
|
||||
// only subscribe to web push for the current server. this is a limitation of the web push API,
|
||||
// which only allows a single server per service worker origin.
|
||||
if (baseUrl !== config.base_url) {
|
||||
return {};
|
||||
}
|
||||
const pushManager = await this.pushManager();
|
||||
|
||||
try {
|
||||
const pushManager = await this.pushManager();
|
||||
const browserSubscription = await pushManager.subscribe({
|
||||
return (
|
||||
(await pushManager.getSubscription()) ??
|
||||
pushManager.subscribe({
|
||||
userVisibleOnly: true,
|
||||
applicationServerKey: urlB64ToUint8Array(config.web_push_public_key),
|
||||
});
|
||||
|
||||
await api.subscribeWebPush(baseUrl, topic, browserSubscription);
|
||||
console.log("[Notifier.subscribeWebPush] Successfully subscribed to web push");
|
||||
} catch (e) {
|
||||
console.error("[Notifier.subscribeWebPush] Error subscribing to web push", e);
|
||||
}
|
||||
|
||||
return {};
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
async pushManager() {
|
||||
|
|
@ -95,6 +70,10 @@ class Notifier {
|
|||
return registration.pushManager;
|
||||
}
|
||||
|
||||
notRequested() {
|
||||
return this.supported() && Notification.permission === "default";
|
||||
}
|
||||
|
||||
granted() {
|
||||
return this.supported() && Notification.permission === "granted";
|
||||
}
|
||||
|
|
@ -127,6 +106,10 @@ class Notifier {
|
|||
return config.enable_web_push && "serviceWorker" in navigator && "PushManager" in window;
|
||||
}
|
||||
|
||||
pushPossible() {
|
||||
return this.pushSupported() && this.contextSupported() && this.granted() && !this.iosSupportedButInstallRequired();
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if this is a HTTPS site, or served over localhost. Otherwise the Notification API
|
||||
* is not supported, see https://developer.mozilla.org/en-US/docs/Web/API/notification
|
||||
|
|
@ -136,7 +119,7 @@ class Notifier {
|
|||
}
|
||||
|
||||
iosSupportedButInstallRequired() {
|
||||
return "standalone" in window.navigator && window.navigator.standalone === false;
|
||||
return this.pushSupported() && "standalone" in window.navigator && window.navigator.standalone === false;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,9 @@
|
|||
import api from "./Api";
|
||||
import notifier from "./Notifier";
|
||||
import prefs from "./Prefs";
|
||||
import getDb from "./getDb";
|
||||
import { topicUrl } from "./utils";
|
||||
|
||||
/** @typedef {string} NotificationTypeEnum */
|
||||
|
||||
/** @enum {NotificationTypeEnum} */
|
||||
export const NotificationType = {
|
||||
/** sound-only */
|
||||
SOUND: "sound",
|
||||
/** browser notifications when there is an active tab, via websockets */
|
||||
BROWSER: "browser",
|
||||
/** web push notifications, regardless of whether the window is open */
|
||||
BACKGROUND: "background",
|
||||
};
|
||||
|
||||
class SubscriptionManager {
|
||||
constructor(db) {
|
||||
this.db = db;
|
||||
|
|
@ -31,6 +20,11 @@ class SubscriptionManager {
|
|||
);
|
||||
}
|
||||
|
||||
async webPushTopics() {
|
||||
const subscriptions = await this.db.subscriptions.where({ webPushEnabled: 1, mutedUntil: 0 }).toArray();
|
||||
return subscriptions.map(({ topic }) => topic);
|
||||
}
|
||||
|
||||
async get(subscriptionId) {
|
||||
return this.db.subscriptions.get(subscriptionId);
|
||||
}
|
||||
|
|
@ -47,14 +41,7 @@ class SubscriptionManager {
|
|||
return;
|
||||
}
|
||||
|
||||
await notifier.playSound();
|
||||
|
||||
// sound only
|
||||
if (subscription.notificationType === "sound") {
|
||||
return;
|
||||
}
|
||||
|
||||
await notifier.notify(subscription, notification, defaultClickAction);
|
||||
await Promise.all([notifier.playSound(), notifier.notify(subscription, notification, defaultClickAction)]);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -62,28 +49,25 @@ class SubscriptionManager {
|
|||
* @param {string} topic
|
||||
* @param {object} opts
|
||||
* @param {boolean} opts.internal
|
||||
* @param {NotificationTypeEnum} opts.notificationType
|
||||
* @param {boolean} opts.webPushEnabled
|
||||
* @returns
|
||||
*/
|
||||
async add(baseUrl, topic, opts = {}) {
|
||||
const id = topicUrl(baseUrl, topic);
|
||||
|
||||
if (opts.notificationType === "background") {
|
||||
await notifier.subscribeWebPush(baseUrl, topic);
|
||||
}
|
||||
|
||||
const existingSubscription = await this.get(id);
|
||||
if (existingSubscription) {
|
||||
return existingSubscription;
|
||||
}
|
||||
|
||||
const subscription = {
|
||||
...opts,
|
||||
id: topicUrl(baseUrl, topic),
|
||||
baseUrl,
|
||||
topic,
|
||||
mutedUntil: 0,
|
||||
last: null,
|
||||
...opts,
|
||||
webPushEnabled: opts.webPushEnabled ? 1 : 0,
|
||||
};
|
||||
|
||||
await this.db.subscriptions.put(subscription);
|
||||
|
|
@ -94,17 +78,16 @@ class SubscriptionManager {
|
|||
async syncFromRemote(remoteSubscriptions, remoteReservations) {
|
||||
console.log(`[SubscriptionManager] Syncing subscriptions from remote`, remoteSubscriptions);
|
||||
|
||||
const notificationType = (await prefs.webPushDefaultEnabled()) === "enabled" ? "background" : "browser";
|
||||
const webPushEnabled = (await prefs.webPushDefaultEnabled()) === "enabled";
|
||||
|
||||
// Add remote subscriptions
|
||||
const remoteIds = await Promise.all(
|
||||
remoteSubscriptions.map(async (remote) => {
|
||||
const local = await this.add(remote.base_url, remote.topic, {
|
||||
notificationType,
|
||||
});
|
||||
const reservation = remoteReservations?.find((r) => remote.base_url === config.base_url && remote.topic === r.topic) || null;
|
||||
|
||||
await this.update(local.id, {
|
||||
const local = await this.add(remote.base_url, remote.topic, {
|
||||
// only if same-origin subscription
|
||||
webPushEnabled: webPushEnabled && remote.base_url === config.base_url,
|
||||
displayName: remote.display_name, // May be undefined
|
||||
reservation, // May be null!
|
||||
});
|
||||
|
|
@ -126,6 +109,12 @@ class SubscriptionManager {
|
|||
);
|
||||
}
|
||||
|
||||
async refreshWebPushSubscriptions(presetTopics) {
|
||||
const topics = presetTopics ?? (await this.webPushTopics());
|
||||
|
||||
await api.updateWebPushSubscriptions(topics, await notifier.getBrowserSubscription());
|
||||
}
|
||||
|
||||
async updateState(subscriptionId, state) {
|
||||
this.db.subscriptions.update(subscriptionId, { state });
|
||||
}
|
||||
|
|
@ -133,10 +122,6 @@ class SubscriptionManager {
|
|||
async remove(subscription) {
|
||||
await this.db.subscriptions.delete(subscription.id);
|
||||
await this.db.notifications.where({ subscriptionId: subscription.id }).delete();
|
||||
|
||||
if (subscription.notificationType === NotificationType.BACKGROUND) {
|
||||
await notifier.unsubscribeWebPush(subscription);
|
||||
}
|
||||
}
|
||||
|
||||
async first() {
|
||||
|
|
@ -228,59 +213,14 @@ class SubscriptionManager {
|
|||
await this.db.subscriptions.update(subscriptionId, {
|
||||
mutedUntil,
|
||||
});
|
||||
|
||||
const subscription = await this.get(subscriptionId);
|
||||
|
||||
if (subscription.notificationType === "background") {
|
||||
if (mutedUntil === 1) {
|
||||
await notifier.unsubscribeWebPush(subscription);
|
||||
} else {
|
||||
await notifier.subscribeWebPush(subscription.baseUrl, subscription.topic);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {object} subscription
|
||||
* @param {NotificationTypeEnum} newNotificationType
|
||||
* @returns
|
||||
*/
|
||||
async setNotificationType(subscription, newNotificationType) {
|
||||
const oldNotificationType = subscription.notificationType ?? "browser";
|
||||
|
||||
if (oldNotificationType === newNotificationType) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (oldNotificationType === "background") {
|
||||
await notifier.unsubscribeWebPush(subscription);
|
||||
} else if (newNotificationType === "background") {
|
||||
await notifier.subscribeWebPush(subscription.baseUrl, subscription.topic);
|
||||
}
|
||||
|
||||
async toggleBackgroundNotifications(subscription) {
|
||||
await this.db.subscriptions.update(subscription.id, {
|
||||
notificationType: newNotificationType,
|
||||
webPushEnabled: subscription.webPushEnabled === 1 ? 0 : 1,
|
||||
});
|
||||
}
|
||||
|
||||
// for logout/delete, unsubscribe first to prevent receiving dangling notifications
|
||||
async unsubscribeAllWebPush() {
|
||||
const subscriptions = await this.db.subscriptions.where({ notificationType: "background" }).toArray();
|
||||
await Promise.all(subscriptions.map((subscription) => notifier.unsubscribeWebPush(subscription)));
|
||||
}
|
||||
|
||||
async refreshWebPushSubscriptions() {
|
||||
const subscriptions = await this.db.subscriptions.where({ notificationType: "background" }).toArray();
|
||||
const browserSubscription = await (await navigator.serviceWorker.getRegistration())?.pushManager?.getSubscription();
|
||||
|
||||
if (browserSubscription) {
|
||||
await Promise.all(subscriptions.map((subscription) => notifier.subscribeWebPush(subscription.baseUrl, subscription.topic)));
|
||||
} else {
|
||||
await Promise.all(subscriptions.map((subscription) => this.setNotificationType(subscription, "sound")));
|
||||
}
|
||||
}
|
||||
|
||||
async setDisplayName(subscriptionId, displayName) {
|
||||
await this.db.subscriptions.update(subscriptionId, {
|
||||
displayName,
|
||||
|
|
|
|||
|
|
@ -1,16 +1,40 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { useLiveQuery } from "dexie-react-hooks";
|
||||
import notifier from "./Notifier";
|
||||
import subscriptionManager from "./SubscriptionManager";
|
||||
|
||||
const onMessage = () => {
|
||||
notifier.playSound();
|
||||
export const useWebPushUpdateWorker = () => {
|
||||
const topics = useLiveQuery(() => subscriptionManager.webPushTopics());
|
||||
const [lastTopics, setLastTopics] = useState();
|
||||
|
||||
useEffect(() => {
|
||||
if (!notifier.pushPossible() || JSON.stringify(topics) === JSON.stringify(lastTopics)) {
|
||||
return;
|
||||
}
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
console.log("[useWebPushUpdateWorker] Refreshing web push subscriptions");
|
||||
|
||||
await subscriptionManager.refreshWebPushSubscriptions(topics);
|
||||
|
||||
setLastTopics(topics);
|
||||
} catch (e) {
|
||||
console.error("[useWebPushUpdateWorker] Error refreshing web push subscriptions", e);
|
||||
}
|
||||
})();
|
||||
}, [topics, lastTopics]);
|
||||
};
|
||||
|
||||
const delayMillis = 2000; // 2 seconds
|
||||
const intervalMillis = 300000; // 5 minutes
|
||||
const intervalMillis = 5 * 60 * 1_000; // 5 minutes
|
||||
const updateIntervalMillis = 60 * 60 * 1_000; // 1 hour
|
||||
|
||||
class WebPushWorker {
|
||||
class WebPushRefreshWorker {
|
||||
constructor() {
|
||||
this.timer = null;
|
||||
this.lastUpdate = null;
|
||||
this.messageHandler = this.onMessage.bind(this);
|
||||
this.visibilityHandler = this.onVisibilityChange.bind(this);
|
||||
}
|
||||
|
||||
startWorker() {
|
||||
|
|
@ -19,28 +43,42 @@ class WebPushWorker {
|
|||
}
|
||||
|
||||
this.timer = setInterval(() => this.updateSubscriptions(), intervalMillis);
|
||||
setTimeout(() => this.updateSubscriptions(), delayMillis);
|
||||
|
||||
this.broadcastChannel = new BroadcastChannel("web-push-broadcast");
|
||||
this.broadcastChannel.addEventListener("message", onMessage);
|
||||
this.broadcastChannel.addEventListener("message", this.messageHandler);
|
||||
|
||||
document.addEventListener("visibilitychange", this.visibilityHandler);
|
||||
}
|
||||
|
||||
stopWorker() {
|
||||
clearTimeout(this.timer);
|
||||
|
||||
this.broadcastChannel.removeEventListener("message", onMessage);
|
||||
this.broadcastChannel.removeEventListener("message", this.messageHandler);
|
||||
this.broadcastChannel.close();
|
||||
|
||||
document.removeEventListener("visibilitychange", this.visibilityHandler);
|
||||
}
|
||||
|
||||
onMessage() {
|
||||
notifier.playSound();
|
||||
}
|
||||
|
||||
onVisibilityChange() {
|
||||
if (document.visibilityState === "visible") {
|
||||
this.updateSubscriptions();
|
||||
}
|
||||
}
|
||||
|
||||
async updateSubscriptions() {
|
||||
try {
|
||||
console.log("[WebPushBroadcastListener] Refreshing web push subscriptions");
|
||||
if (!notifier.pushPossible()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.lastUpdate || Date.now() - this.lastUpdate > updateIntervalMillis) {
|
||||
await subscriptionManager.refreshWebPushSubscriptions();
|
||||
} catch (e) {
|
||||
console.error("[WebPushBroadcastListener] Error refreshing web push subscriptions", e);
|
||||
this.lastUpdate = Date.now();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default new WebPushWorker();
|
||||
export const webPushRefreshWorker = new WebPushRefreshWorker();
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const getDbBase = (username) => {
|
|||
const db = new Dexie(dbName);
|
||||
|
||||
db.version(2).stores({
|
||||
subscriptions: "&id,baseUrl,notificationType",
|
||||
subscriptions: "&id,baseUrl,[webPushEnabled+mutedUntil]",
|
||||
notifications: "&id,subscriptionId,time,new,[subscriptionId+new]", // compound key for query performance
|
||||
users: "&baseUrl,username",
|
||||
prefs: "&key",
|
||||
|
|
|
|||
|
|
@ -20,9 +20,8 @@ export const topicUrlJson = (baseUrl, topic) => `${topicUrl(baseUrl, topic)}/jso
|
|||
export const topicUrlJsonPoll = (baseUrl, topic) => `${topicUrlJson(baseUrl, topic)}?poll=1`;
|
||||
export const topicUrlJsonPollWithSince = (baseUrl, topic, since) => `${topicUrlJson(baseUrl, topic)}?poll=1&since=${since}`;
|
||||
export const topicUrlAuth = (baseUrl, topic) => `${topicUrl(baseUrl, topic)}/auth`;
|
||||
export const topicUrlWebPushSubscribe = (baseUrl, topic) => `${topicUrl(baseUrl, topic)}/web-push/subscribe`;
|
||||
export const topicUrlWebPushUnsubscribe = (baseUrl, topic) => `${topicUrl(baseUrl, topic)}/web-push/unsubscribe`;
|
||||
export const topicShortUrl = (baseUrl, topic) => shortUrl(topicUrl(baseUrl, topic));
|
||||
export const webPushSubscriptionsUrl = (baseUrl) => `${baseUrl}/v1/account/web-push`;
|
||||
export const accountUrl = (baseUrl) => `${baseUrl}/v1/account`;
|
||||
export const accountPasswordUrl = (baseUrl) => `${baseUrl}/v1/account/password`;
|
||||
export const accountTokenUrl = (baseUrl) => `${baseUrl}/v1/account/token`;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue