Fix: refresh web push pref on standalone change

This commit is contained in:
nimbleghost 2023-06-26 08:53:03 +02:00
parent 5627097a6c
commit 175ab5ea76
3 changed files with 33 additions and 26 deletions

View File

@ -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;
};

View File

@ -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>
);

View File

@ -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]);
};
/**