dominicaligent.github.io/index.html at master · dominicaligent/dominicaligent.github.io · GitHub

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
<html>
    <title>Firebase Messaging Demo</title>
    <style>
        div {
            margin-bottom: 15px;
        }
    </style>
    <body>
        <div id="token"></div>
        <div id="msg"></div>
        <div id="notis"></div>
        <div id="err"></div>

        <script src="https://www.gstatic.com/firebasejs/8.9.0/firebase-app.js"></script>

	<script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-messaging.js"></script>
	<script>
	    MsgElem = document.getElementById('msg');
	    TokenElem = document.getElementById('token');
	    NotisElem = document.getElementById('notis');
	    ErrElem = document.getElementById('err');

	    // TODO: Replace firebaseConfig you get from Firebase Console
	    var firebaseConfig = {
		apiKey: "AIzaSyBZGeBMlUV6JaKNBRljp-MhGS2MNfHUcQk",
		authDomain: "test-dominic.firebaseapp.com",
		projectId: "test-dominic",
		storageBucket: "test-dominic.appspot.com",
		messagingSenderId: "91987202286",
		appId: "1:91987202286:web:e7162b1c035eecf8ce23ff",
		measurementId: "G-JDDNNFBQWF"
	    };
	    firebase.initializeApp(firebaseConfig);

	    const messaging = firebase.messaging();
	    messaging
		.requestPermission()
		.then(function () {
		    MsgElem.innerHTML = 'Notification permission granted.';
		    console.log('Notification permission granted.');

		    // get the token in the form of promise
		    return messaging.getToken();
		})
		.then(function (token) {
		    TokenElem.innerHTML = 'Device token is : <br>' + token;
		})
		.catch(function (err) {
		    ErrElem.innerHTML = ErrElem.innerHTML + '; ' + err;
		    console.log('Unable to get permission to notify.', err);
		});

	    let enableForegroundNotification = true;
	    messaging.onMessage(function (payload) {
		console.log('Message received. ', payload);
		NotisElem.innerHTML =
		    NotisElem.innerHTML + JSON.stringify(payload);

		if (enableForegroundNotification) {
		    const notificationTitle = 'Title';
		    const notificationOptions = {
		        body: 'Test Dominic',
		        icon: 'https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-600w-1389188327.jpg',
		        image: 'https://image.shutterstock.com/image-photo/sample-wood-chipboard-wooden-laminate-600w-1343662607.jpg'

		    };
		    console.log(notificationTitle);
		    console.log(notificationOptions);
		    navigator.serviceWorker
		        .getRegistrations()
		        .then((registration) => {
		            registration[0].showNotification(notificationTitle, notificationOptions);
		        });
		}
	    });
	</script>
    </body>
</html>