-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
100 lines (90 loc) · 3.66 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<button onclick="subscribe()">Subscribe</button>
<div id='text'></div>
<script>
async function subscribe() {
var NEW_PUBLIC_KEY = 'BL2bZBtCnH7LHkiOfTR-yOFSWYVckXjVAWKVZJbIIpZihBw8NTiJrwoIx0IzQRgY0m7rdZkyZ0nmK_YBJrUZ5nU';
function log(text) {
console.log(text);
$("div#text").append('<div style="border-top: 1px solid lightgray; white-space: pre;">'+text+'</div>');
}
Notification.requestPermission((permissionResult) => {
log(`permissionResult: ${permissionResult}`);
// checking for not denied rather than granted, as some browsers will return undefined
if (permissionResult !== 'denied') {
subscribeUser();
}
});
function subscribeUser() {
navigator.serviceWorker.ready
.then((reg) => {
log('navigator.serviceWorker.ready()');
reg.pushManager.getSubscription()
.then((sub) => {
if (!sub){
//the user was never subscribed
subscribe(reg);
} else {
log('getSubscription() sub:' + JSON.stringify(sub, null, 2));
//check if user was subscribed with a different key
const json = sub.toJSON();
const public_key = json.keys.p256dh;
log(`getSubscription() public_key: ${public_key}`);
if (public_key != NEW_PUBLIC_KEY) {
log('unsubscribe() initiating...');
sub.unsubscribe()
.then((result) => {
log('unsubscribe() success:' + JSON.stringify(result, null, 2));
subscribe(reg);
})
.catch((err) => {
log('unsubscribe() failed:' + JSON.stringify(err, null, 2));
});
}
}
});
})
}
function subscribe(reg) {
reg.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(NEW_PUBLIC_KEY)
})
.then((sub) => {
//successfully subscribed to push
//save it to your DB etc....
log('subscribe() success:' + JSON.stringify(sub, null, 2));
})
.catch((err) => {
log('subscribe() failed:' + JSON.stringify(err, null, 2));
});
}
function urlBase64ToUint8Array(base64String) {
var padding = '='.repeat((4 - base64String.length % 4) % 4);
var base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/');
var rawData = window.atob(base64);
var outputArray = new Uint8Array(rawData.length);
for (var i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
}
if ('serviceWorker' in navigator) {
addEventListener('load', async () => {
let sw = await navigator.serviceWorker.register('sw.js');
log('serviceWorker sw.js loaded:' + JSON.stringify(sw, null, 2));
});
}
</script>
</body>
</html>