Wie füge ich einer Web-App mit Firebase Push-Benachrichtigungen hinzu? +?

Während sich Webanwendungen weiterentwickeln, werden immer häufiger Funktionen verwendet, die Sie normalerweise mit einer nativen App in einer Webanwendung verknüpfen. Viele Websites senden über den Browser Benachrichtigungen an ihre Benutzer über verschiedene Ereignisse, die in der Web-App auftreten.

Heute zeige ich Ihnen detailliert die Schritte, die erforderlich sind, um solche Funktionen in Ihrer Web-App mit Firebase zu erreichen .

Benachrichtigungen mit Firebase

Firebase ist eine Plattform, die verschiedene Dienste für Mobil- und Webanwendungen bietet und Entwicklern hilft, Apps mit vielen Funktionen schnell zu erstellen.

Zum Senden der Benachrichtigungen verwenden wir den Dienst Cloud Messaging, mit dem wir Nachrichten über HTTP-Anforderungen an jedes Gerät senden können.

Projektaufbau

Zunächst benötigen Sie ein Firebase-Konto und ein neues Projekt.

Für dieses Demo-Setup verwende ich ein einfaches Projekt, das mit der Create-React-App erstellt wurde. Sie können jedoch überall dort, wo JavaScript verwendet wird, denselben Code verwenden.

Darüber hinaus müssen wir dem Projekt die Firebase-Bibliothek hinzufügen.

npm install firebase --save

Also lasst uns codieren!

Nachdem wir unser Setup abgeschlossen haben, können wir mit der Codierung des Moduls beginnen, das für Benachrichtigungen zuständig ist.

Erstellen wir eine Datei im Projektverzeichnis mit dem Namen push-notification.js.

Erstellen Sie in der Datei eine Funktion, die Firebase initialisiert und die Schlüssel Ihres Projekts übergibt.

import firebase from 'firebase'; export const initializeFirebase = () => { firebase.initializeApp({ messagingSenderId: "your messagingSenderId" }); }

Nun, da wir die Funktion haben, die wir brauchen, um sie aufzurufen.

Importieren Sie die Funktion im Einstiegspunkt Ihres Projekts und rufen Sie sie auf.

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { initializeFirebase } from './push-notification'; ReactDOM.render(, document.getElementById('root')); initializeFirebase();
Sie finden die Schlüssel zu Ihrem Projekt in der Firebase-Konsole.

Servicemitarbeiter

Ein Service Worker ist ein Skript, das Ihr Browser getrennt von der Webseite im Hintergrund ausführt und Funktionen aktiviert, für die keine Webseite oder Benutzerinteraktion erforderlich ist.

Um das Ereignis onMessage zu erhalten , benötigt Ihre App einen Servicemitarbeiter. Wenn Sie Firebase starten, sucht es standardmäßig nach einer Datei mit dem Namen firebase-messaging-sw.js.

Wenn Sie jedoch bereits eine haben und diese nutzen möchten, um Benachrichtigungen zu erhalten, können Sie beim Start von Firebase angeben, welchen Service Worker sie verwenden soll. Zum Beispiel:

export const inicializarFirebase = () => { firebase.initializeApp({ messagingSenderId: 'your messagingSenderId' }); navigator.serviceWorker .register('/my-sw.js') .then((registration) => { firebase.messaging().useServiceWorker(registration); }); }

Dieser Servicemitarbeiter importiert grundsätzlich das Skript, das zum Anzeigen der Benachrichtigungen erforderlich ist, wenn sich Ihre App im Hintergrund befindet.

Wir müssen firebase-messaging-sw.jsden Speicherort hinzufügen, an dem Ihre Dateien bereitgestellt werden. Da ich die Create-React-App verwende, werde ich sie mit folgendem Inhalt in den öffentlichen Ordner einfügen:

importScripts('//www.gstatic.com/firebasejs/4.8.1/firebase-app.js'); importScripts('//www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js'); firebase.initializeApp({ messagingSenderId: "your messagingSenderId again" }); const messaging = firebase.messaging();

Bitte um Erlaubnis zum Senden von Benachrichtigungen

Nun, jeder weiß, wie ärgerlich es ist, die Website zu betreten und um die Genehmigung zum Senden von Benachrichtigungen zu bitten. Also lass es uns anders machen!

Lassen Sie den Benutzer entscheiden, ob er Benachrichtigungen erhalten möchte oder nicht.

Lassen Sie uns zunächst die Funktion erstellen, die die Anforderung stellt, und das Token des Benutzers zurückgeben.

Fügen Sie in unserer Datei push-notification.js die folgende Funktion hinzu:

export const askForPermissioToReceiveNotifications = async () => { try { const messaging = firebase.messaging(); await messaging.requestPermission(); const token = await messaging.getToken(); console.log('token do usuário:', token); return token; } catch (error) { console.error(error); } }

Wir müssen diese Funktion von irgendwoher aufrufen, also füge ich sie auf Knopfdruck hinzu.

import React from 'react'; import { askForPermissioToReceiveNotifications } from './push-notification'; const NotificationButton = () => (  Clique aqui para receber notificações  ); export default NotificationButton;

Okay, mal sehen, wie es funktioniert:

Benachrichtigungen senden

Um die Benachrichtigung zu senden, müssen wir eine Anfrage an die Firebase-API senden, um sie über das Token zu informieren, das der Benutzer erhalten wird.

In den folgenden Beispielen verwende ich Postman, aber Sie können dies von jedem anderen REST-Client aus tun.

Grundsätzlich müssen wir eine POST-Anfrage an //fcm.googleapis.com/fcm/send stellen, indem wir einen JSON im Anfragetext senden.

Unten ist die Struktur des JSON, der gesendet wird:

{ "notification": { "title": "Firebase", "body": "Firebase is awesome", "click_action": "//localhost:3000/", "icon": "//url-to-an-icon/icon.png" }, "to": "USER TOKEN" }

Im Anforderungsheader müssen wir den Serverschlüssel unseres Projekts in Firebase und den Inhaltstyp übergeben:

Content-Type: application/json Authorization: key=SERVER_KEY
Der Serverschlüssel befindet sich in den Projekteinstellungen in der Firebase-Konsole auf der Registerkarte Cloud Messaging.

Benachrichtigungen in Aktion

Denken Sie daran, dass Benachrichtigungen nur angezeigt werden, wenn Ihre App minimiert ist oder im Hintergrund.

So senden wir eine direkte Benachrichtigung an ein Gerät.

Senden Sie Benachrichtigungen an eine Gruppe von Benutzern

Nun, da wir gesehen haben, wie eine Benachrichtigung an einen Benutzer gesendet wird, wie senden wir eine Benachrichtigung an mehrere Benutzer gleichzeitig?

To do this, Firebase has a feature called topic, where you insert multiple tokens for a specific topic, and you can send the same notification to all of them from a single request.

How to do this

We will basically send a POST request to the address //iid.googleapis.com/iid/v1/TOKEN/rel/topics/TOPIC_NAME,passing the topic name and the token in the URL.

Do not forget to pass in the header the same authorization that we used to send the notification.

Sending the notification to users subscribed to any topic is very similar to sending a notification to a single user. The difference is that we need to pass the topic name in the “to” attribute instead of the token.

See the example below:

{ "notification": { "title": "Firebase", "body": "Firebase topic message", "click_action": "//localhost:3000/", "icon": "//localhost:3000/icon.png" }, "to": "/topics/TOPIC_NAME" }

Conclusion

Thanks for reading this! I hope you now understand how to make use of push notifications. The repository with the demo code can be found here.

To get notified of my future posts, follow me on GitHub or Twitter.