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"), $pushStatusDefault = document.querySelector("#push-status-default"),
$pushEnableButton = document.querySelector("#grant-push-permission"), $pushEnableButton = document.querySelector("#grant-push-permission"),
$pushDeniedHelp = document.querySelector("#push-denied-help"); $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. // And testing widely for errors...
const showPermission = (permission) => { try {
$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) => { // Get the current permission status: default, granted, denied.
e.preventDefault(); const showPermission = (permission) => {
Notification.requestPermission().then(permission => { $pushStatusGranted.style.display = "none";
// Update the displayed permission status. $pushStatusDenied.style.display = "none";
showPermission(Notification.permission); $pushStatusDefault.style.display = "none";
switch (permission) {
// If granted, subscribe to push notifications now. case "granted":
if (permission === "granted") { $pushStatusGranted.style.display = "";
// In static/js/web-push.js $pushEnableButton.innerHTML = "Test Push Notification";
PushNotificationSubscribe(); break;
case "denied":
// Test the notification now. $pushEnableButton.style.display = "none";
const notification = new Notification(`Hello from ${document.location.hostname}!`, { $pushDeniedHelp.style.display = "";
body: "This is an example notification from this site.", $pushStatusDenied.style.display = "";
icon: "/static/img/favicon-192.png", 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.