stabacco/firebase-messaging-sw.js

## firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.3.2/firebase-messaging.js');

var firebaseConfig = {
    apiKey: "whatever",
    authDomain: "notifications-test-stefano.1.com",
    projectId: "notifications-test-1",
    storageBucket: "notifications-test-1.appspot.com",
    messagingSenderId: "maybe",
    appId: "whoknows",
    measurementId: "ID"
  };

  firebase.initializeApp(firebaseConfig);
  const messaging = firebase.messaging();

  messaging.setBackgroupMessageHandler((payload) => {

      const title = 'Hello world';
      const options = {
          body: payload.data.status
      }
    return self.registration.showNotification(title, options)
  });


## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Simply Notify</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/app/static/css/reset.css">
  <link rel="stylesheet" href="/app/static/css/style.css">
</head>
<body>
  <div class="wrapper">
    <main>
      <header>
        <h1>Notifications tests</h1>
        <p><em>A simple application to send notifications to everyone subscribed. It's simple. It's useless. It's simply notify.</em></p>
      </header>

      <button id="sign-in">Sign In</button>
      <button id="sign-out" hidden>Sign Out</button>

      <button id="subscribe" hidden>
        Subscribe
        <img src="/img/bell.png" alt="Notifications">
      </button>
      <button id="unsubscribe" hidden>
        Unsubscribe
        <img src="/img/bell.png" alt="Notifications">
      </button>

      <form id="send-notification-form" hidden>
        <label class="sr-only" for="notification-message">Notification Message</label>
        <div>
          <textarea id="notification-message" maxlength="40" placeholder="What would you like to say?"></textarea>
          <button type="submit" id="send-notification" aria-label="Send">
            <img src="/app/static/img/send.png" alt="">
          </button>
        </div>
      </form>
    </main>

  </div>

  <!-- Firebase SDK -->
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.3.2/firebase-messaging.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.3.2/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "whatever",
    authDomain: "notifications-test-1.firebaseapp.com",
    projectId: "notifications-test-1",
    storageBucket: "notifications-test-1.appspot.com",
    messagingSenderId: "maybe",
    appId: "whoknows",
    measurementId: "ID"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  // firebase.analytics();


  function handleTokenRefresh() {
    return messaging.getToken().then(
        (token) => {
        console.log("Got a token ", token);
    });
  }

  const messaging= firebase.messaging();
  const permission = messaging.requestPermission()
  .then(
      () => handleTokenRefresh()
  ).catch(
      console.log("No permissions allowed.")
  )

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


</script>

</body>
</html>
	importScripts('https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js');
	importScripts('https://www.gstatic.com/firebasejs/8.3.2/firebase-messaging.js');

	var firebaseConfig = {
	apiKey: "whatever",
	authDomain: "notifications-test-stefano.1.com",
	projectId: "notifications-test-1",
	storageBucket: "notifications-test-1.appspot.com",
	messagingSenderId: "maybe",
	appId: "whoknows",
	measurementId: "ID"
	};

	firebase.initializeApp(firebaseConfig);
	const messaging = firebase.messaging();

	messaging.setBackgroupMessageHandler((payload) => {

	const title = 'Hello world';
	const options = {
	body: payload.data.status
	}
	return self.registration.showNotification(title, options)
	});
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Simply Notify</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="/app/static/css/reset.css">
	<link rel="stylesheet" href="/app/static/css/style.css">
	</head>
	<body>
	<div class="wrapper">
	<main>
	<header>
	<h1>Notifications tests</h1>
	<p><em>A simple application to send notifications to everyone subscribed. It's simple. It's useless. It's simply notify.</em></p>
	</header>

	<button id="sign-in">Sign In</button>
	<button id="sign-out" hidden>Sign Out</button>

	<button id="subscribe" hidden>
	Subscribe
	<img src="/img/bell.png" alt="Notifications">
	</button>
	<button id="unsubscribe" hidden>
	Unsubscribe
	<img src="/img/bell.png" alt="Notifications">
	</button>

	<form id="send-notification-form" hidden>
	<label class="sr-only" for="notification-message">Notification Message</label>
	<div>
	<textarea id="notification-message" maxlength="40" placeholder="What would you like to say?"></textarea>
	<button type="submit" id="send-notification" aria-label="Send">
	<img src="/app/static/img/send.png" alt="">
	</button>
	</div>
	</form>
	</main>

	</div>

	<!-- Firebase SDK -->
	<!-- The core Firebase JS SDK is always required and must be listed first -->
	<script src="https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js"></script>
	<script src="https://www.gstatic.com/firebasejs/8.3.2/firebase-messaging.js"></script>
	<!-- TODO: Add SDKs for Firebase products that you want to use
	https://firebase.google.com/docs/web/setup#available-libraries -->
	<script src="https://www.gstatic.com/firebasejs/8.3.2/firebase-analytics.js"></script>

	<script>
	// Your web app's Firebase configuration
	// For Firebase JS SDK v7.20.0 and later, measurementId is optional
	var firebaseConfig = {
	apiKey: "whatever",
	authDomain: "notifications-test-1.firebaseapp.com",
	projectId: "notifications-test-1",
	storageBucket: "notifications-test-1.appspot.com",
	messagingSenderId: "maybe",
	appId: "whoknows",
	measurementId: "ID"
	};
	// Initialize Firebase
	firebase.initializeApp(firebaseConfig);
	// firebase.analytics();


	function handleTokenRefresh() {
	return messaging.getToken().then(
	(token) => {
	console.log("Got a token ", token);
	});
	}

	const messaging= firebase.messaging();
	const permission = messaging.requestPermission()
	.then(
	() => handleTokenRefresh()
	).catch(
	console.log("No permissions allowed.")
	)

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


	</script>

	</body>
	</html>