astra/ntfy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix refreshing things when permission is granted

Browse source 
We refreshed some things but not everything, this makes it more
responsive if you have the settings page open when granting permissions,
for example.
This commit is contained in:
nimbleghost 2023-06-28 20:26:54 +02:00
parent 64ac111d55
commit 9ce3545901
4 changed files with 39 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

53
web/src/components/hooks.js
View file

@ -136,8 +136,31 @@ export const useAutoSubscribe = (subscriptions, selected) => {
};
const webPushBroadcastChannel = new BroadcastChannel("web-push-broadcast");
const matchMedia = window.matchMedia("(display-mode: standalone)");
const isIOSStandalone = window.navigator.standalone === true;
/**
* Hook to return a value that's refreshed when the notification permission changes
*/
export const useNotificationPermissionListener = (query) => {
const [result, setResult] = useState(query());
useEffect(() => {
const handler = () => {
setResult(query());
};
if ("permissions" in navigator) {
navigator.permissions.query({ name: "notifications" }).then((permission) => {
permission.addEventListener("change", handler);
return () => {
permission.removeEventListener("change", handler);
};
});
}
}, []);
return result;
};
/**
* Updates the Web Push subscriptions when the list of topics changes,
@ -146,10 +169,11 @@ const isIOSStandalone = window.navigator.standalone === true;
*/
const useWebPushListener = (topics) => {
const [lastTopics, setLastTopics] = useState();
const pushPossible = useNotificationPermissionListener(() => notifier.pushPossible());
useEffect(() => {
const topicsChanged = JSON.stringify(topics) !== JSON.stringify(lastTopics);
if (!notifier.pushPossible() || !topicsChanged) {
if (!pushPossible || !topicsChanged) {
return;
}
@ -183,25 +207,7 @@ const useWebPushListener = (topics) => {
* automatically.
*/
export const useWebPushTopics = () => {
const [pushPossible, setPushPossible] = useState(notifier.pushPossible());
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 pushPossible = useNotificationPermissionListener(() => notifier.pushPossible());
const topics = useLiveQuery(
async () => subscriptionManager.webPushTopics(pushPossible),
@ -214,6 +220,9 @@ 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).
*/