blob: 2c4590417858a00e36bbc6ca010db31ea58dd9da (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
<!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>
|
