Eine Einführung wie Browser Benachrichtigungen nur mit JS umgesetzt werden.

Browser Benachrichtigungen ermöglichen es dir als Website-Anbieter Nachrichten an alle Arten (Desktop, Tablet, Mobile) zu schicken.  Damit das passiert, muss eine technische Implementierung auf der jeweiligen Seite eingebaut werden, um den Nutzer um Bestätigung zu bitten, dass du ihm Nachrichten direkt an den Browser schicken darfst.

Google bietet über den zugekauften Dienstleister unter Anderem die Möglichkeit mittels Cloud Messages die besagten Browser Notification einzurichten.

Im folgenden wird Schritt für Schritt erklärt was du machen musst, damit du auch bald deine Nutzer dezent* auf die Möglichkeit hinweisen kannst.

*Anfragen im Browser nerven und verärgern deine Nutzer, solltest du ungefragt direkt die Meldung zur Erlaubnis einholen. Leider machen das viele und deshalb ist diese technisch leider unbegründet auch etwas negativ behaftet, weil viele es nicht richtig benutzen.

Schritt 1: Projekt und App in Firebase anlegen.

1. Lege ein neues Projekt in der Firebase Console an
2. Klicke auf den Menüpunkt „Project Overview“ und Klicke auf App vom Typ Web
3. Vergebe einen aussagekräftigen Namen, der den Sinn deines Projektes wiederspiegelt
4. Ignoriere das Angebot für das Firebase Hosting.
5. Kopiere dir den generierten JavaScript-Code in die Zwischenablage und speichere diesen ab.

Schritt 2: Call-To-Action Button einfügen.

Im zweiten Schritt müssen wir dem Nutzer die Möglichkeit bieten sich für die Browser Benachrichtigungen anzumelden. Wie schon am Anfang angesprochen, sollte diese Technik dezent angeboten werden. Also nur dann, wenn der Nutzer explizit auf den Button klickt, soll die Aufforderung zur Erlaubnis angezeigt werden.

Auf dem Bild links siehst du das blau markierte Icon, es ist eine Implementierung auf meinem Blog browser.tips, diese bauen wir jetzt nach. Selbstverständlich kann das durch jede Art von Icon, Text oder Bild ausgetauscht werden, für das Beispiel sollte es aber reichen.

Schritt 2: Der HTML-Code

Den HTML Code kopierst du dir in die Zwischenablage und passt ihn entsprechend deiner Anforderungen an.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
<style>
.icon-bar {
  width: 100%;
  overflow: auto;
}

.icon-bar a {
    float: left;
    width: 50%;
    text-align: center;
    padding: 0px 0px;
    transition: all 0.3s ease;
    color: #000;
    font-size: 50px;
    text-decoration: none;
    margin-bottom: 25px;
  }
  
  .icon-text {
    font-size: 15px;
    display: block;
    text-decoration: none;;
  }

.icon-bar a:hover {
  color:#11702c;
}

.active {
  background-color: #4CAF50;
}
</style>
<div class="icon-bar">
  <a onclick="initNotification(this)" id="browser-notification"><i class="far fa-bell"></i><span class="icon-text">Browser</span></a>
</div>

Schritt 3: JavaScript Code anpassen

Im letzten Schritt wird der JavaScript Code angepasst, der dir nach Anlegung der Firebird App angezeigt wurde.

Bei der Anpassung wie im fertigen Javascript Code die Zeilen mit Kommentar: „Hinzugefügt“ in deinen Code einfügen.

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-app.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/7.6.1/firebase-messaging.js"></script> <!-- Hinzugefügt-->

<script>

 var el = document.getElementById("browser-notification"); <!-- Hinzugefügt-->

if(el) { <!-- Hinzugefügt-->

  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "AIzaSyCjqNJrsDAMvoZnJOC1g4V5jTugEsRHFvI",
    authDomain: "lorem-f9b67.firebaseapp.com",
    databaseURL: "https://lorem-f9b67.firebaseio.com",
    projectId: "lorem-f9b67",
    storageBucket: "lorem-f9b67.appspot.com",
    messagingSenderId: "98207253861",
    appId: "1:98207253861:web:36997aeafacd0d95a20d8c"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);  
 window.messaging = firebase.messaging(); <!-- Hinzugefügt-->
  
  window.messaging.onMessage(function(payload) { <!-- Hinzugefügt-->
	new Notification('News', payload.notification); <!-- Hinzugefügt-->
  }); <!-- Hinzugefügt-->
  
  if(Notification.permission === "granted") { <!-- Hinzugefügt-->
      el.hidden = true; <!-- Hinzugefügt-->
  } <!-- Hinzugefügt-->
}  <!-- Hinzugefügt-->
</script>
<script> <!-- Hinzugefügt-->

function initNotification(el) { <!-- Hinzugefügt-->
  window.messaging.requestPermission(); <!-- Hinzugefügt-->
} <!-- Hinzugefügt--> 
</script> <!-- Hinzugefügt-->

Schritt 4: JavaScript Code hinzufügen und testen

Das HTML und den fertigen JavaScript-Code an eine Position im HTML deiner Wahl platzieren und viel Spaß 🙂