Add PWA, service worker and Web Push
- Use new notification request/opt-in flow for push - Implement unsubscribing - Implement muting - Implement emojis in title - Add iOS specific PWA warning - Don’t use websockets when web push is enabled - Fix duplicate notifications - Implement default web push setting - Implement changing subscription type - Implement web push subscription refresh - Implement web push notification click
This commit is contained in:
nimbleghost
parent
733ef4664b
commit
ff5c854192
53 changed files with 4363 additions and 249 deletions
|
|
@ -382,6 +382,10 @@ class AccountApi {
|
|||
setTimeout(() => this.runWorker(), delayMillis);
|
||||
}
|
||||
|
||||
stopWorker() {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
|
||||
async runWorker() {
|
||||
if (!session.token()) {
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,9 @@ import {
|
|||
topicUrlAuth,
|
||||
topicUrlJsonPoll,
|
||||
topicUrlJsonPollWithSince,
|
||||
topicUrlWebPushSubscribe,
|
||||
topicUrlWebPushUnsubscribe,
|
||||
webPushConfigUrl,
|
||||
} from "./utils";
|
||||
import userManager from "./UserManager";
|
||||
import { fetchOrThrow } from "./errors";
|
||||
|
|
@ -113,6 +116,62 @@ class Api {
|
|||
}
|
||||
throw new Error(`Unexpected server response ${response.status}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {Promise<{ public_key: string } | undefined>}
|
||||
*/
|
||||
async getWebPushConfig(baseUrl) {
|
||||
const response = await fetch(webPushConfigUrl(baseUrl));
|
||||
|
||||
if (response.ok) {
|
||||
return response.json();
|
||||
}
|
||||
|
||||
if (response.status === 404) {
|
||||
// web push is not enabled
|
||||
return undefined;
|
||||
}
|
||||
|
||||
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}`);
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: "POST",
|
||||
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) {
|
||||
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: subscription.webPushEndpoint }),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
return true;
|
||||
}
|
||||
|
||||
throw new Error(`Unexpected server response ${response.status}`);
|
||||
}
|
||||
}
|
||||
|
||||
const api = new Api();
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import Connection from "./Connection";
|
||||
import { NotificationType } from "./SubscriptionManager";
|
||||
import { hashCode } from "./utils";
|
||||
|
||||
const makeConnectionId = async (subscription, user) =>
|
||||
const makeConnectionId = (subscription, user) =>
|
||||
user ? hashCode(`${subscription.id}|${user.username}|${user.password ?? ""}|${user.token ?? ""}`) : hashCode(`${subscription.id}`);
|
||||
|
||||
/**
|
||||
|
|
@ -45,13 +46,19 @@ class ConnectionManager {
|
|||
return;
|
||||
}
|
||||
console.log(`[ConnectionManager] Refreshing connections`);
|
||||
const subscriptionsWithUsersAndConnectionId = await Promise.all(
|
||||
subscriptions.map(async (s) => {
|
||||
const subscriptionsWithUsersAndConnectionId = subscriptions
|
||||
.map((s) => {
|
||||
const [user] = users.filter((u) => u.baseUrl === s.baseUrl);
|
||||
const connectionId = await makeConnectionId(s, user);
|
||||
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);
|
||||
|
||||
console.log();
|
||||
const targetIds = subscriptionsWithUsersAndConnectionId.map((s) => s.connectionId);
|
||||
const deletedIds = Array.from(this.connections.keys()).filter((id) => !targetIds.includes(id));
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,18 @@
|
|||
import { formatMessage, formatTitleWithDefault, openUrl, playSound, topicDisplayName, topicShortUrl } from "./utils";
|
||||
import { formatMessage, formatTitleWithDefault, openUrl, playSound, topicDisplayName, topicShortUrl, urlB64ToUint8Array } from "./utils";
|
||||
import prefs from "./Prefs";
|
||||
import subscriptionManager from "./SubscriptionManager";
|
||||
import logo from "../img/ntfy.png";
|
||||
import api from "./Api";
|
||||
|
||||
/**
|
||||
* 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(subscriptionId, notification, onClickFallback) {
|
||||
async notify(subscription, notification, onClickFallback) {
|
||||
if (!this.supported()) {
|
||||
return;
|
||||
}
|
||||
const subscription = await subscriptionManager.get(subscriptionId);
|
||||
const shouldNotify = await this.shouldNotify(subscription, notification);
|
||||
if (!shouldNotify) {
|
||||
return;
|
||||
}
|
||||
|
||||
const shortUrl = topicShortUrl(subscription.baseUrl, subscription.topic);
|
||||
const displayName = topicDisplayName(subscription);
|
||||
const message = formatMessage(notification);
|
||||
|
|
@ -26,6 +22,7 @@ class Notifier {
|
|||
console.log(`[Notifier, ${shortUrl}] Displaying notification ${notification.id}: ${message}`);
|
||||
const n = new Notification(title, {
|
||||
body: message,
|
||||
tag: subscription.id,
|
||||
icon: logo,
|
||||
});
|
||||
if (notification.click) {
|
||||
|
|
@ -33,45 +30,88 @@ class Notifier {
|
|||
} else {
|
||||
n.onclick = () => onClickFallback(subscription);
|
||||
}
|
||||
}
|
||||
|
||||
async playSound() {
|
||||
// Play sound
|
||||
const sound = await prefs.sound();
|
||||
if (sound && sound !== "none") {
|
||||
try {
|
||||
await playSound(sound);
|
||||
} catch (e) {
|
||||
console.log(`[Notifier, ${shortUrl}] Error playing audio`, e);
|
||||
console.log(`[Notifier] Error playing audio`, e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async unsubscribeWebPush(subscription) {
|
||||
try {
|
||||
await api.unsubscribeWebPush(subscription);
|
||||
} catch (e) {
|
||||
console.error("[Notifier.subscribeWebPush] Error subscribing to web push", e);
|
||||
}
|
||||
}
|
||||
|
||||
async subscribeWebPush(baseUrl, topic) {
|
||||
if (!this.supported() || !this.pushSupported()) {
|
||||
return {};
|
||||
}
|
||||
|
||||
// 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 registration = await navigator.serviceWorker.getRegistration();
|
||||
|
||||
if (!registration) {
|
||||
console.log("[Notifier.subscribeWebPush] Web push supported but no service worker registration found, skipping");
|
||||
return {};
|
||||
}
|
||||
|
||||
try {
|
||||
const webPushConfig = await api.getWebPushConfig(baseUrl);
|
||||
|
||||
if (!webPushConfig) {
|
||||
console.log("[Notifier.subscribeWebPush] Web push not configured on server");
|
||||
}
|
||||
|
||||
const browserSubscription = await registration.pushManager.subscribe({
|
||||
userVisibleOnly: true,
|
||||
applicationServerKey: urlB64ToUint8Array(webPushConfig.public_key),
|
||||
});
|
||||
|
||||
await api.subscribeWebPush(baseUrl, topic, browserSubscription);
|
||||
|
||||
console.log("[Notifier.subscribeWebPush] Successfully subscribed to web push");
|
||||
|
||||
return browserSubscription;
|
||||
} catch (e) {
|
||||
console.error("[Notifier.subscribeWebPush] Error subscribing to web push", e);
|
||||
}
|
||||
|
||||
return {};
|
||||
}
|
||||
|
||||
granted() {
|
||||
return this.supported() && Notification.permission === "granted";
|
||||
}
|
||||
|
||||
maybeRequestPermission(cb) {
|
||||
if (!this.supported()) {
|
||||
cb(false);
|
||||
return;
|
||||
}
|
||||
if (!this.granted()) {
|
||||
Notification.requestPermission().then((permission) => {
|
||||
const granted = permission === "granted";
|
||||
cb(granted);
|
||||
});
|
||||
}
|
||||
denied() {
|
||||
return this.supported() && Notification.permission === "denied";
|
||||
}
|
||||
|
||||
async shouldNotify(subscription, notification) {
|
||||
if (subscription.mutedUntil === 1) {
|
||||
async maybeRequestPermission() {
|
||||
if (!this.supported()) {
|
||||
return false;
|
||||
}
|
||||
const priority = notification.priority ? notification.priority : 3;
|
||||
const minPriority = await prefs.minPriority();
|
||||
if (priority < minPriority) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
|
||||
return new Promise((resolve) => {
|
||||
Notification.requestPermission((permission) => {
|
||||
resolve(permission === "granted");
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
supported() {
|
||||
|
|
@ -82,6 +122,10 @@ class Notifier {
|
|||
return "Notification" in window;
|
||||
}
|
||||
|
||||
pushSupported() {
|
||||
return "serviceWorker" in navigator && "PushManager" in window;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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
|
||||
|
|
@ -89,6 +133,10 @@ class Notifier {
|
|||
contextSupported() {
|
||||
return window.location.protocol === "https:" || window.location.hostname.match("^127.") || window.location.hostname === "localhost";
|
||||
}
|
||||
|
||||
iosSupportedButInstallRequired() {
|
||||
return "standalone" in window.navigator && window.navigator.standalone === false;
|
||||
}
|
||||
}
|
||||
|
||||
const notifier = new Notifier();
|
||||
|
|
|
|||
|
|
@ -18,6 +18,10 @@ class Poller {
|
|||
setTimeout(() => this.pollAll(), delayMillis);
|
||||
}
|
||||
|
||||
stopWorker() {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
|
||||
async pollAll() {
|
||||
console.log(`[Poller] Polling all subscriptions`);
|
||||
const subscriptions = await subscriptionManager.all();
|
||||
|
|
@ -47,14 +51,13 @@ class Poller {
|
|||
}
|
||||
|
||||
pollInBackground(subscription) {
|
||||
const fn = async () => {
|
||||
(async () => {
|
||||
try {
|
||||
await this.poll(subscription);
|
||||
} catch (e) {
|
||||
console.error(`[App] Error polling subscription ${subscription.id}`, e);
|
||||
}
|
||||
};
|
||||
setTimeout(() => fn(), 0);
|
||||
})();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,33 +1,45 @@
|
|||
import db from "./db";
|
||||
import getDb from "./getDb";
|
||||
|
||||
class Prefs {
|
||||
constructor(db) {
|
||||
this.db = db;
|
||||
}
|
||||
|
||||
async setSound(sound) {
|
||||
db.prefs.put({ key: "sound", value: sound.toString() });
|
||||
this.db.prefs.put({ key: "sound", value: sound.toString() });
|
||||
}
|
||||
|
||||
async sound() {
|
||||
const sound = await db.prefs.get("sound");
|
||||
const sound = await this.db.prefs.get("sound");
|
||||
return sound ? sound.value : "ding";
|
||||
}
|
||||
|
||||
async setMinPriority(minPriority) {
|
||||
db.prefs.put({ key: "minPriority", value: minPriority.toString() });
|
||||
this.db.prefs.put({ key: "minPriority", value: minPriority.toString() });
|
||||
}
|
||||
|
||||
async minPriority() {
|
||||
const minPriority = await db.prefs.get("minPriority");
|
||||
const minPriority = await this.db.prefs.get("minPriority");
|
||||
return minPriority ? Number(minPriority.value) : 1;
|
||||
}
|
||||
|
||||
async setDeleteAfter(deleteAfter) {
|
||||
db.prefs.put({ key: "deleteAfter", value: deleteAfter.toString() });
|
||||
this.db.prefs.put({ key: "deleteAfter", value: deleteAfter.toString() });
|
||||
}
|
||||
|
||||
async deleteAfter() {
|
||||
const deleteAfter = await db.prefs.get("deleteAfter");
|
||||
const deleteAfter = await this.db.prefs.get("deleteAfter");
|
||||
return deleteAfter ? Number(deleteAfter.value) : 604800; // Default is one week
|
||||
}
|
||||
|
||||
async webPushDefaultEnabled() {
|
||||
const obj = await this.db.prefs.get("webPushDefaultEnabled");
|
||||
return obj?.value ?? "initial";
|
||||
}
|
||||
|
||||
async setWebPushDefaultEnabled(enabled) {
|
||||
await this.db.prefs.put({ key: "webPushDefaultEnabled", value: enabled ? "enabled" : "disabled" });
|
||||
}
|
||||
}
|
||||
|
||||
const prefs = new Prefs();
|
||||
export default prefs;
|
||||
export default new Prefs(getDb());
|
||||
|
|
|
|||
|
|
@ -18,6 +18,10 @@ class Pruner {
|
|||
setTimeout(() => this.prune(), delayMillis);
|
||||
}
|
||||
|
||||
stopWorker() {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
|
||||
async prune() {
|
||||
const deleteAfterSeconds = await prefs.deleteAfter();
|
||||
const pruneThresholdTimestamp = Math.round(Date.now() / 1000) - deleteAfterSeconds;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,22 @@
|
|||
import sessionReplica from "./SessionReplica";
|
||||
|
||||
class Session {
|
||||
constructor(replica) {
|
||||
this.replica = replica;
|
||||
}
|
||||
|
||||
store(username, token) {
|
||||
localStorage.setItem("user", username);
|
||||
localStorage.setItem("token", token);
|
||||
|
||||
this.replica.store(username, token);
|
||||
}
|
||||
|
||||
reset() {
|
||||
localStorage.removeItem("user");
|
||||
localStorage.removeItem("token");
|
||||
|
||||
this.replica.reset();
|
||||
}
|
||||
|
||||
resetAndRedirect(url) {
|
||||
|
|
@ -27,5 +37,5 @@ class Session {
|
|||
}
|
||||
}
|
||||
|
||||
const session = new Session();
|
||||
const session = new Session(sessionReplica);
|
||||
export default session;
|
||||
|
|
|
|||
44
web/src/app/SessionReplica.js
Normal file
44
web/src/app/SessionReplica.js
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import Dexie from "dexie";
|
||||
|
||||
// Store to IndexedDB as well so that the
|
||||
// service worker can access it
|
||||
// TODO: Probably make everything depend on this and not use localStorage,
|
||||
// but that's a larger refactoring effort for another PR
|
||||
|
||||
class SessionReplica {
|
||||
constructor() {
|
||||
const db = new Dexie("session-replica");
|
||||
|
||||
db.version(1).stores({
|
||||
keyValueStore: "&key",
|
||||
});
|
||||
|
||||
this.db = db;
|
||||
}
|
||||
|
||||
async store(username, token) {
|
||||
try {
|
||||
await this.db.keyValueStore.bulkPut([
|
||||
{ key: "user", value: username },
|
||||
{ key: "token", value: token },
|
||||
]);
|
||||
} catch (e) {
|
||||
console.error("[Session] Error replicating session to IndexedDB", e);
|
||||
}
|
||||
}
|
||||
|
||||
async reset() {
|
||||
try {
|
||||
await this.db.delete();
|
||||
} catch (e) {
|
||||
console.error("[Session] Error resetting session on IndexedDB", e);
|
||||
}
|
||||
}
|
||||
|
||||
async username() {
|
||||
return (await this.db.keyValueStore.get({ key: "user" }))?.value;
|
||||
}
|
||||
}
|
||||
|
||||
const sessionReplica = new SessionReplica();
|
||||
export default sessionReplica;
|
||||
|
|
@ -1,47 +1,112 @@
|
|||
import db from "./db";
|
||||
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;
|
||||
}
|
||||
|
||||
/** All subscriptions, including "new count"; this is a JOIN, see https://dexie.org/docs/API-Reference#joining */
|
||||
async all() {
|
||||
const subscriptions = await db.subscriptions.toArray();
|
||||
const subscriptions = await this.db.subscriptions.toArray();
|
||||
return Promise.all(
|
||||
subscriptions.map(async (s) => ({
|
||||
...s,
|
||||
new: await db.notifications.where({ subscriptionId: s.id, new: 1 }).count(),
|
||||
new: await this.db.notifications.where({ subscriptionId: s.id, new: 1 }).count(),
|
||||
}))
|
||||
);
|
||||
}
|
||||
|
||||
async get(subscriptionId) {
|
||||
return db.subscriptions.get(subscriptionId);
|
||||
return this.db.subscriptions.get(subscriptionId);
|
||||
}
|
||||
|
||||
async add(baseUrl, topic, internal) {
|
||||
async notify(subscriptionId, notification, defaultClickAction) {
|
||||
const subscription = await this.get(subscriptionId);
|
||||
|
||||
if (subscription.mutedUntil === 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
const priority = notification.priority ?? 3;
|
||||
if (priority < (await prefs.minPriority())) {
|
||||
return;
|
||||
}
|
||||
|
||||
await notifier.playSound();
|
||||
|
||||
// sound only
|
||||
if (subscription.notificationType === "sound") {
|
||||
return;
|
||||
}
|
||||
|
||||
await notifier.notify(subscription, notification, defaultClickAction);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} baseUrl
|
||||
* @param {string} topic
|
||||
* @param {object} opts
|
||||
* @param {boolean} opts.internal
|
||||
* @param {NotificationTypeEnum} opts.notificationType
|
||||
* @returns
|
||||
*/
|
||||
async add(baseUrl, topic, opts = {}) {
|
||||
const id = topicUrl(baseUrl, topic);
|
||||
|
||||
const webPushFields = opts.notificationType === "background" ? await notifier.subscribeWebPush(baseUrl, topic) : {};
|
||||
|
||||
const existingSubscription = await this.get(id);
|
||||
if (existingSubscription) {
|
||||
if (webPushFields.endpoint) {
|
||||
await this.db.subscriptions.update(existingSubscription.id, {
|
||||
webPushEndpoint: webPushFields.endpoint,
|
||||
});
|
||||
}
|
||||
|
||||
return existingSubscription;
|
||||
}
|
||||
|
||||
const subscription = {
|
||||
id: topicUrl(baseUrl, topic),
|
||||
baseUrl,
|
||||
topic,
|
||||
mutedUntil: 0,
|
||||
last: null,
|
||||
internal: internal || false,
|
||||
...opts,
|
||||
webPushEndpoint: webPushFields.endpoint,
|
||||
};
|
||||
await db.subscriptions.put(subscription);
|
||||
|
||||
await this.db.subscriptions.put(subscription);
|
||||
|
||||
return subscription;
|
||||
}
|
||||
|
||||
async syncFromRemote(remoteSubscriptions, remoteReservations) {
|
||||
console.log(`[SubscriptionManager] Syncing subscriptions from remote`, remoteSubscriptions);
|
||||
|
||||
const notificationType = (await prefs.webPushDefaultEnabled()) === "enabled" ? "background" : "browser";
|
||||
|
||||
// Add remote subscriptions
|
||||
const remoteIds = await Promise.all(
|
||||
remoteSubscriptions.map(async (remote) => {
|
||||
const local = await this.add(remote.base_url, remote.topic, false);
|
||||
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, {
|
||||
|
|
@ -54,29 +119,33 @@ class SubscriptionManager {
|
|||
);
|
||||
|
||||
// Remove local subscriptions that do not exist remotely
|
||||
const localSubscriptions = await db.subscriptions.toArray();
|
||||
const localSubscriptions = await this.db.subscriptions.toArray();
|
||||
|
||||
await Promise.all(
|
||||
localSubscriptions.map(async (local) => {
|
||||
const remoteExists = remoteIds.includes(local.id);
|
||||
if (!local.internal && !remoteExists) {
|
||||
await this.remove(local.id);
|
||||
await this.remove(local);
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
async updateState(subscriptionId, state) {
|
||||
db.subscriptions.update(subscriptionId, { state });
|
||||
this.db.subscriptions.update(subscriptionId, { state });
|
||||
}
|
||||
|
||||
async remove(subscriptionId) {
|
||||
await db.subscriptions.delete(subscriptionId);
|
||||
await db.notifications.where({ subscriptionId }).delete();
|
||||
async remove(subscription) {
|
||||
await this.db.subscriptions.delete(subscription.id);
|
||||
await this.db.notifications.where({ subscriptionId: subscription.id }).delete();
|
||||
|
||||
if (subscription.webPushEndpoint) {
|
||||
await notifier.unsubscribeWebPush(subscription);
|
||||
}
|
||||
}
|
||||
|
||||
async first() {
|
||||
return db.subscriptions.toCollection().first(); // May be undefined
|
||||
return this.db.subscriptions.toCollection().first(); // May be undefined
|
||||
}
|
||||
|
||||
async getNotifications(subscriptionId) {
|
||||
|
|
@ -84,7 +153,7 @@ class SubscriptionManager {
|
|||
// It's actually fine, because the reading and filtering is quite fast. The rendering is what's
|
||||
// killing performance. See https://dexie.org/docs/Collection/Collection.offset()#a-better-paging-approach
|
||||
|
||||
return db.notifications
|
||||
return this.db.notifications
|
||||
.orderBy("time") // Sort by time first
|
||||
.filter((n) => n.subscriptionId === subscriptionId)
|
||||
.reverse()
|
||||
|
|
@ -92,7 +161,7 @@ class SubscriptionManager {
|
|||
}
|
||||
|
||||
async getAllNotifications() {
|
||||
return db.notifications
|
||||
return this.db.notifications
|
||||
.orderBy("time") // Efficient, see docs
|
||||
.reverse()
|
||||
.toArray();
|
||||
|
|
@ -100,18 +169,19 @@ class SubscriptionManager {
|
|||
|
||||
/** Adds notification, or returns false if it already exists */
|
||||
async addNotification(subscriptionId, notification) {
|
||||
const exists = await db.notifications.get(notification.id);
|
||||
const exists = await this.db.notifications.get(notification.id);
|
||||
if (exists) {
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
await db.notifications.add({
|
||||
// sw.js duplicates this logic, so if you change it here, change it there too
|
||||
await this.db.notifications.add({
|
||||
...notification,
|
||||
subscriptionId,
|
||||
// New marker (used for bubble indicator); cannot be boolean; Dexie index limitation
|
||||
new: 1,
|
||||
}); // FIXME consider put() for double tab
|
||||
await db.subscriptions.update(subscriptionId, {
|
||||
await this.db.subscriptions.update(subscriptionId, {
|
||||
last: notification.id,
|
||||
});
|
||||
} catch (e) {
|
||||
|
|
@ -124,19 +194,19 @@ class SubscriptionManager {
|
|||
async addNotifications(subscriptionId, notifications) {
|
||||
const notificationsWithSubscriptionId = notifications.map((notification) => ({ ...notification, subscriptionId }));
|
||||
const lastNotificationId = notifications.at(-1).id;
|
||||
await db.notifications.bulkPut(notificationsWithSubscriptionId);
|
||||
await db.subscriptions.update(subscriptionId, {
|
||||
await this.db.notifications.bulkPut(notificationsWithSubscriptionId);
|
||||
await this.db.subscriptions.update(subscriptionId, {
|
||||
last: lastNotificationId,
|
||||
});
|
||||
}
|
||||
|
||||
async updateNotification(notification) {
|
||||
const exists = await db.notifications.get(notification.id);
|
||||
const exists = await this.db.notifications.get(notification.id);
|
||||
if (!exists) {
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
await db.notifications.put({ ...notification });
|
||||
await this.db.notifications.put({ ...notification });
|
||||
} catch (e) {
|
||||
console.error(`[SubscriptionManager] Error updating notification`, e);
|
||||
}
|
||||
|
|
@ -144,47 +214,105 @@ class SubscriptionManager {
|
|||
}
|
||||
|
||||
async deleteNotification(notificationId) {
|
||||
await db.notifications.delete(notificationId);
|
||||
await this.db.notifications.delete(notificationId);
|
||||
}
|
||||
|
||||
async deleteNotifications(subscriptionId) {
|
||||
await db.notifications.where({ subscriptionId }).delete();
|
||||
await this.db.notifications.where({ subscriptionId }).delete();
|
||||
}
|
||||
|
||||
async markNotificationRead(notificationId) {
|
||||
await db.notifications.where({ id: notificationId }).modify({ new: 0 });
|
||||
await this.db.notifications.where({ id: notificationId }).modify({ new: 0 });
|
||||
}
|
||||
|
||||
async markNotificationsRead(subscriptionId) {
|
||||
await db.notifications.where({ subscriptionId, new: 1 }).modify({ new: 0 });
|
||||
await this.db.notifications.where({ subscriptionId, new: 1 }).modify({ new: 0 });
|
||||
}
|
||||
|
||||
async setMutedUntil(subscriptionId, mutedUntil) {
|
||||
await db.subscriptions.update(subscriptionId, {
|
||||
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 {
|
||||
const webPushFields = await notifier.subscribeWebPush(subscription.baseUrl, subscription.topic);
|
||||
await this.db.subscriptions.update(subscriptionId, {
|
||||
webPushEndpoint: webPushFields.endpoint,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {object} subscription
|
||||
* @param {NotificationTypeEnum} newNotificationType
|
||||
* @returns
|
||||
*/
|
||||
async setNotificationType(subscription, newNotificationType) {
|
||||
const oldNotificationType = subscription.notificationType ?? "browser";
|
||||
|
||||
if (oldNotificationType === newNotificationType) {
|
||||
return;
|
||||
}
|
||||
|
||||
let { webPushEndpoint } = subscription;
|
||||
|
||||
if (oldNotificationType === "background") {
|
||||
await notifier.unsubscribeWebPush(subscription);
|
||||
webPushEndpoint = undefined;
|
||||
} else if (newNotificationType === "background") {
|
||||
const webPushFields = await notifier.subscribeWebPush(subscription.baseUrl, subscription.topic);
|
||||
webPushEndpoint = webPushFields.webPushEndpoint;
|
||||
}
|
||||
|
||||
await this.db.subscriptions.update(subscription.id, {
|
||||
notificationType: newNotificationType,
|
||||
webPushEndpoint,
|
||||
});
|
||||
}
|
||||
|
||||
// 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 db.subscriptions.update(subscriptionId, {
|
||||
await this.db.subscriptions.update(subscriptionId, {
|
||||
displayName,
|
||||
});
|
||||
}
|
||||
|
||||
async setReservation(subscriptionId, reservation) {
|
||||
await db.subscriptions.update(subscriptionId, {
|
||||
await this.db.subscriptions.update(subscriptionId, {
|
||||
reservation,
|
||||
});
|
||||
}
|
||||
|
||||
async update(subscriptionId, params) {
|
||||
await db.subscriptions.update(subscriptionId, params);
|
||||
await this.db.subscriptions.update(subscriptionId, params);
|
||||
}
|
||||
|
||||
async pruneNotifications(thresholdTimestamp) {
|
||||
await db.notifications.where("time").below(thresholdTimestamp).delete();
|
||||
await this.db.notifications.where("time").below(thresholdTimestamp).delete();
|
||||
}
|
||||
}
|
||||
|
||||
const subscriptionManager = new SubscriptionManager();
|
||||
export default subscriptionManager;
|
||||
export default new SubscriptionManager(getDb());
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
import db from "./db";
|
||||
import getDb from "./getDb";
|
||||
import session from "./Session";
|
||||
|
||||
class UserManager {
|
||||
constructor(db) {
|
||||
this.db = db;
|
||||
}
|
||||
|
||||
async all() {
|
||||
const users = await db.users.toArray();
|
||||
const users = await this.db.users.toArray();
|
||||
if (session.exists()) {
|
||||
users.unshift(this.localUser());
|
||||
}
|
||||
|
|
@ -14,21 +18,21 @@ class UserManager {
|
|||
if (session.exists() && baseUrl === config.base_url) {
|
||||
return this.localUser();
|
||||
}
|
||||
return db.users.get(baseUrl);
|
||||
return this.db.users.get(baseUrl);
|
||||
}
|
||||
|
||||
async save(user) {
|
||||
if (session.exists() && user.baseUrl === config.base_url) {
|
||||
return;
|
||||
}
|
||||
await db.users.put(user);
|
||||
await this.db.users.put(user);
|
||||
}
|
||||
|
||||
async delete(baseUrl) {
|
||||
if (session.exists() && baseUrl === config.base_url) {
|
||||
return;
|
||||
}
|
||||
await db.users.delete(baseUrl);
|
||||
await this.db.users.delete(baseUrl);
|
||||
}
|
||||
|
||||
localUser() {
|
||||
|
|
@ -43,5 +47,4 @@ class UserManager {
|
|||
}
|
||||
}
|
||||
|
||||
const userManager = new UserManager();
|
||||
export default userManager;
|
||||
export default new UserManager(getDb());
|
||||
|
|
|
|||
46
web/src/app/WebPushWorker.js
Normal file
46
web/src/app/WebPushWorker.js
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
import notifier from "./Notifier";
|
||||
import subscriptionManager from "./SubscriptionManager";
|
||||
|
||||
const onMessage = () => {
|
||||
notifier.playSound();
|
||||
};
|
||||
|
||||
const delayMillis = 2000; // 2 seconds
|
||||
const intervalMillis = 300000; // 5 minutes
|
||||
|
||||
class WebPushWorker {
|
||||
constructor() {
|
||||
this.timer = null;
|
||||
}
|
||||
|
||||
startWorker() {
|
||||
if (this.timer !== null) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.timer = setInterval(() => this.updateSubscriptions(), intervalMillis);
|
||||
setTimeout(() => this.updateSubscriptions(), delayMillis);
|
||||
|
||||
this.broadcastChannel = new BroadcastChannel("web-push-broadcast");
|
||||
this.broadcastChannel.addEventListener("message", onMessage);
|
||||
}
|
||||
|
||||
stopWorker() {
|
||||
clearTimeout(this.timer);
|
||||
|
||||
this.broadcastChannel.removeEventListener("message", onMessage);
|
||||
this.broadcastChannel.close();
|
||||
}
|
||||
|
||||
async updateSubscriptions() {
|
||||
try {
|
||||
console.log("[WebPushBroadcastListener] Refreshing web push subscriptions");
|
||||
|
||||
await subscriptionManager.refreshWebPushSubscriptions();
|
||||
} catch (e) {
|
||||
console.error("[WebPushBroadcastListener] Error refreshing web push subscriptions", e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default new WebPushWorker();
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import Dexie from "dexie";
|
||||
import session from "./Session";
|
||||
|
||||
// Uses Dexie.js
|
||||
// https://dexie.org/docs/API-Reference#quick-reference
|
||||
//
|
||||
// Notes:
|
||||
// - As per docs, we only declare the indexable columns, not all columns
|
||||
|
||||
// The IndexedDB database name is based on the logged-in user
|
||||
const dbName = session.username() ? `ntfy-${session.username()}` : "ntfy";
|
||||
const db = new Dexie(dbName);
|
||||
|
||||
db.version(1).stores({
|
||||
subscriptions: "&id,baseUrl",
|
||||
notifications: "&id,subscriptionId,time,new,[subscriptionId+new]", // compound key for query performance
|
||||
users: "&baseUrl,username",
|
||||
prefs: "&key",
|
||||
});
|
||||
|
||||
export default db;
|
||||
34
web/src/app/getDb.js
Normal file
34
web/src/app/getDb.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import Dexie from "dexie";
|
||||
import session from "./Session";
|
||||
import sessionReplica from "./SessionReplica";
|
||||
|
||||
// Uses Dexie.js
|
||||
// https://dexie.org/docs/API-Reference#quick-reference
|
||||
//
|
||||
// Notes:
|
||||
// - As per docs, we only declare the indexable columns, not all columns
|
||||
|
||||
const getDbBase = (username) => {
|
||||
// The IndexedDB database name is based on the logged-in user
|
||||
const dbName = username ? `ntfy-${username}` : "ntfy";
|
||||
const db = new Dexie(dbName);
|
||||
|
||||
db.version(2).stores({
|
||||
subscriptions: "&id,baseUrl,notificationType",
|
||||
notifications: "&id,subscriptionId,time,new,[subscriptionId+new]", // compound key for query performance
|
||||
users: "&baseUrl,username",
|
||||
prefs: "&key",
|
||||
});
|
||||
|
||||
return db;
|
||||
};
|
||||
|
||||
export const getDbAsync = async () => {
|
||||
const username = await sessionReplica.username();
|
||||
|
||||
return getDbBase(username);
|
||||
};
|
||||
|
||||
const getDb = () => getDbBase(session.username());
|
||||
|
||||
export default getDb;
|
||||
|
|
@ -20,7 +20,10 @@ 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`;
|
||||
export const topicUrlWebPushUnsubscribe = (baseUrl, topic) => `${topicUrl(baseUrl, topic)}/web-push/unsubscribe`;
|
||||
export const topicShortUrl = (baseUrl, topic) => shortUrl(topicUrl(baseUrl, topic));
|
||||
export const webPushConfigUrl = (baseUrl) => `${baseUrl}/v1/web-push-config`;
|
||||
export const accountUrl = (baseUrl) => `${baseUrl}/v1/account`;
|
||||
export const accountPasswordUrl = (baseUrl) => `${baseUrl}/v1/account/password`;
|
||||
export const accountTokenUrl = (baseUrl) => `${baseUrl}/v1/account/token`;
|
||||
|
|
@ -156,7 +159,7 @@ export const splitNoEmpty = (s, delimiter) =>
|
|||
.filter((x) => x !== "");
|
||||
|
||||
/** Non-cryptographic hash function, see https://stackoverflow.com/a/8831937/1440785 */
|
||||
export const hashCode = async (s) => {
|
||||
export const hashCode = (s) => {
|
||||
let hash = 0;
|
||||
for (let i = 0; i < s.length; i += 1) {
|
||||
const char = s.charCodeAt(i);
|
||||
|
|
@ -288,3 +291,16 @@ export const randomAlphanumericString = (len) => {
|
|||
}
|
||||
return id;
|
||||
};
|
||||
|
||||
export const urlB64ToUint8Array = (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 += 1) {
|
||||
outputArray[i] = rawData.charCodeAt(i);
|
||||
}
|
||||
return outputArray;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ import routes from "./routes";
|
|||
import { formatBytes, formatShortDate, formatShortDateTime, openUrl } from "../app/utils";
|
||||
import accountApi, { LimitBasis, Role, SubscriptionInterval, SubscriptionStatus } from "../app/AccountApi";
|
||||
import { Pref, PrefGroup } from "./Pref";
|
||||
import db from "../app/db";
|
||||
import getDb from "../app/getDb";
|
||||
import UpgradeDialog from "./UpgradeDialog";
|
||||
import { AccountContext } from "./App";
|
||||
import DialogFooter from "./DialogFooter";
|
||||
|
|
@ -57,6 +57,7 @@ import { IncorrectPasswordError, UnauthorizedError } from "../app/errors";
|
|||
import { ProChip } from "./SubscriptionPopup";
|
||||
import theme from "./theme";
|
||||
import session from "../app/Session";
|
||||
import subscriptionManager from "../app/SubscriptionManager";
|
||||
|
||||
const Account = () => {
|
||||
if (!session.exists()) {
|
||||
|
|
@ -1077,8 +1078,10 @@ const DeleteAccountDialog = (props) => {
|
|||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await subscriptionManager.unsubscribeAllWebPush();
|
||||
|
||||
await accountApi.delete(password);
|
||||
await db.delete();
|
||||
await getDb().delete();
|
||||
console.debug(`[Account] Account deleted`);
|
||||
session.resetAndRedirect(routes.app);
|
||||
} catch (e) {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import session from "../app/Session";
|
|||
import logo from "../img/ntfy.svg";
|
||||
import subscriptionManager from "../app/SubscriptionManager";
|
||||
import routes from "./routes";
|
||||
import db from "../app/db";
|
||||
import getDb from "../app/getDb";
|
||||
import { topicDisplayName } from "../app/utils";
|
||||
import Navigation from "./Navigation";
|
||||
import accountApi from "../app/AccountApi";
|
||||
|
|
@ -120,8 +120,10 @@ const ProfileIcon = () => {
|
|||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
await subscriptionManager.unsubscribeAllWebPush();
|
||||
|
||||
await accountApi.logout();
|
||||
await db.delete();
|
||||
await getDb().delete();
|
||||
} finally {
|
||||
session.resetAndRedirect(routes.app);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,6 +57,10 @@ const App = () => {
|
|||
|
||||
const updateTitle = (newNotificationsCount) => {
|
||||
document.title = newNotificationsCount > 0 ? `(${newNotificationsCount}) ntfy` : "ntfy";
|
||||
|
||||
if ("setAppBadge" in window.navigator) {
|
||||
window.navigator.setAppBadge(newNotificationsCount);
|
||||
}
|
||||
};
|
||||
|
||||
const Layout = () => {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ import {
|
|||
ListSubheader,
|
||||
Portal,
|
||||
Tooltip,
|
||||
Button,
|
||||
Typography,
|
||||
Box,
|
||||
IconButton,
|
||||
|
|
@ -94,15 +93,10 @@ const NavList = (props) => {
|
|||
setSubscribeDialogKey((prev) => prev + 1);
|
||||
};
|
||||
|
||||
const handleRequestNotificationPermission = () => {
|
||||
notifier.maybeRequestPermission((granted) => props.onNotificationGranted(granted));
|
||||
};
|
||||
|
||||
const handleSubscribeSubmit = (subscription) => {
|
||||
console.log(`[Navigation] New subscription: ${subscription.id}`, subscription);
|
||||
handleSubscribeReset();
|
||||
navigate(routes.forSubscription(subscription));
|
||||
handleRequestNotificationPermission();
|
||||
};
|
||||
|
||||
const handleAccountClick = () => {
|
||||
|
|
@ -114,19 +108,27 @@ const NavList = (props) => {
|
|||
const isPaid = account?.billing?.subscription;
|
||||
const showUpgradeBanner = config.enable_payments && !isAdmin && !isPaid;
|
||||
const showSubscriptionsList = props.subscriptions?.length > 0;
|
||||
const showNotificationBrowserNotSupportedBox = !notifier.browserSupported();
|
||||
const showNotificationPermissionDenied = notifier.denied();
|
||||
const showNotificationIOSInstallRequired = notifier.iosSupportedButInstallRequired();
|
||||
const showNotificationBrowserNotSupportedBox = !showNotificationIOSInstallRequired && !notifier.browserSupported();
|
||||
const showNotificationContextNotSupportedBox = notifier.browserSupported() && !notifier.contextSupported(); // Only show if notifications are generally supported in the browser
|
||||
const showNotificationGrantBox = notifier.supported() && props.subscriptions?.length > 0 && !props.notificationsGranted;
|
||||
|
||||
const navListPadding =
|
||||
showNotificationGrantBox || showNotificationBrowserNotSupportedBox || showNotificationContextNotSupportedBox ? "0" : "";
|
||||
showNotificationPermissionDenied ||
|
||||
showNotificationIOSInstallRequired ||
|
||||
showNotificationBrowserNotSupportedBox ||
|
||||
showNotificationContextNotSupportedBox
|
||||
? "0"
|
||||
: "";
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toolbar sx={{ display: { xs: "none", sm: "block" } }} />
|
||||
<List component="nav" sx={{ paddingTop: navListPadding }}>
|
||||
{showNotificationPermissionDenied && <NotificationPermissionDeniedAlert />}
|
||||
{showNotificationBrowserNotSupportedBox && <NotificationBrowserNotSupportedAlert />}
|
||||
{showNotificationContextNotSupportedBox && <NotificationContextNotSupportedAlert />}
|
||||
{showNotificationGrantBox && <NotificationGrantAlert onRequestPermissionClick={handleRequestNotificationPermission} />}
|
||||
{showNotificationIOSInstallRequired && <NotificationIOSInstallRequiredAlert />}
|
||||
{!showSubscriptionsList && (
|
||||
<ListItemButton onClick={() => navigate(routes.app)} selected={location.pathname === config.app_root}>
|
||||
<ListItemIcon>
|
||||
|
|
@ -344,16 +346,26 @@ const SubscriptionItem = (props) => {
|
|||
);
|
||||
};
|
||||
|
||||
const NotificationGrantAlert = (props) => {
|
||||
const NotificationPermissionDeniedAlert = () => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<>
|
||||
<Alert severity="warning" sx={{ paddingTop: 2 }}>
|
||||
<AlertTitle>{t("alert_grant_title")}</AlertTitle>
|
||||
<Typography gutterBottom>{t("alert_grant_description")}</Typography>
|
||||
<Button sx={{ float: "right" }} color="inherit" size="small" onClick={props.onRequestPermissionClick}>
|
||||
{t("alert_grant_button")}
|
||||
</Button>
|
||||
<AlertTitle>{t("alert_notification_permission_denied_title")}</AlertTitle>
|
||||
<Typography gutterBottom>{t("alert_notification_permission_denied_description")}</Typography>
|
||||
</Alert>
|
||||
<Divider />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const NotificationIOSInstallRequiredAlert = () => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<>
|
||||
<Alert severity="warning" sx={{ paddingTop: 2 }}>
|
||||
<AlertTitle>{t("alert_notification_ios_install_required_title")}</AlertTitle>
|
||||
<Typography gutterBottom>{t("alert_notification_ios_install_required_description")}</Typography>
|
||||
</Alert>
|
||||
<Divider />
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@ import { PermissionDenyAll, PermissionRead, PermissionReadWrite, PermissionWrite
|
|||
import { ReserveAddDialog, ReserveDeleteDialog, ReserveEditDialog } from "./ReserveDialogs";
|
||||
import { UnauthorizedError } from "../app/errors";
|
||||
import { subscribeTopic } from "./SubscribeDialog";
|
||||
import notifier from "../app/Notifier";
|
||||
|
||||
const maybeUpdateAccountSettings = async (payload) => {
|
||||
if (!session.exists()) {
|
||||
|
|
@ -85,6 +86,7 @@ const Notifications = () => {
|
|||
<Sound />
|
||||
<MinPriority />
|
||||
<DeleteAfter />
|
||||
{notifier.pushSupported() && <WebPushDefaultEnabled />}
|
||||
</PrefGroup>
|
||||
</Card>
|
||||
);
|
||||
|
|
@ -232,6 +234,36 @@ const DeleteAfter = () => {
|
|||
);
|
||||
};
|
||||
|
||||
const WebPushDefaultEnabled = () => {
|
||||
const { t } = useTranslation();
|
||||
const labelId = "prefWebPushDefaultEnabled";
|
||||
const defaultEnabled = useLiveQuery(async () => prefs.webPushDefaultEnabled());
|
||||
const handleChange = async (ev) => {
|
||||
await prefs.setWebPushDefaultEnabled(ev.target.value);
|
||||
};
|
||||
|
||||
// while loading
|
||||
if (defaultEnabled == null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Pref
|
||||
labelId={labelId}
|
||||
title={t("prefs_notifications_web_push_default_title")}
|
||||
description={t("prefs_notifications_web_push_default_description")}
|
||||
>
|
||||
<FormControl fullWidth variant="standard" sx={{ m: 1 }}>
|
||||
<Select value={defaultEnabled} onChange={handleChange} aria-labelledby={labelId}>
|
||||
{defaultEnabled === "initial" && <MenuItem value="initial">{t("prefs_notifications_web_push_default_initial")}</MenuItem>}
|
||||
<MenuItem value="enabled">{t("prefs_notifications_web_push_default_enabled")}</MenuItem>
|
||||
<MenuItem value="disabled">{t("prefs_notifications_web_push_default_disabled")}</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Pref>
|
||||
);
|
||||
};
|
||||
|
||||
const Users = () => {
|
||||
const { t } = useTranslation();
|
||||
const [dialogKey, setDialogKey] = useState(0);
|
||||
|
|
|
|||
|
|
@ -8,17 +8,20 @@ import {
|
|||
DialogContentText,
|
||||
DialogTitle,
|
||||
Autocomplete,
|
||||
Checkbox,
|
||||
FormControlLabel,
|
||||
FormGroup,
|
||||
useMediaQuery,
|
||||
Switch,
|
||||
Stack,
|
||||
} from "@mui/material";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Warning } from "@mui/icons-material";
|
||||
import { useLiveQuery } from "dexie-react-hooks";
|
||||
import theme from "./theme";
|
||||
import api from "../app/Api";
|
||||
import { randomAlphanumericString, topicUrl, validTopic, validUrl } from "../app/utils";
|
||||
import userManager from "../app/UserManager";
|
||||
import subscriptionManager from "../app/SubscriptionManager";
|
||||
import subscriptionManager, { NotificationType } from "../app/SubscriptionManager";
|
||||
import poller from "../app/Poller";
|
||||
import DialogFooter from "./DialogFooter";
|
||||
import session from "../app/Session";
|
||||
|
|
@ -28,11 +31,13 @@ import ReserveTopicSelect from "./ReserveTopicSelect";
|
|||
import { AccountContext } from "./App";
|
||||
import { TopicReservedError, UnauthorizedError } from "../app/errors";
|
||||
import { ReserveLimitChip } from "./SubscriptionPopup";
|
||||
import notifier from "../app/Notifier";
|
||||
import prefs from "../app/Prefs";
|
||||
|
||||
const publicBaseUrl = "https://ntfy.sh";
|
||||
|
||||
export const subscribeTopic = async (baseUrl, topic) => {
|
||||
const subscription = await subscriptionManager.add(baseUrl, topic);
|
||||
export const subscribeTopic = async (baseUrl, topic, opts) => {
|
||||
const subscription = await subscriptionManager.add(baseUrl, topic, opts);
|
||||
if (session.exists()) {
|
||||
try {
|
||||
await accountApi.addSubscription(baseUrl, topic);
|
||||
|
|
@ -52,14 +57,29 @@ const SubscribeDialog = (props) => {
|
|||
const [showLoginPage, setShowLoginPage] = useState(false);
|
||||
const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
|
||||
|
||||
const handleSuccess = async () => {
|
||||
const webPushDefaultEnabled = useLiveQuery(async () => prefs.webPushDefaultEnabled());
|
||||
|
||||
const handleSuccess = async (notificationType) => {
|
||||
console.log(`[SubscribeDialog] Subscribing to topic ${topic}`);
|
||||
const actualBaseUrl = baseUrl || config.base_url;
|
||||
const subscription = await subscribeTopic(actualBaseUrl, topic);
|
||||
const subscription = await subscribeTopic(actualBaseUrl, topic, {
|
||||
notificationType,
|
||||
});
|
||||
poller.pollInBackground(subscription); // Dangle!
|
||||
|
||||
// if the user hasn't changed the default web push setting yet, set it to enabled
|
||||
if (notificationType === "background" && webPushDefaultEnabled === "initial") {
|
||||
await prefs.setWebPushDefaultEnabled(true);
|
||||
}
|
||||
|
||||
props.onSuccess(subscription);
|
||||
};
|
||||
|
||||
// wait for liveQuery load
|
||||
if (webPushDefaultEnabled === undefined) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={props.open} onClose={props.onCancel} fullScreen={fullScreen}>
|
||||
{!showLoginPage && (
|
||||
|
|
@ -72,6 +92,7 @@ const SubscribeDialog = (props) => {
|
|||
onCancel={props.onCancel}
|
||||
onNeedsLogin={() => setShowLoginPage(true)}
|
||||
onSuccess={handleSuccess}
|
||||
webPushDefaultEnabled={webPushDefaultEnabled}
|
||||
/>
|
||||
)}
|
||||
{showLoginPage && <LoginPage baseUrl={baseUrl} topic={topic} onBack={() => setShowLoginPage(false)} onSuccess={handleSuccess} />}
|
||||
|
|
@ -79,6 +100,22 @@ const SubscribeDialog = (props) => {
|
|||
);
|
||||
};
|
||||
|
||||
const browserNotificationsSupported = notifier.supported();
|
||||
const pushNotificationsSupported = notifier.pushSupported();
|
||||
const iosInstallRequired = notifier.iosSupportedButInstallRequired();
|
||||
|
||||
const getNotificationTypeFromToggles = (browserNotificationsEnabled, backgroundNotificationsEnabled) => {
|
||||
if (backgroundNotificationsEnabled) {
|
||||
return NotificationType.BACKGROUND;
|
||||
}
|
||||
|
||||
if (browserNotificationsEnabled) {
|
||||
return NotificationType.BROWSER;
|
||||
}
|
||||
|
||||
return NotificationType.SOUND;
|
||||
};
|
||||
|
||||
const SubscribePage = (props) => {
|
||||
const { t } = useTranslation();
|
||||
const { account } = useContext(AccountContext);
|
||||
|
|
@ -96,6 +133,30 @@ const SubscribePage = (props) => {
|
|||
const reserveTopicEnabled =
|
||||
session.exists() && (account?.role === Role.ADMIN || (account?.role === Role.USER && (account?.stats.reservations_remaining || 0) > 0));
|
||||
|
||||
// load initial value, but update it in `handleBrowserNotificationsChanged`
|
||||
// if we interact with the API and therefore possibly change it (from default -> denied)
|
||||
const [notificationsExplicitlyDenied, setNotificationsExplicitlyDenied] = useState(notifier.denied());
|
||||
// default to on if notifications are already granted
|
||||
const [browserNotificationsEnabled, setBrowserNotificationsEnabled] = useState(notifier.granted());
|
||||
const [backgroundNotificationsEnabled, setBackgroundNotificationsEnabled] = useState(props.webPushDefaultEnabled === "enabled");
|
||||
|
||||
const handleBrowserNotificationsChanged = async (e) => {
|
||||
if (e.target.checked && (await notifier.maybeRequestPermission())) {
|
||||
setBrowserNotificationsEnabled(true);
|
||||
if (props.webPushDefaultEnabled === "enabled") {
|
||||
setBackgroundNotificationsEnabled(true);
|
||||
}
|
||||
} else {
|
||||
setNotificationsExplicitlyDenied(notifier.denied());
|
||||
setBrowserNotificationsEnabled(false);
|
||||
setBackgroundNotificationsEnabled(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBackgroundNotificationsChanged = (e) => {
|
||||
setBackgroundNotificationsEnabled(e.target.checked);
|
||||
};
|
||||
|
||||
const handleSubscribe = async () => {
|
||||
const user = await userManager.get(baseUrl); // May be undefined
|
||||
const username = user ? user.username : t("subscribe_dialog_error_user_anonymous");
|
||||
|
|
@ -133,12 +194,15 @@ const SubscribePage = (props) => {
|
|||
}
|
||||
|
||||
console.log(`[SubscribeDialog] Successful login to ${topicUrl(baseUrl, topic)} for user ${username}`);
|
||||
props.onSuccess();
|
||||
props.onSuccess(getNotificationTypeFromToggles(browserNotificationsEnabled, backgroundNotificationsEnabled));
|
||||
};
|
||||
|
||||
const handleUseAnotherChanged = (e) => {
|
||||
props.setBaseUrl("");
|
||||
setAnotherServerVisible(e.target.checked);
|
||||
if (e.target.checked) {
|
||||
setBackgroundNotificationsEnabled(false);
|
||||
}
|
||||
};
|
||||
|
||||
const subscribeButtonEnabled = (() => {
|
||||
|
|
@ -193,8 +257,7 @@ const SubscribePage = (props) => {
|
|||
<FormControlLabel
|
||||
variant="standard"
|
||||
control={
|
||||
<Checkbox
|
||||
fullWidth
|
||||
<Switch
|
||||
disabled={!reserveTopicEnabled}
|
||||
checked={reserveTopicVisible}
|
||||
onChange={(ev) => setReserveTopicVisible(ev.target.checked)}
|
||||
|
|
@ -217,8 +280,9 @@ const SubscribePage = (props) => {
|
|||
<FormGroup>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
<Switch
|
||||
onChange={handleUseAnotherChanged}
|
||||
checked={anotherServerVisible}
|
||||
inputProps={{
|
||||
"aria-label": t("subscribe_dialog_subscribe_use_another_label"),
|
||||
}}
|
||||
|
|
@ -244,6 +308,43 @@ const SubscribePage = (props) => {
|
|||
)}
|
||||
</FormGroup>
|
||||
)}
|
||||
{browserNotificationsSupported && (
|
||||
<FormGroup>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
onChange={handleBrowserNotificationsChanged}
|
||||
checked={browserNotificationsEnabled}
|
||||
disabled={notificationsExplicitlyDenied}
|
||||
inputProps={{
|
||||
"aria-label": t("subscribe_dialog_subscribe_enable_browser_notifications_label"),
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label={
|
||||
<Stack direction="row" gap={1} alignItems="center">
|
||||
{t("subscribe_dialog_subscribe_enable_browser_notifications_label")}
|
||||
{notificationsExplicitlyDenied && <Warning />}
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
{pushNotificationsSupported && !anotherServerVisible && browserNotificationsEnabled && (
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
onChange={handleBackgroundNotificationsChanged}
|
||||
checked={backgroundNotificationsEnabled}
|
||||
disabled={iosInstallRequired}
|
||||
inputProps={{
|
||||
"aria-label": t("subscribe_dialog_subscribe_enable_background_notifications_label"),
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label={t("subscribe_dialog_subscribe_enable_background_notifications_label")}
|
||||
/>
|
||||
)}
|
||||
</FormGroup>
|
||||
)}
|
||||
</DialogContent>
|
||||
<DialogFooter status={error}>
|
||||
<Button onClick={props.onCancel}>{t("subscribe_dialog_subscribe_button_cancel")}</Button>
|
||||
|
|
|
|||
|
|
@ -14,12 +14,26 @@ import {
|
|||
useMediaQuery,
|
||||
MenuItem,
|
||||
IconButton,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
Divider,
|
||||
} from "@mui/material";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Clear } from "@mui/icons-material";
|
||||
import {
|
||||
Check,
|
||||
Clear,
|
||||
ClearAll,
|
||||
Edit,
|
||||
EnhancedEncryption,
|
||||
Lock,
|
||||
LockOpen,
|
||||
NotificationsOff,
|
||||
RemoveCircle,
|
||||
Send,
|
||||
} from "@mui/icons-material";
|
||||
import theme from "./theme";
|
||||
import subscriptionManager from "../app/SubscriptionManager";
|
||||
import subscriptionManager, { NotificationType } from "../app/SubscriptionManager";
|
||||
import DialogFooter from "./DialogFooter";
|
||||
import accountApi, { Role } from "../app/AccountApi";
|
||||
import session from "../app/Session";
|
||||
|
|
@ -30,6 +44,7 @@ import api from "../app/Api";
|
|||
import { AccountContext } from "./App";
|
||||
import { ReserveAddDialog, ReserveDeleteDialog, ReserveEditDialog } from "./ReserveDialogs";
|
||||
import { UnauthorizedError } from "../app/errors";
|
||||
import notifier from "../app/Notifier";
|
||||
|
||||
export const SubscriptionPopup = (props) => {
|
||||
const { t } = useTranslation();
|
||||
|
|
@ -70,8 +85,7 @@ export const SubscriptionPopup = (props) => {
|
|||
};
|
||||
|
||||
const handleSendTestMessage = async () => {
|
||||
const { baseUrl } = props.subscription;
|
||||
const { topic } = props.subscription;
|
||||
const { baseUrl, topic } = props.subscription;
|
||||
const tags = shuffle([
|
||||
"grinning",
|
||||
"octopus",
|
||||
|
|
@ -133,7 +147,7 @@ export const SubscriptionPopup = (props) => {
|
|||
|
||||
const handleUnsubscribe = async () => {
|
||||
console.log(`[SubscriptionPopup] Unsubscribing from ${props.subscription.id}`, props.subscription);
|
||||
await subscriptionManager.remove(props.subscription.id);
|
||||
await subscriptionManager.remove(props.subscription);
|
||||
if (session.exists() && !subscription.internal) {
|
||||
try {
|
||||
await accountApi.deleteSubscription(props.subscription.baseUrl, props.subscription.topic);
|
||||
|
|
@ -155,19 +169,72 @@ export const SubscriptionPopup = (props) => {
|
|||
return (
|
||||
<>
|
||||
<PopupMenu horizontal={placement} anchorEl={props.anchor} open={!!props.anchor} onClose={props.onClose}>
|
||||
<MenuItem onClick={handleChangeDisplayName}>{t("action_bar_change_display_name")}</MenuItem>
|
||||
{showReservationAdd && <MenuItem onClick={handleReserveAdd}>{t("action_bar_reservation_add")}</MenuItem>}
|
||||
<NotificationToggle subscription={subscription} />
|
||||
<Divider />
|
||||
<MenuItem onClick={handleChangeDisplayName}>
|
||||
<ListItemIcon>
|
||||
<Edit fontSize="small" />
|
||||
</ListItemIcon>
|
||||
|
||||
{t("action_bar_change_display_name")}
|
||||
</MenuItem>
|
||||
{showReservationAdd && (
|
||||
<MenuItem onClick={handleReserveAdd}>
|
||||
<ListItemIcon>
|
||||
<Lock fontSize="small" />
|
||||
</ListItemIcon>
|
||||
{t("action_bar_reservation_add")}
|
||||
</MenuItem>
|
||||
)}
|
||||
{showReservationAddDisabled && (
|
||||
<MenuItem sx={{ cursor: "default" }}>
|
||||
<ListItemIcon>
|
||||
<Lock fontSize="small" color="disabled" />
|
||||
</ListItemIcon>
|
||||
|
||||
<span style={{ opacity: 0.3 }}>{t("action_bar_reservation_add")}</span>
|
||||
<ReserveLimitChip />
|
||||
</MenuItem>
|
||||
)}
|
||||
{showReservationEdit && <MenuItem onClick={handleReserveEdit}>{t("action_bar_reservation_edit")}</MenuItem>}
|
||||
{showReservationDelete && <MenuItem onClick={handleReserveDelete}>{t("action_bar_reservation_delete")}</MenuItem>}
|
||||
<MenuItem onClick={handleSendTestMessage}>{t("action_bar_send_test_notification")}</MenuItem>
|
||||
<MenuItem onClick={handleClearAll}>{t("action_bar_clear_notifications")}</MenuItem>
|
||||
<MenuItem onClick={handleUnsubscribe}>{t("action_bar_unsubscribe")}</MenuItem>
|
||||
{showReservationEdit && (
|
||||
<MenuItem onClick={handleReserveEdit}>
|
||||
<ListItemIcon>
|
||||
<EnhancedEncryption fontSize="small" />
|
||||
</ListItemIcon>
|
||||
|
||||
{t("action_bar_reservation_edit")}
|
||||
</MenuItem>
|
||||
)}
|
||||
{showReservationDelete && (
|
||||
<MenuItem onClick={handleReserveDelete}>
|
||||
<ListItemIcon>
|
||||
<LockOpen fontSize="small" />
|
||||
</ListItemIcon>
|
||||
|
||||
{t("action_bar_reservation_delete")}
|
||||
</MenuItem>
|
||||
)}
|
||||
<MenuItem onClick={handleSendTestMessage}>
|
||||
<ListItemIcon>
|
||||
<Send fontSize="small" />
|
||||
</ListItemIcon>
|
||||
|
||||
{t("action_bar_send_test_notification")}
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleClearAll}>
|
||||
<ListItemIcon>
|
||||
<ClearAll fontSize="small" />
|
||||
</ListItemIcon>
|
||||
|
||||
{t("action_bar_clear_notifications")}
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleUnsubscribe}>
|
||||
<ListItemIcon>
|
||||
<RemoveCircle fontSize="small" />
|
||||
</ListItemIcon>
|
||||
|
||||
{t("action_bar_unsubscribe")}
|
||||
</MenuItem>
|
||||
</PopupMenu>
|
||||
<Portal>
|
||||
<Snackbar
|
||||
|
|
@ -267,6 +334,83 @@ const DisplayNameDialog = (props) => {
|
|||
);
|
||||
};
|
||||
|
||||
const getNotificationType = (subscription) => {
|
||||
if (subscription.mutedUntil === 1) {
|
||||
return "muted";
|
||||
}
|
||||
|
||||
return subscription.notificationType ?? NotificationType.BROWSER;
|
||||
};
|
||||
|
||||
const checkedItem = (
|
||||
<ListItemIcon>
|
||||
<Check />
|
||||
</ListItemIcon>
|
||||
);
|
||||
|
||||
const NotificationToggle = ({ subscription }) => {
|
||||
const { t } = useTranslation();
|
||||
const type = getNotificationType(subscription);
|
||||
|
||||
const handleChange = async (newType) => {
|
||||
try {
|
||||
if (newType !== NotificationType.SOUND && !(await notifier.maybeRequestPermission())) {
|
||||
return;
|
||||
}
|
||||
|
||||
await subscriptionManager.setNotificationType(subscription, newType);
|
||||
} catch (e) {
|
||||
console.error("[NotificationToggle] Error setting notification type", e);
|
||||
}
|
||||
};
|
||||
|
||||
const unmute = async () => {
|
||||
await subscriptionManager.setMutedUntil(subscription.id, 0);
|
||||
};
|
||||
|
||||
if (type === "muted") {
|
||||
return (
|
||||
<MenuItem onClick={unmute}>
|
||||
<ListItemIcon>
|
||||
<NotificationsOff />
|
||||
</ListItemIcon>
|
||||
{t("notification_toggle_unmute")}
|
||||
</MenuItem>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<MenuItem>
|
||||
{type === NotificationType.SOUND && checkedItem}
|
||||
<ListItemText inset={type !== NotificationType.SOUND} onClick={() => handleChange(NotificationType.SOUND)}>
|
||||
{t("notification_toggle_sound")}
|
||||
</ListItemText>
|
||||
</MenuItem>
|
||||
{!notifier.denied() && !notifier.iosSupportedButInstallRequired() && (
|
||||
<>
|
||||
{notifier.supported() && (
|
||||
<MenuItem>
|
||||
{type === NotificationType.BROWSER && checkedItem}
|
||||
<ListItemText inset={type !== NotificationType.BROWSER} onClick={() => handleChange(NotificationType.BROWSER)}>
|
||||
{t("notification_toggle_browser")}
|
||||
</ListItemText>
|
||||
</MenuItem>
|
||||
)}
|
||||
{notifier.pushSupported() && (
|
||||
<MenuItem>
|
||||
{type === NotificationType.BACKGROUND && checkedItem}
|
||||
<ListItemText inset={type !== NotificationType.BACKGROUND} onClick={() => handleChange(NotificationType.BACKGROUND)}>
|
||||
{t("notification_toggle_background")}
|
||||
</ListItemText>
|
||||
</MenuItem>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const ReserveLimitChip = () => {
|
||||
const { account } = useContext(AccountContext);
|
||||
if (account?.role === Role.ADMIN || account?.stats.reservations_remaining > 0) {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { useNavigate, useParams } from "react-router-dom";
|
|||
import { useEffect, useState } from "react";
|
||||
import subscriptionManager from "../app/SubscriptionManager";
|
||||
import { disallowedTopic, expandSecureUrl, topicUrl } from "../app/utils";
|
||||
import notifier from "../app/Notifier";
|
||||
import routes from "./routes";
|
||||
import connectionManager from "../app/ConnectionManager";
|
||||
import poller from "../app/Poller";
|
||||
|
|
@ -10,6 +9,7 @@ import pruner from "../app/Pruner";
|
|||
import session from "../app/Session";
|
||||
import accountApi from "../app/AccountApi";
|
||||
import { UnauthorizedError } from "../app/errors";
|
||||
import webPushWorker from "../app/WebPushWorker";
|
||||
|
||||
/**
|
||||
* Wire connectionManager and subscriptionManager so that subscriptions are updated when the connection
|
||||
|
|
@ -41,7 +41,7 @@ export const useConnectionListeners = (account, subscriptions, users) => {
|
|||
const added = await subscriptionManager.addNotification(subscriptionId, notification);
|
||||
if (added) {
|
||||
const defaultClickAction = (subscription) => navigate(routes.forSubscription(subscription));
|
||||
await notifier.notify(subscriptionId, notification, defaultClickAction);
|
||||
await subscriptionManager.notify(subscriptionId, notification, defaultClickAction);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -61,7 +61,7 @@ export const useConnectionListeners = (account, subscriptions, users) => {
|
|||
}
|
||||
};
|
||||
|
||||
connectionManager.registerStateListener(subscriptionManager.updateState);
|
||||
connectionManager.registerStateListener((id, state) => subscriptionManager.updateState(id, state));
|
||||
connectionManager.registerMessageListener(handleMessage);
|
||||
|
||||
return () => {
|
||||
|
|
@ -79,7 +79,7 @@ export const useConnectionListeners = (account, subscriptions, users) => {
|
|||
if (!account || !account.sync_topic) {
|
||||
return;
|
||||
}
|
||||
subscriptionManager.add(config.base_url, account.sync_topic, true); // Dangle!
|
||||
subscriptionManager.add(config.base_url, account.sync_topic, { internal: true }); // Dangle!
|
||||
}, [account]);
|
||||
|
||||
// When subscriptions or users change, refresh the connections
|
||||
|
|
@ -129,11 +129,30 @@ export const useAutoSubscribe = (subscriptions, selected) => {
|
|||
* and Poller.js, because side effect imports are not a thing in JS, and "Optimize imports" cleans
|
||||
* up "unused" imports. See https://github.com/binwiederhier/ntfy/issues/186.
|
||||
*/
|
||||
|
||||
const stopWorkers = () => {
|
||||
poller.stopWorker();
|
||||
pruner.stopWorker();
|
||||
accountApi.stopWorker();
|
||||
};
|
||||
|
||||
const startWorkers = () => {
|
||||
poller.startWorker();
|
||||
pruner.startWorker();
|
||||
accountApi.startWorker();
|
||||
};
|
||||
|
||||
export const useBackgroundProcesses = () => {
|
||||
useEffect(() => {
|
||||
poller.startWorker();
|
||||
pruner.startWorker();
|
||||
accountApi.startWorker();
|
||||
console.log("[useBackgroundProcesses] mounting");
|
||||
startWorkers();
|
||||
webPushWorker.startWorker();
|
||||
|
||||
return () => {
|
||||
console.log("[useBackgroundProcesses] unloading");
|
||||
stopWorkers();
|
||||
webPushWorker.stopWorker();
|
||||
};
|
||||
}, []);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue