Rename things, add comments

web/src/app/WebPush.js

@@ -0,0 +1,91 @@
+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 updateIntervalMillis = 60 * 60 * 1_000; // 1 hour
+
+/**
+ * Updates the Web Push subscriptions when the list of topics changes.
+ */
+export const useWebPushTopicListener = () => {
+  const topics = useLiveQuery(() => subscriptionManager.webPushTopics());
+  const [lastTopics, setLastTopics] = useState();
+
+  useEffect(() => {
+    const topicsChanged = JSON.stringify(topics) !== JSON.stringify(lastTopics);
+    if (!notifier.pushPossible() || !topicsChanged) {
+      return;
+    }
+
+    (async () => {
+      try {
+        console.log("[useWebPushUpdateWorker] Refreshing web push subscriptions");
+        await subscriptionManager.updateWebPushSubscriptions(topics);
+        setLastTopics(topics);
+      } catch (e) {
+        console.error("[useWebPushUpdateWorker] Error refreshing web push subscriptions", e);
+      }
+    })();
+  }, [topics, lastTopics]);
+};
+
+/**
+ * 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();