A Simple tutorial to config FCM in web app.

fcm-config.html

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

<script>
  firebase.initializeApp({
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: "",
  });
  const messaging = firebase.messaging();

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

  function getToken() {
    messaging
      .getToken({
        vapidKey: "<VAPID_KEY>",
      })
      .then((currentToken) => {
        if (currentToken) {
        } else {
        }
      })
      .catch((err) => {
        console.log("An error occurred while retrieving token. ", err);
      });
  }

  function deleteToken() {
    messaging
      .getToken()
      .then((currentToken) => {
        messaging
          .deleteToken(currentToken)
          .then(() => {
            console.log("Token deleted.");
          })
          .catch((err) => {
            console.log("Unable to delete token. ", err);
          });
      })
      .catch((err) => {
        console.log("Error retrieving registration token. ", err);
      });
  }
  getToken();
</script>

<!-- 
CURL
POST /fcm/send HTTP/1.1
Host: fcm.googleapis.com
Authorization: key=YOUR-SERVER-KEY
Content-Type: application/json

{
  "notification": {
    "title": "Portugal vs. Denmark",
    "body": "5 to 1",
    "icon": "firebase-logo.png",
    "click_action": "http://localhost:8081"
  },
  "to": "YOUR-IID-TOKEN"
} -->