blob: 1d1e9c4119d3a3a7e5c75bb2f32f8611ad5d2487 (
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
|
<!doctype html>
<html>
<head>
<title>Desktop Notifications Demo</title>
<script>
function resetPermission() { document.Notification = 'default' }
function getPermission() { return document.Notification }
function sendNotification(title, body) {
let notification = new Notification(title, { body: body, dir: 'rtl', lang: 'de', tag: 'tst' })
notification.onclick = function() { console.info('onclick') }
notification.onclose = function() { console.info('onclose') }
notification.onerror = function(error) { console.info('onerror: ' + error) }
notification.onshow = function() { console.info('onshow') }
}
function makeNotification() {
let title = document.getElementById("title").value
let body = document.getElementById("body").value
console.log('making notification:', title)
sendNotification(title, body)
}
function requestPermission(callback) {
Notification.requestPermission().then(function (permission) {
document.Notification = permission
if (callback)
callback(permission)
})
}
function displayNotification() {
console.info('notifications are ' + document.Notification)
let state = document.getElementById('state')
if (document.Notification === 'denied') {
state.innerHTML = 'Notifications disabled'
} else if (document.Notification === 'granted') {
makeNotification()
state.innerHTML = 'notification created'
} else {
state.innerHTML = 'requesting permission...'
requestPermission(function (permission) {
console.info('notifications request: ' + permission)
if (permission === 'granted') {
makeNotification()
state.innerHTML = 'permission granted, notification created'
} else if (permission === 'denied')
state.innerHTML = 'Notifications are disabled'
})
}
}
document.addEventListener("DOMContentLoaded", function() {
document.Notification = Notification.permission
})
</script>
</head>
<body>
<form name="NotificationForm" id="notificationForm">
Title: <input type="text" id="title" placeholder="Notification title" value='sample title'><br>
Body: <input type="text" id="body" placeholder="Notification body" value='default body'><br>
<input type="button" value="Display Notification" onclick="displayNotification()"><br>
<input type="button" value="Reset Permission" onclick="resetPermission()">
</form>
<div id='state'></div>
</body>
</html>
|
