Fix: refresh web push pref on standalone change

web/src/app/utils.js

@@ -263,16 +263,3 @@ export const urlB64ToUint8Array = (base64String) => {
   }
   return outputArray;
 };
-
-export const isLaunchedPWA = () => {
-  if (window.matchMedia("(display-mode: standalone)").matches) {
-    return true;
-  }
-
-  // iOS
-  if (window.navigator.standalone === true) {
-    return true;
-  }
-
-  return false;
-};

web/src/components/Preferences.jsx

@@ -36,7 +36,7 @@ import { Info } from "@mui/icons-material";
 import { useOutletContext } from "react-router-dom";
 import theme from "./theme";
 import userManager from "../app/UserManager";
-import { isLaunchedPWA, playSound, shuffle, sounds, validUrl } from "../app/utils";
+import { playSound, shuffle, sounds, validUrl } from "../app/utils";
 import session from "../app/Session";
 import routes from "./routes";
 import accountApi, { Permission, Role } from "../app/AccountApi";
@@ -49,6 +49,7 @@ import { ReserveAddDialog, ReserveDeleteDialog, ReserveEditDialog } from "./Rese
 import { UnauthorizedError } from "../app/errors";
 import { subscribeTopic } from "./SubscribeDialog";
 import notifier from "../app/Notifier";
+import { useIsLaunchedPWA } from "./hooks";
 
 const maybeUpdateAccountSettings = async (payload) => {
   if (!session.exists()) {
@@ -77,6 +78,9 @@ const Preferences = () => (
 
 const Notifications = () => {
   const { t } = useTranslation();
+
+  const isLaunchedPWA = useIsLaunchedPWA();
+
   return (
     <Card sx={{ p: 3 }} aria-label={t("prefs_notifications_title")}>
       <Typography variant="h5" sx={{ marginBottom: 2 }}>
@@ -86,7 +90,7 @@ const Notifications = () => {
         <Sound />
         <MinPriority />
         <DeleteAfter />
-        {!isLaunchedPWA() && notifier.pushPossible() && <WebPushEnabled />}
+        {!isLaunchedPWA && notifier.pushPossible() && <WebPushEnabled />}
       </PrefGroup>
     </Card>
   );

web/src/components/hooks.js

@@ -2,7 +2,7 @@ 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, isLaunchedPWA, topicUrl } from "../app/utils";
+import { disallowedTopic, expandSecureUrl, topicUrl } from "../app/utils";
 import routes from "./routes";
 import connectionManager from "../app/ConnectionManager";
 import poller from "../app/Poller";
@@ -212,17 +212,24 @@ export const useWebPushTopics = () => {
   return topics;
 };
 
-/**
+const matchMedia = window.matchMedia("(display-mode: standalone)");
+
+const isIOSStandAlone = window.navigator.standalone === true;
+
+/*
  * Watches the "display-mode" to detect if the app is running as a standalone app (PWA),
- * and enables "Web Push" if it is.
  */
-export const useStandaloneWebPushAutoSubscribe = () => {
+export const useIsLaunchedPWA = () => {
-  const matchMedia = window.matchMedia("(display-mode: standalone)");
+  const [isStandalone, setIsStandalone] = useState(matchMedia.matches);
-  const [isStandalone, setIsStandalone] = useState(isLaunchedPWA());
 
   useEffect(() => {
+    // no need to listen for events on iOS
+    if (isIOSStandAlone) {
+      return () => {};
+    }
+
     const handler = (evt) => {
-      console.log(`[useStandaloneAutoWebPushSubscribe] App is now running ${evt.matches ? "standalone" : "in the browser"}`);
+      console.log(`[useIsLaunchedPWA] App is now running ${evt.matches ? "standalone" : "in the browser"}`);
       setIsStandalone(evt.matches);
     };
 
@@ -231,14 +238,23 @@ export const useStandaloneWebPushAutoSubscribe = () => {
     return () => {
       matchMedia.removeEventListener("change", handler);
     };
-  });
+  }, []);
+
+  return isIOSStandAlone || isStandalone;
+};
+
+/**
+ * Watches the result of `useIsLaunchedPWA` and enables "Web Push" if it is.
+ */
+export const useStandaloneWebPushAutoSubscribe = () => {
+  const isLaunchedPWA = useIsLaunchedPWA();
 
   useEffect(() => {
-    if (isStandalone) {
+    if (isLaunchedPWA) {
-      console.log(`[useStandaloneAutoWebPushSubscribe] Turning on web push automatically`);
+      console.log(`[useStandaloneWebPushAutoSubscribe] Turning on web push automatically`);
       prefs.setWebPushEnabled(true); // Dangle!
     }
-  }, [isStandalone]);
+  }, [isLaunchedPWA]);
 };
 
 /**