117 lines
5.5 KiB
HTML
117 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
div {
|
|
padding: .5em;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
function permission_cb(permission) {
|
|
switch (permission) {
|
|
case "granted":
|
|
console.log("notification permission granted");
|
|
break;
|
|
case "denied":
|
|
console.log("[FAIL] notification permission denied");
|
|
break;
|
|
case "default":
|
|
console.log("[FAIL] notification permission aborted");
|
|
break;
|
|
default:
|
|
console.log("[FAIL] unknown value for permission: " + Notification.permission);
|
|
break;
|
|
}
|
|
}
|
|
|
|
function get_notification_permission(callback) {
|
|
if (!("Notification" in window)) {
|
|
console.log("[FAIL] notifications unavailable");
|
|
}
|
|
if (Notification.permission === "default") {
|
|
Notification.requestPermission((permission) => {
|
|
permission_cb(permission);
|
|
if (permission == "granted") {
|
|
callback();
|
|
}
|
|
});
|
|
} else {
|
|
callback();
|
|
}
|
|
}
|
|
|
|
function show_notification() {
|
|
get_notification_permission(() => {
|
|
let notification = new Notification("notification title", {
|
|
body: "notification body"
|
|
});
|
|
notification.onclick = function() { console.log("notification clicked"); };
|
|
notification.onclose = function() { console.log("notification closed"); };
|
|
notification.onshow = function() { console.log("notification shown"); };
|
|
});
|
|
}
|
|
|
|
function show_symbol_notification() {
|
|
get_notification_permission(() => {
|
|
let str = "<< && >>";
|
|
let notification = new Notification(str, { body: str });
|
|
notification.onshow = function() { console.log("notification shown"); };
|
|
});
|
|
}
|
|
|
|
function show_replacing_notifications() {
|
|
get_notification_permission(() => {
|
|
for (let i = 1; i <= 3; i++) {
|
|
let notification = new Notification(`i=${i}`, { tag: 'counter' });
|
|
notification.onshow = function() { console.log(`i=${i} notification shown`); };
|
|
}
|
|
});
|
|
}
|
|
|
|
function show_closing_notification() {
|
|
get_notification_permission(() => {
|
|
let notification = new Notification("closing notification");
|
|
notification.onclose = function() { console.log("notification closed"); };
|
|
notification.onshow = function() { console.log("notification shown"); };
|
|
setTimeout(() => notification.close(), 100);
|
|
});
|
|
}
|
|
|
|
function show_image_notification(title, filename) {
|
|
get_notification_permission(() => {
|
|
let notification = new Notification(title, { icon: `img/${filename}` });
|
|
notification.onshow = function() { console.log("notification shown"); };
|
|
});
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<input type="button" onclick="get_notification_permission(() => {})" value="Get notification permission" id="button">
|
|
</div>
|
|
<div>
|
|
<input type="button" onclick="show_notification()" value="Show notification" id="show-button">
|
|
<input type="button" onclick="show_symbol_notification()" value="Show notification with symbols" id="show-symbols-button">
|
|
<input type="button" onclick="show_replacing_notifications()" value="Show replacing notifications" id="show-replacing-button">
|
|
<input type="button" onclick="show_closing_notification()" value="Show and close notification" id="show-closing-button">
|
|
</div>
|
|
<div>
|
|
<input type="button" onclick="show_image_notification('RGBA', 'rgba.png')" value="Show image notification" id="show-image-button">
|
|
<input type="button" onclick="show_image_notification('RGB', 'rgb.png')" value="Show image notification without alpha channel" id="show-image-button-noalpha">
|
|
<input type="button" onclick="show_image_notification('Big', 'big.png')" value="Show a big image notification" id="show-image-button-big">
|
|
<input type="button" onclick="show_image_notification('Padded', 'padded.png')" value="Show a padded image notification" id="show-image-button-padded">
|
|
<input type="button" onclick="show_image_notification('Padded 2', 'padded2.png')" value="Show a padded image notification 2"
|
|
id="show-image-button-padded-2">
|
|
</div>
|
|
<div>
|
|
More advanced test pages:
|
|
<ul>
|
|
<li><a href="https://tests.peter.sh/notification-generator/">Peter Beverloo</a></li>
|
|
<li><a href="https://www.bennish.net/web-notifications.html">Ben Kennish</a></li>
|
|
<li><a href="https://web-push-book.gauntface.com/demos/notification-examples/">Web Push Book</a></li>
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
</html>
|