Hinzufügen von Push-Benachrichtigungen zu einer Web-App mit Firebase +

Mit der Entwicklung von Webanwendungen stoßen Sie immer häufiger auf Funktionen, die Sie normalerweise mit einer nativen App in einer Webanwendung verknüpfen. Viele Websites senden ihren Benutzern über den Browser Benachrichtigungen über verschiedene Ereignisse, die in der Web-App auftreten.

Heute zeige ich Ihnen im Detail die Schritte, die erforderlich sind, um diese Funktionalität 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 müssen Sie über ein Firebase-Konto verfügen und ein neues Projekt darin erstellen.

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

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

npm install firebase --save

Also lasst uns programmieren!

Nachdem wir das 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.

Firebase aus 'Firebase' importieren;
export const initializeFirebase = () => {
  firebase.initializeApp ({
    messagingSenderId: "Ihre messagingSenderId"
  });
}

Nun, da wir die Funktion haben, müssen wir sie aufrufen.

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

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

Servicemitarbeiter

Ein Servicemitarbeiter ist ein Skript, das Ihr Browser unabhängig von der Webseite im Hintergrund ausführt und Funktionen aktiviert, für die keine Webseite oder Benutzerinteraktion erforderlich ist.

Für den Empfang des Ereignisses onMessage benötigt Ihre App einen Servicemitarbeiter. Wenn Sie Firebase starten, wird standardmäßig nach einer Datei mit dem Namen firebase-messaging-sw.js gesucht.

Wenn Sie jedoch bereits eine haben und diese nutzen möchten, um Benachrichtigungen zu erhalten, können Sie während des Firebase-Starts angeben, welcher Service-Worker verwendet wird. Zum Beispiel:

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

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

Wir müssen firebase-messaging-sw.js an den Speicherort hinzufügen, an dem Ihre Dateien bereitgestellt werden. Da ich die App zum Erstellen und Reagieren verwende, füge ich sie dem öffentlichen Ordner mit folgendem Inhalt hinzu:

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

Erlaubnis zum Senden von Benachrichtigungen anfordern

Nun, jeder weiß, wie ärgerlich es ist, die Site zu betreten und um die Erlaubnis zu bitten, Benachrichtigungen zu senden. Also lass es uns anders machen!
Lassen Sie den Benutzer entscheiden, ob er Benachrichtigungen erhalten möchte oder nicht.

Zunächst erstellen wir die Funktion, die die Anforderung erstellt, und geben das Token des Benutzers zurück.

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

export const askForPermissioToReceiveNotifications = async () => {
  Versuchen {
    const messaging = firebase.messaging ();
    warten Sie auf messaging.requestPermission ();
    const token = messaging.getToken () abwarten;
    console.log ('token do usuário:', token);
    
    Token zurückgeben;
  } catch (error) {
    console.error (Fehler);
  }
}

Wir müssen diese Funktion von einer beliebigen Stelle aus aufrufen, damit ich sie auf Knopfdruck hinzufügen kann.

importieren Reagieren von 'reagieren';
import {askForPermissioToReceiveNotifications} from './push-notification';
const NotificationButton = () => (
    
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-Anforderung an https://fcm.googleapis.com/fcm/send senden, indem wir eine JSON im Anforderungshauptteil senden.

Nachfolgend finden Sie die Struktur des zu sendenden JSON:

{
    "Benachrichtigung": {
        "title": "Firebase",
        "body": "Firebase is awesome",
        "click_action": "http: // localhost: 3000 /",
        "icon": "http: //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:

Inhaltstyp: Anwendung / json
Autorisierung: 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 sich im Hintergrund befindet.

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 wird eine Benachrichtigung an mehrere Benutzer gleichzeitig gesendet?

Zu diesem Zweck verfügt Firebase über eine Funktion namens "Thema", bei der Sie mehrere Token für ein bestimmtes Thema einfügen und von einer einzigen Anforderung aus dieselbe Benachrichtigung an alle senden können.

Wie macht man das

Grundsätzlich senden wir eine POST-Anfrage an die Adresse https://iid.googleapis.com/iid/v1/TOKEN/rel/topics/TOPIC_NAME, wobei der Themenname und das Token in der URL übergeben werden.

Vergessen Sie nicht, im Header die gleiche Berechtigung anzugeben, die wir zum Versenden der Benachrichtigung verwendet haben.

Das Senden der Benachrichtigung an Benutzer, die ein Thema abonniert haben, ähnelt dem Senden einer Benachrichtigung an einen einzelnen Benutzer. Der Unterschied besteht darin, dass wir den Themennamen im Attribut „to“ anstelle des Tokens übergeben müssen.

Siehe folgendes Beispiel:

{
    "Benachrichtigung": {
        "title": "Firebase",
        "body": "Firebase-Themenmeldung",
        "click_action": "http: // localhost: 3000 /",
        "icon": "http: // localhost: 3000 / icon.png"
    },
    "to": "/ topics / TOPIC_NAME"
}

Fazit

Danke fürs Lesen! Ich hoffe, Sie verstehen jetzt, wie Sie Push-Benachrichtigungen verwenden können. Das Repository mit dem Demo-Code finden Sie hier.

Um über meine zukünftigen Beiträge informiert zu werden, folge mir auf GitHub oder Twitter.