Wie sende ich Web-Push-Benachrichtigungen mit Firebase (FCM)?

Veröffentlicht: 2021-12-29

Um seine Benachrichtigungsdienste im Web, IOS und Android zu ermöglichen, verwendet Firebase Cloud-Dienste. Firebase Cloud Messaging (FCM) funktioniert, indem es eindeutige Token für jedes Gerät generiert und diese später zum Senden von Nachrichten an die jeweiligen Geräte verwendet. Zum Senden von Web-Push-Benachrichtigungen generiert Firebase mithilfe von JavaScript Tokens.

In diesem Blog erfahren Sie alles über die Implementierung von Web-Push-Benachrichtigungen Firebase .

Was ist Firebase Cloud Messaging?

Was ist Firebase-Cloud-Messaging?

Firebase Cloud Messaging ist der kostenlose mobile Benachrichtigungsdienst von Google. Es ermöglicht Drittanbieter-App-Entwicklern, Benachrichtigungen von Google Cloud Messaging (GCM)-Servern an ihre Benutzer zu senden. Auf diese Weise können Sie Benutzer in Echtzeit über verschiedene Daten informieren, die für die Synchronisierung verfügbar sind.

Es leitet Nachrichten von Benutzer-Apps an FCM-Server und Downstream-Nachrichten von FCM-Servern an Benutzer-Apps und weiter. Sie können FCM verwenden, um Ihre Benutzer anzusprechen, zu halten und erneut anzusprechen, unabhängig davon, wo sie sich auf der Welt befinden.

Welche Vorteile bietet das Senden von Web-Push-Benachrichtigungen mit Firebase?

Im Folgenden sind die Vorteile des Sendens von Web-Push-Benachrichtigungen von Firebase aufgeführt .

  • Kostenlos zu Beginn: Sie müssen Google nicht bezahlen, um das FCM nutzen zu können Push-Benachrichtigungsdienst. Außerdem ist es einfach zu skalieren.  
  • Keine Sorge um Berechtigungen: Da die FCM-Bibliotheken das Zusammenführen von Manifesten verwenden, werden automatisch alle erforderlichen Berechtigungen hinzugefügt. Dadurch verringert sich der Aufwand, den Sie auf sich nehmen müssen.
  • Vereinfachte Registrierung: Die Adresse, die FCM verwendet, um die Nachricht an ein Gerät zu liefern, wird als „Registrierungs-Token“ bezeichnet. Dieser Prozess wurde nun asynchron gemacht. Der Google-Bibliothek wird automatisch ein Token in Ihrem Namen zugewiesen. Wenn Sie also ein Token anfordern, erhalten Sie ein Registrierungstoken. Um mit dem Messaging zu beginnen, müssen Sie nur dieses Token an Ihre Server senden.
  • Einfache Implementierung: Die Implementierung von FCM ist schnell und einfach. Da die intuitiven APIs in einem einzigen SDK verfügbar sind, können Sie Kundenprobleme sofort angehen, ohne eine komplizierte Infrastruktur aufzubauen.
  • Analytics: Sie erhalten unbegrenzte Analysen kostenlos von Firebase. Sie erhalten wertvolle Daten über die App-Nutzung Ihrer Benutzer, Anzeigenklicks und mehr. Andere Firebase-Funktionen funktionieren gut mit Firebase Analytics. Sie können also auf alles einwirken.
  • Plattformübergreifende Unterstützung: Da APIs in einem einzigen SDK für C++, JavaScript, Android und iOS verfügbar sind, können Sie es auf verschiedene Plattformen erweitern, ohne Ihre Infrastruktur zu ändern.
  • Nachrichten zu gemeinsamen Themen: Wenn Sie Benutzer benachrichtigen möchten, die an einem bestimmten Thema interessiert sind, veröffentlichen Sie einfach Ihre Nachricht an FCM. FCM wird es allen Benutzern zustellen, die dieses Thema abonniert haben. Das Beste ist, dass es keine Grenzen für Themennachrichten gibt.
  • Nachrichten zu unterschiedlichen Themen: FCM ermöglicht auch die Kundensegmentierung, um ihnen relevante Nachrichten zu senden. Wenn Sie beispielsweise verkehrsbezogene Benachrichtigungen an Ihre Benutzer senden, erhalten Ihre Benutzer in Stadt A nur Verkehrsnachrichten, die sich auf ihre Stadt beziehen, und Benutzer in Stadt B erhalten nur Verkehrsnachrichten, die sich auf ihre Stadt beziehen.

Wie sende ich Web-Push-Benachrichtigungen mit Firebase?

Hier finden Sie Schritt-für-Schritt-Anleitungen, die Ihnen bei der Implementierung von Web-Push-Benachrichtigungen für Firebase helfen .

1. Registrieren Sie die Firebase-App

Registrieren-Firebase-App
  1. Besuchen Sie diesen Link https://console.firebase.google.com/u/0/ und klicken Sie auf die Registerkarte „Projekt hinzufügen“.
  2. Geben Sie einen Projektnamen ein und wählen Sie das Land aus. Drücken Sie dann auf die Registerkarte „Projekt erstellen“. Google prüft den Projektnamen auf Verfügbarkeit und Eindeutigkeit.
  3. Klicken Sie nun auf die Registerkarte „AGB akzeptieren“, um fortzufahren. Ihr Projekt wird darin gebaut
  4. ein paar Sekunden.
  5. Fügen Sie nun Ihre Android/IOS/Web/Unity-App zu Ihrem Projekt hinzu. Da sich dieser Blog auf Web-Push-Benachrichtigungen von Firebase konzentriert, müssen Sie fortfahren, indem Sie auf das als </> angezeigte Websymbol klicken.
  6. Geben Sie Ihrer App einen Spitznamen. Dieser Spitzname ist nur für Benutzer bestimmt. Sie können diese Funktion also verwenden, um eine bessere Unterscheidung zwischen den Apps in einem Projekt für den internen Gebrauch zu ermöglichen.
  7. Wenn Ihr Projekt nicht auf einem HTTPS-Server ausgeführt wird, fügen Sie Hosting dafür hinzu. Wenn nicht, überspringen Sie diesen Schritt einfach.
  8. Klicken Sie nun auf „App registrieren“.  
  9. Nachdem Ihre App registriert ist, erhalten Sie ein Firebase SDK, bei dem es sich um einen Code handelt. Kopiere diesen Code

Nieder. Es wird im nächsten Abschnitt zum Einsatz kommen. Falls Sie dies jetzt nicht kopieren, können Sie es im Abschnitt "Einstellungen" abrufen.

2. Fügen Sie Firebase zu Ihrem Projekt hinzu

Firebase-zu-deinem-Projekt hinzufügen
  1. Gehen Sie zum Dashboard. In der Seitenleiste finden Sie das Symbol „Einstellungen“. Klick es an. Klicken Sie im angezeigten Menü auf Projekteinstellungen.
  2. Wenn die Seite Einstellungen (Allgemeine Einstellungen) geöffnet wird, scrollen Sie zum Ende der Seite und kopieren Sie den angezeigten Code für das ausgewählte CDN.
  3. Fügen Sie am Ende den folgenden Code in Ihre HTML-Datei ein. Schließen Sie auch das CDN-Skript für Firebase-Messaging ein.

< 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-analytics.js“ > </script>

3. Betrieb des Firebase-Dienstes

1. Fügen Sie für den oben erwähnten Code den unten angegebenen Code hinzu, nachdem Sie // Initialize Firebase finden.

// Firebase initialisieren

firebase.initializeApp(firebaseConfig);const messaging=firebase.messaging(); //Benutzerdefinierte Funktion zum Ausführen des Firebase-Dienstes

  getStartToken(); // Dieser Code empfängt eine Nachricht vom Server / Ihrer App und gibt die Nachricht an die Konsole aus, wenn dieselbe Registerkarte wie das Projekt im Browser geöffnet wird

Messaging.onMessage(Funktion(Payload){console.log(“onMessage“,Payload);});

2. Sie können den unteren Code in eine separate js-Datei schreiben, die auf Ihrer HTML-Seite vorhanden ist, oder Sie können ihn an den oberen Code im <script>-Tag anhängen.

Messaging.getToken() ist eine Funktion zum Abrufen von Token mit Firebase SDK. Wenn ein Token gefunden wird, wird es zum Speichern an den Server gesendet, andernfalls wird die Erlaubnis des Benutzers über die Funktion RequestPermission() eingeholt.

setTokenSentToServer() ist eine weitere Funktion, die den lokalen Speicher verwendet, um 1 als Wert von sendTokenToServer zuzuweisen, falls das Token bereits an den Server gesendet wurde, und 0, falls das Token aufgrund eines Fehlers beim Senden nicht an den Server gesendet wird vom Server oder wird aus dem Firebase SDK abgerufen.

4. Senden von Benachrichtigungen aus dem Projekt

Senden-Nachricht-vom-Projekt

Nachdem alles, was Sie zum Senden von Benachrichtigungen aus dem Projekt benötigen, bereit ist, finden Sie hier Details dazu, wie Sie eine Benachrichtigung an den Endbenutzer senden können, dessen Token Sie kennen:

1. Zunächst müssen Sie einen Serviceschlüssel erhalten. Führen Sie die folgenden Schritte aus-

  • Öffnen Sie die Firebase-Konsole
  • Klicken Sie auf die Projekteinstellungen
  • Tippen Sie auf „Cloud Messaging“.
  • Sie finden einen Code im Feld Serverschlüssel. Kopiere es.

2. Senden von Push-Benachrichtigungen

Lassen Sie uns die Postman-Plattform verwenden, um Web-Push-Benachrichtigungen von Firebase zu senden. Hier sind die Dinge, die Sie tun müssen:

3. Legen Sie den POST-Anforderungstyp fest.

4. Geben Sie die URL ein: https://fcm.googleapis.com/fcm/send

5. Klicken Sie auf den Abschnitt Kopfzeilen.

Sie müssen zwei Header ausfüllen, nämlich Autorisierung und Inhaltstyp.

· Autorisierung: Fügen Sie den kopierten Serverschlüssel ein.

· Inhaltstyp: Anwendung/JSON (JavaScript Object Notation)

6. Klicken Sie nun auf den Bereich Körper öffnen. Fügen Sie das Benutzertoken ein, das Firebase zum Zeitpunkt der Benutzerregistrierung abgerufen hat.

7. Senden Sie nun die Anfrage ab. Sie können Push-Benachrichtigungen vom Server an Ihre Benutzer senden.

Beachten Sie, dass der Webbrowser, wenn Sie Ihre erste Push-Benachrichtigung an einen Benutzer senden, ihn um Erlaubnis bittet, Benachrichtigungen von Ihnen zu erhalten. Nur wenn er/sie die Erlaubnis erteilt, können Sie fortwährend Pushes senden. Sie können sicherstellen, dass Ihr Benutzer seine Zustimmung erteilt, indem Sie unseren Tipps zu Push-Benachrichtigungen folgen.

Zusammenfassung Sie haben inzwischen verstanden, dass das Senden von Web-Push-Benachrichtigungen mit Firebase nicht so schwierig ist, wie es scheint. Es erfordert nicht viele Ressourcen und nimmt nicht viel Zeit in Anspruch. Außerdem verwenden Web-Push-Benachrichtigungen Firebase hat keinen Einfluss auf die Kosten für die Wartung Ihrer Website oder Webanwendung. Wenn Sie noch weitere Details zu seiner Funktionalität benötigen, lesen Sie die Firebase-Dokumentation.

Machen Sie eine Produkttour

Lesen Sie auch:

  • 7 überbewertete Faktoren von Web-Push-Benachrichtigungen
  • Web-Push-Benachrichtigungen | Eine direkte E-Mail-Marketing-Taktik
  • 41 Statistiken zu Web-Push-Benachrichtigungen, die Vermarkter kennen müssen
  • Die 15 besten Push-Benachrichtigungssoftware und -tools im Jahr 2022 {im Vergleich}
  • Wie effektiv sind Web-Push-Benachrichtigungen im Vergleich zu anderen Marketingmedien?