index.html

<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/7.6.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.6.0/firebase-messaging.js"></script>
    <!-- For an optimal experience using Cloud Messaging, also add the Firebase SDK for Analytics. -->
    <script src="https://www.gstatic.com/firebasejs/7.6.0/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.6.0/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.6.0/firebase-firestore.js"></script>
    <script>
      MsgElem = document.getElementById("msg");
      TokenElem = document.getElementById("token");
      NotisElem = document.getElementById("notis");
      ErrElem = document.getElementById("err");
      // Initialize Firebase
      // TODO: Replace with your project's customized code snippet
      const firebaseConfig = {
        apiKey: "AIzaSyAS6TCYSTEJhLZ0gkFEvK9fbVylVxvlJqs",
        authDomain: "pushnotification-ac7c2.firebaseapp.com",
        databaseURL: "https://pushnotification-ac7c2.firebaseio.com",
        projectId: "pushnotification-ac7c2",
        storageBucket: "pushnotification-ac7c2.appspot.com",
        messagingSenderId: "468475721690",
        appId: "1:468475721690:web:2981ddcfe6580e894c72e3"
      };
      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 = "token is : " + token;
        })
        .catch(function(err) {
          ErrElem.innerHTML = ErrElem.innerHTML + "; " + err;
          console.log("Unable to get permission to notify.", err);
        });
      messaging.onMessage(function(payload) {
        console.log("Message received. ", payload);
        NotisElem.innerHTML = NotisElem.innerHTML + JSON.stringify(payload);
        //kenng - foreground notifications
        const { title, ...options } = payload.notification;
        navigator.serviceWorker.ready.then(registration => {
          registration.showNotification(title, options);
        });
      });
    </script>
  </body>
</html>