javascript-client/index.html

<html>
    <head>
        <title>Firebase Demo</title>

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    </head>

    <body>
        <div class="container mt-5">
            <div class="form-group">
                <label>Token:</label>
                <div class="alert alert-primary text-break" role="alert" id="token"></div>
            </div>

            <div class="form-group">
                <label>Messages:</label>
                <div class="alert alert-secondary text-break" role="alert" id="messages"></div>
            </div>

            <div class="form-group">
                <label>Errors:</label>
                <div class="alert alert-danger text-break" role="alert" id="error"></div>
            </div>
        </div>

        <script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-app.js"></script>
        <script src="https://www.gstatic.com/firebasejs/7.16.1/firebase-messaging.js"></script>
        
        <script>
            messagesElement = document.getElementById('messages');
            tokenElement = document.getElementById('token');
            errorElement = document.getElementById('error');

            var config = {
                'messagingSenderId': '{MESSAGING_SENDER_ID}',
                'apiKey': '{API_KEY}',	
                'projectId': '{PROJECT_ID}',	
                'appId': '{APP_ID}'
            };
            firebase.initializeApp(config);

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

                return messaging.getToken()
            })
            .then(function (token) {
                tokenElement.innerHTML = token
            })
            .catch(function (err) {
                errorElement.innerHTML = err
                console.log('Unable to get permission to notify.', err);
            });

            messaging.onMessage((payload) => {
                console.log('Message received. ', payload);
                appendMessage(payload);
            });

            function appendMessage(payload) {
                const messagesElement = document.querySelector('#messages');
                const dataHeaderElement = document.createElement('h5');
                const dataElement = document.createElement('pre');
                dataElement.style = 'overflow-x:hidden;';
                dataHeaderElement.textContent = 'Received message:';
                dataElement.textContent = JSON.stringify(payload, null, 2);
                messagesElement.appendChild(dataHeaderElement);
                messagesElement.appendChild(dataElement);
            }
        </script>
    </body>
</html>