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

@ -1561,49 +1561,63 @@ window.addEventListener("DOMContentLoaded", (event) => {
$pushStatusDefault = document.querySelector("#push-status-default"),
$pushEnableButton = document.querySelector("#grant-push-permission"),
$pushDeniedHelp = document.querySelector("#push-denied-help");
// Is the Notification API unavailable?
if (typeof(window.Notification) === "undefined") {
$pushStatusDefault.innerHTML = `<i class="fa fa-xmark mr-1"></i> Notification API unavailable`;
$pushStatusDefault.style.display = "";
return;
}
// Get the current permission status: default, granted, denied.
const showPermission = (permission) => {
$pushStatusGranted.style.display = "none";
$pushStatusDenied.style.display = "none";
$pushStatusDefault.style.display = "none";
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);
// And testing widely for errors...
try {
$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",
});
// Get the current permission status: default, granted, denied.
const showPermission = (permission) => {
$pushStatusGranted.style.display = "none";
$pushStatusDenied.style.display = "none";
$pushStatusDefault.style.display = "none";
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) => {
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.