Firebase-Console-messaging/index.html at main · 07sumit1002/Firebase-Console-messaging · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="message" style="min-height: 80px;">
        <!-- Here to show message -->
    </div>
    <script src="https://www.gstatic.com/firebasejs/9.14.0/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.14.0/firebase-messaging-compat.js"></script>
    <script>
        const firebaseConfig = {
            // firebaseConfig here
            apiKey: "AIzaSyBGZtqrdfZzIlzL2_6v1Zd72ZVUabX-t8A",
            authDomain: "democoding-60b0b.firebaseapp.com",
            projectId: "democoding-60b0b",
            storageBucket: "democoding-60b0b.appspot.com",
            messagingSenderId: "747547245786",
            appId: "1:747547245786:web:c47053fb20a13cf0f479e3",
            measurementId: "G-B0LWWE0RHH"
        };
        const app = firebase.initializeApp(firebaseConfig)
        const messaging = firebase.messaging();

        messaging.getToken({ vapidKey: 'BKCJEiPSH_xhSR5kGFcKfzvLZ2AHoiHa5vnW4NeY8u94rIDTOxMWfU3GGd_hy26BC6e4w4IIhasX3FiZ776w6v4' }).then((currentToken) => {

        });

        messaging.onMessage((payload) => {
            // notification data receive here, use it however you want
            // keep in mind if message receive here, it will not notify in background
            console.log('Message received. ', payload);
            const messagesElement = document.querySelector('.message');
            const dataHeaderElement = document.createElement('h5');
            const BodyElement = document.createElement('h6');
            const dataElement = document.createElement('pre');
            dataElement.style = 'overflow-x:hidden;';
            dataElement.textContent = JSON.stringify(payload, null, 2);
            const parsedData = JSON.parse(dataElement.textContent);
            const title = parsedData.notification.title;
            const body = parsedData.notification.body;
            console.log('Title:', title);
            console.log('BOdy:', body);
            dataHeaderElement.textContent = title;
            BodyElement.textContent = body;
            messagesElement.appendChild(dataHeaderElement);
            // messagesElement.appendChild(dataElement);
            messagesElement.appendChild(BodyElement);
        });

    </script>
</body>

</html>