Correctly handle standalone (PWA) mode changes

- Also handle notification permission changes
- Remove web push schedule worker since this complicates
  things and doesn’t do _that_ much. We have the reminder
  notification if the user truly doesn’t reload ntfy in
  more than a week.

web/src/app/Notifier.js

@@ -43,7 +43,7 @@ class Notifier {
     }
   }
 
-  async webPushSubscription() {
+  async webPushSubscription(hasWebPushTopics) {
     if (!this.pushPossible()) {
       throw new Error("Unsupported or denied");
     }
@@ -53,11 +53,11 @@ class Notifier {
       return existingSubscription;
     }
 
-    // Create a new subscription only if Web Push is enabled. It is possible that Web Push
+    // Create a new subscription only if there are new topics to subscribe to. It is possible that Web Push
     // was previously enabled and then disabled again in which case there would be an existingSubscription.
     // If, however, it was _not_ enabled previously, we create a new subscription if it is now enabled.
 
-    if (await this.pushEnabled()) {
+    if (hasWebPushTopics) {
       return pushManager.subscribe({
         userVisibleOnly: true,
         applicationServerKey: urlB64ToUint8Array(config.web_push_public_key),
@@ -119,11 +119,6 @@ class Notifier {
     return this.pushSupported() && this.contextSupported() && this.granted() && !this.iosSupportedButInstallRequired();
   }
 
-  async pushEnabled() {
-    const enabled = await prefs.webPushEnabled();
-    return this.pushPossible() && enabled;
-  }
-
   /**
    * 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

web/src/app/Prefs.js

@@ -1,5 +1,4 @@
 import db from "./db";
-import { isLaunchedPWA } from "./utils";
 
 class Prefs {
   constructor(dbImpl) {
@@ -35,7 +34,7 @@ class Prefs {
 
   async webPushEnabled() {
     const webPushEnabled = await this.db.prefs.get("webPushEnabled");
-    return webPushEnabled?.value ?? isLaunchedPWA();
+    return webPushEnabled?.value;
   }
 
   async setWebPushEnabled(enabled) {

web/src/app/SubscriptionManager.js

@@ -2,7 +2,7 @@ import api from "./Api";
 import notifier from "./Notifier";
 import prefs from "./Prefs";
 import db from "./db";
-import { topicUrl } from "./utils";
+import { isLaunchedPWA, topicUrl } from "./utils";
 
 class SubscriptionManager {
   constructor(dbImpl) {
@@ -27,13 +27,17 @@ class SubscriptionManager {
    * It is important to note that "mutedUntil" must be part of the where() query, otherwise the Dexie live query
    * will not react to it, and the Web Push topics will not be updated when the user mutes a topic.
    */
-  async webPushTopics() {
+  async webPushTopics(isStandalone = isLaunchedPWA(), pushPossible = notifier.pushPossible()) {
-    // the Promise.resolve wrapper is not superfluous, without it the live query breaks:
+    if (!pushPossible) {
-    // https://dexie.org/docs/dexie-react-hooks/useLiveQuery()#calling-non-dexie-apis-from-querier
-    const pushEnabled = await Promise.resolve(notifier.pushEnabled());
-    if (!pushEnabled) {
       return [];
     }
+
+    // the Promise.resolve wrapper is not superfluous, without it the live query breaks:
+    // https://dexie.org/docs/dexie-react-hooks/useLiveQuery()#calling-non-dexie-apis-from-querier
+    if (!(isStandalone || (await Promise.resolve(prefs.webPushEnabled())))) {
+      return [];
+    }
+
     const subscriptions = await this.db.subscriptions.where({ baseUrl: config.base_url, mutedUntil: 0 }).toArray();
     return subscriptions.filter(({ internal }) => !internal).map(({ topic }) => topic);
   }
@@ -117,14 +121,17 @@ class SubscriptionManager {
 
   async updateWebPushSubscriptions(presetTopics) {
     const topics = presetTopics ?? (await this.webPushTopics());
-    const browserSubscription = await notifier.webPushSubscription();
+
+    const hasWebPushTopics = topics.length > 0;
+
+    const browserSubscription = await notifier.webPushSubscription(hasWebPushTopics);
 
     if (!browserSubscription) {
       console.log("[SubscriptionManager] No browser subscription currently exists, so web push was never enabled. Skipping.");
       return;
     }
 
-    if (topics.length > 0) {
+    if (hasWebPushTopics) {
       await api.updateWebPush(browserSubscription, topics);
     } else {
       await api.deleteWebPush(browserSubscription);

web/src/app/WebPush.js

@@ -1,16 +1,15 @@
 import { useState, useEffect } from "react";
-import { useLiveQuery } from "dexie-react-hooks";
 import notifier from "./Notifier";
 import subscriptionManager from "./SubscriptionManager";
 
-const intervalMillis = 13 * 60 * 1_000; // 13 minutes
+const broadcastChannel = new BroadcastChannel("web-push-broadcast");
-const updateIntervalMillis = 60 * 60 * 1_000; // 1 hour
 
 /**
- * Updates the Web Push subscriptions when the list of topics changes.
+ * Updates the Web Push subscriptions when the list of topics changes,
+ * as well as plays a sound when a new broadcat message is received from
+ * the service worker, since the service worker cannot play sounds.
  */
-export const useWebPushTopicListener = () => {
+const useWebPushListener = (topics) => {
-  const topics = useLiveQuery(() => subscriptionManager.webPushTopics());
   const [lastTopics, setLastTopics] = useState();
 
   useEffect(() => {
@@ -29,63 +28,18 @@ export const useWebPushTopicListener = () => {
       }
     })();
   }, [topics, lastTopics]);
+
+  useEffect(() => {
+    const onMessage = () => {
+      notifier.playSound(); // Service Worker cannot play sound, so we do it here!
+    };
+
+    broadcastChannel.addEventListener("message", onMessage);
+
+    return () => {
+      broadcastChannel.removeEventListener("message", onMessage);
+    };
+  });
 };
 
-/**
+export default useWebPushListener;
- * Helper class for Web Push that does three things:
- * 1. Updates the Web Push subscriptions on a schedule
- * 2. Updates the Web Push subscriptions when the window is minimised / app switched
- * 3. Listens to the broadcast channel from the service worker to play a sound when a message comes in
- */
-class WebPushWorker {
-  constructor() {
-    this.timer = null;
-    this.lastUpdate = null;
-    this.messageHandler = this.onMessage.bind(this);
-    this.visibilityHandler = this.onVisibilityChange.bind(this);
-  }
-
-  startWorker() {
-    if (this.timer !== null) {
-      return;
-    }
-
-    this.timer = setInterval(() => this.updateSubscriptions(), intervalMillis);
-    this.broadcastChannel = new BroadcastChannel("web-push-broadcast");
-    this.broadcastChannel.addEventListener("message", this.messageHandler);
-
-    document.addEventListener("visibilitychange", this.visibilityHandler);
-  }
-
-  stopWorker() {
-    clearTimeout(this.timer);
-
-    this.broadcastChannel.removeEventListener("message", this.messageHandler);
-    this.broadcastChannel.close();
-
-    document.removeEventListener("visibilitychange", this.visibilityHandler);
-  }
-
-  onMessage() {
-    notifier.playSound(); // Service Worker cannot play sound, so we do it here!
-  }
-
-  onVisibilityChange() {
-    if (document.visibilityState === "visible") {
-      this.updateSubscriptions();
-    }
-  }
-
-  async updateSubscriptions() {
-    if (!notifier.pushPossible()) {
-      return;
-    }
-
-    if (!this.lastUpdate || Date.now() - this.lastUpdate > updateIntervalMillis) {
-      await subscriptionManager.updateWebPushSubscriptions();
-      this.lastUpdate = Date.now();
-    }
-  }
-}
-
-export const webPush = new WebPushWorker();

web/src/components/App.jsx

@@ -15,7 +15,7 @@ import userManager from "../app/UserManager";
 import { expandUrl } from "../app/utils";
 import ErrorBoundary from "./ErrorBoundary";
 import routes from "./routes";
-import { useAccountListener, useBackgroundProcesses, useConnectionListeners } from "./hooks";
+import { useAccountListener, useBackgroundProcesses, useConnectionListeners, useWebPushTopics } from "./hooks";
 import PublishDialog from "./PublishDialog";
 import Messaging from "./Messaging";
 import Login from "./Login";
@@ -68,7 +68,7 @@ const Layout = () => {
   const [sendDialogOpenMode, setSendDialogOpenMode] = useState("");
   const users = useLiveQuery(() => userManager.all());
   const subscriptions = useLiveQuery(() => subscriptionManager.all());
-  const webPushTopics = useLiveQuery(() => subscriptionManager.webPushTopics());
+  const webPushTopics = useWebPushTopics();
   const subscriptionsWithoutInternal = subscriptions?.filter((s) => !s.internal);
   const newNotificationsCount = subscriptionsWithoutInternal?.reduce((prev, cur) => prev + cur.new, 0) || 0;
   const [selected] = (subscriptionsWithoutInternal || []).filter(

web/src/components/hooks.js

@@ -1,7 +1,8 @@
 import { useParams } from "react-router-dom";
 import { useEffect, useMemo, useState } from "react";
+import { useLiveQuery } from "dexie-react-hooks";
 import subscriptionManager from "../app/SubscriptionManager";
-import { disallowedTopic, expandSecureUrl, topicUrl } from "../app/utils";
+import { disallowedTopic, expandSecureUrl, isLaunchedPWA, topicUrl } from "../app/utils";
 import routes from "./routes";
 import connectionManager from "../app/ConnectionManager";
 import poller from "../app/Poller";
@@ -9,7 +10,8 @@ import pruner from "../app/Pruner";
 import session from "../app/Session";
 import accountApi from "../app/AccountApi";
 import { UnauthorizedError } from "../app/errors";
-import { webPush, useWebPushTopicListener } from "../app/WebPush";
+import useWebPushListener from "../app/WebPush";
+import notifier from "../app/Notifier";
 
 /**
  * Wire connectionManager and subscriptionManager so that subscriptions are updated when the connection
@@ -133,6 +135,54 @@ export const useAutoSubscribe = (subscriptions, selected) => {
   }, [params, subscriptions, selected, hasRun]);
 };
 
+export const useWebPushTopics = () => {
+  const matchMedia = window.matchMedia("(display-mode: standalone)");
+
+  const [isStandalone, setIsStandalone] = useState(isLaunchedPWA());
+  const [pushPossible, setPushPossible] = useState(notifier.pushPossible());
+
+  useEffect(() => {
+    const handler = (evt) => {
+      console.log(`[useWebPushTopics] App is now running ${evt.matches ? "standalone" : "in the browser"}`);
+      setIsStandalone(evt.matches);
+    };
+
+    matchMedia.addEventListener("change", handler);
+
+    return () => {
+      matchMedia.removeEventListener("change", handler);
+    };
+  });
+
+  useEffect(() => {
+    const handler = () => {
+      const newPushPossible = notifier.pushPossible();
+      console.log(`[useWebPushTopics] Notification Permission changed`, { pushPossible: newPushPossible });
+      setPushPossible(newPushPossible);
+    };
+
+    if ("permissions" in navigator) {
+      navigator.permissions.query({ name: "notifications" }).then((permission) => {
+        permission.addEventListener("change", handler);
+
+        return () => {
+          permission.removeEventListener("change", handler);
+        };
+      });
+    }
+  });
+
+  const topics = useLiveQuery(
+    async () => subscriptionManager.webPushTopics(isStandalone, pushPossible),
+    // invalidate (reload) query when these values change
+    [isStandalone, pushPossible]
+  );
+
+  useWebPushListener(topics);
+
+  return topics;
+};
+
 /**
  * Start the poller and the pruner. This is done in a side effect as opposed to just in Pruner.js
  * and Poller.js, because side effect imports are not a thing in JS, and "Optimize imports" cleans
@@ -143,19 +193,15 @@ const startWorkers = () => {
   poller.startWorker();
   pruner.startWorker();
   accountApi.startWorker();
-  webPush.startWorker();
 };
 
 const stopWorkers = () => {
   poller.stopWorker();
   pruner.stopWorker();
   accountApi.stopWorker();
-  webPush.stopWorker();
 };
 
 export const useBackgroundProcesses = () => {
-  useWebPushTopicListener();
-
   useEffect(() => {
     console.log("[useBackgroundProcesses] mounting");
     startWorkers();