Debug Notification API failures

This commit is contained in:
Noah Petherbridge 2024-08-12 20:41:04 -07:00
parent 2be90b4a81
commit a8dda91c3c

View File

@ -1562,48 +1562,62 @@ window.addEventListener("DOMContentLoaded", (event) => {
$pushEnableButton = document.querySelector("#grant-push-permission"), $pushEnableButton = document.querySelector("#grant-push-permission"),
$pushDeniedHelp = document.querySelector("#push-denied-help"); $pushDeniedHelp = document.querySelector("#push-denied-help");
// Get the current permission status: default, granted, denied. // Is the Notification API unavailable?
const showPermission = (permission) => { if (typeof(window.Notification) === "undefined") {
$pushStatusGranted.style.display = "none"; $pushStatusDefault.innerHTML = `<i class="fa fa-xmark mr-1"></i> Notification API unavailable`;
$pushStatusDenied.style.display = "none"; $pushStatusDefault.style.display = "";
$pushStatusDefault.style.display = "none"; return;
switch (permission) { }
case "granted":
$pushStatusGranted.style.display = "";
$pushEnableButton.innerHTML = "Test Push Notification";
break;
case "denied":
$pushEnableButton.style.display = "none";
$pushDeniedHelp.style.display = "";
$pushStatusDenied.style.display = "";
break;
default:
$pushStatusDefault.style.display = "";
$pushEnableButton.innerHTML = "Grant Push Notification Permission";
break;
}
};
showPermission(Notification.permission);
$pushEnableButton.addEventListener("click", (e) => { // And testing widely for errors...
e.preventDefault(); try {
Notification.requestPermission().then(permission => {
// Update the displayed permission status.
showPermission(Notification.permission);
// If granted, subscribe to push notifications now. // Get the current permission status: default, granted, denied.
if (permission === "granted") { const showPermission = (permission) => {
// In static/js/web-push.js $pushStatusGranted.style.display = "none";
PushNotificationSubscribe(); $pushStatusDenied.style.display = "none";
$pushStatusDefault.style.display = "none";
// Test the notification now. switch (permission) {
const notification = new Notification(`Hello from ${document.location.hostname}!`, { case "granted":
body: "This is an example notification from this site.", $pushStatusGranted.style.display = "";
icon: "/static/img/favicon-192.png", $pushEnableButton.innerHTML = "Test Push Notification";
}); break;
case "denied":
$pushEnableButton.style.display = "none";
$pushDeniedHelp.style.display = "";
$pushStatusDenied.style.display = "";
break;
default:
$pushStatusDefault.style.display = "";
$pushEnableButton.innerHTML = "Grant Push Notification Permission";
break;
} }
};
showPermission(Notification.permission);
$pushEnableButton.addEventListener("click", (e) => {
e.preventDefault();
Notification.requestPermission().then(permission => {
// Update the displayed permission status.
showPermission(Notification.permission);
// If granted, subscribe to push notifications now.
if (permission === "granted") {
// In static/js/web-push.js
PushNotificationSubscribe();
// Test the notification now.
const notification = new Notification(`Hello from ${document.location.hostname}!`, {
body: "This is an example notification from this site.",
icon: "/static/img/favicon-192.png",
});
}
});
}); });
}); } catch(err) {
$pushStatusDefault.innerHTML = `<i class="fa fa-xmark mr-1"></i> Error: ${err}`;
$pushStatusDefault.style.display = "block";
}
}); });
// Location tab scripts. // Location tab scripts.