diff --git a/web/src/app/utils.js b/web/src/app/utils.js index afb153ff..244d3321 100644 --- a/web/src/app/utils.js +++ b/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; -}; diff --git a/web/src/components/Preferences.jsx b/web/src/components/Preferences.jsx index f6bd9963..d478cf29 100644 --- a/web/src/components/Preferences.jsx +++ b/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 ( @@ -86,7 +90,7 @@ const Notifications = () => { - {!isLaunchedPWA() && notifier.pushPossible() && } + {!isLaunchedPWA && notifier.pushPossible() && } ); diff --git a/web/src/components/hooks.js b/web/src/components/hooks.js index 8ad357a9..063f39f6 100644 --- a/web/src/components/hooks.js +++ b/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 = () => { - const matchMedia = window.matchMedia("(display-mode: standalone)"); - const [isStandalone, setIsStandalone] = useState(isLaunchedPWA()); +export const useIsLaunchedPWA = () => { + const [isStandalone, setIsStandalone] = useState(matchMedia.matches); 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) { - console.log(`[useStandaloneAutoWebPushSubscribe] Turning on web push automatically`); + if (isLaunchedPWA) { + console.log(`[useStandaloneWebPushAutoSubscribe] Turning on web push automatically`); prefs.setWebPushEnabled(true); // Dangle! } - }, [isStandalone]); + }, [isLaunchedPWA]); }; /**