So integrieren Sie Push-Benachrichtigungen in Ihre PWA

In unserem heutigen Tutorial werden wir Push-Benachrichtigungen mithilfe von Firebase in eine PWA integrieren, oder genauer gesagt, mithilfe der darin enthaltenen Cloud Messaging-Funktion, die das Senden von Nachrichten mithilfe von HTTPS-Anforderungen ermöglicht.

Progressive Web Apps und Push-Benachrichtigungen

Da die Progressive Web App eine sich ständig verändernde Bewegung ist, ist es kaum überraschend zu sehen, dass die Technologie selbst (funktionsmäßig) mit ihrem nativen App-Pendant auf Augenhöhe geworden ist.

 Empfohlene Lektüre: PWA vs. Native: Was passt besser zu Ihnen?

Benachrichtigungsauslöser geben Entwicklern die Möglichkeit, Benachrichtigungen zu planen, selbst wenn sich das Gerät des Benutzers im Flugmodus befindet.

Jon Krafcik, Chrome Dev Summit 2019

Angesichts all dieser radikalen Änderungen wäre es eine Verschwendung, sie nicht zu nutzen, um noch mehr Einnahmen für Ihre PWA zu erzielen. Und es ist nicht einmal etwas übermäßig Kompliziertes, da Sie mit diesem Tutorial ganz einfach eine eigene Push-Benachrichtigungsfunktion einrichten können.

 Empfohlene Lektüre: 9 Must-Have-Features einer Progressive Web App (PWA) für E-Commerce

So integrieren Sie Push-Benachrichtigungen in Ihre PWA

In unserem heutigen Tutorial werden wir Push-Benachrichtigungen mithilfe von Firebase in eine PWA integrieren, insbesondere die darin enthaltene Cloud Messaging -Funktion, die das Senden von Nachrichten mithilfe von HTTPS-Anforderungen ermöglicht.

Voraussetzungen

• Ein Firebase-Konto (da Sie ein Projekt in Firebase erstellen werden)
• Eine progressive Web-App. Für eine vereinfachte Demonstration verwenden wir eine create-react-app, bei der es sich um eine grundlegende PWA handelt, die mit einem Befehl erstellt werden kann

Schritt 1 : Erstellen Sie eine einfache PWA

Da wir mit create-react-app eine einfache PWA erstellen werden, laden wir zuerst NodeJS herunter. Nachdem Sie die Installation von NodeJS abgeschlossen haben, öffnen Sie die NodeJS-Eingabeaufforderung und führen Sie die folgenden Befehle aus.

So erstellen Sie eine einfache React-App in Ihrem angegebenen Verzeichnis:

 npx create-react-app your-pwa-directory

Ändern Sie das aktuelle Arbeitsverzeichnis in Ihre neu erstellte React-App:

 cd ihr-pwa-verzeichnis

Fügen Sie die Firebase-JavaScript-Bibliothek zum Projekt hinzu:

 npm install firebase --save 

Schritt 2: Erstellen Sie Ihre push-notification.js

Der nächste Schritt besteht darin, das Modul zu erstellen, das für alle Ihre Benachrichtigungsverarbeitungen zuständig ist. Erstellen Sie in <your-pwa-directory>\src eine Datei namens push-notification.js .

Lassen Sie uns zunächst eine Funktion erstellen, die Firebase initialisiert und die Schlüssel Ihres Projekts übergibt. Sie finden die Schlüssel für Ihr Projekt, indem Sie zu Firebase > Projektübersicht → Projekteinstellungen gehen und auf dieses Symbol klicken:

Dadurch werden Sie zu einer anderen Seite weitergeleitet, die das Firebase SDK für Ihre PWA enthält:

Nachdem wir nun die Schlüssel für unser Projekt haben, fügen wir den folgenden Code in Ihre push-notification.js ein.

 Firebase aus 'Firebase' importieren;
export const initializeFirebase = () => {
  firebase.initializeApp({
    apiKey: "XXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXX",
    Datenbank-URL: "XXXXXXXXXXXXX",
    Projekt-ID: "XXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXX",
    MessagingSenderId: "XXXXXXXXXXXXX",
    appId: "XXXXXXXXXXXXX"
  });
}

Damit haben Sie die für Ihre gesamte Benachrichtigungsverarbeitung zuständige Funktion erstellt, die Sie jetzt importieren und aufrufen müssen. Bearbeiten Sie Ihre index.js wie folgt:

 Reagieren von 'Reagieren' importieren;
importiere ReactDOM aus 'react-dom';
importiere './index.css';
App aus „./App“ importieren;
* als serviceWorkerRegistration aus „./serviceWorkerRegistration“ importieren;
reportWebVitals aus „./reportWebVitals“ importieren;
Firebase aus 'Firebase' importieren;
import { initializeFirebase } from './push-notification';
ReactDOM.render(<App />, document.getElementById('root'));
initializeFirebase();

Schritt 3: Erstellen Sie einen Servicemitarbeiter

Service Workers ist der Name der Technologie hinter einer Progressive Web App, die ihre Offline-Fähigkeit, Push-Benachrichtigungen und Ressourcen-Caching unterstützt.

SimiCart, alles, was Sie über progressive Web-Apps wissen müssen

Ein Servicemitarbeiter ist für den Empfang des onMessage Ereignisses und damit für das Senden von Benachrichtigungen an das Gerät des Benutzers erforderlich. Standardmäßig sucht Firebase automatisch nach einer Datei namens firebase-messaging-sw.js .

Lassen Sie uns firebase-messaging-sw.js zu dem Verzeichnis hinzufügen, in dem Ihre Dateien bereitgestellt werden. Da es sich bei uns um ein create-react-app Projekt handelt, wird diese firebase-messaging-sw.js in unseren öffentlichen Ordner verschoben:

 importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js');
firebase.initializeApp({
    apiKey: "XXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXX",
    Datenbank-URL: "XXXXXXXXXXXXX",
    Projekt-ID: "XXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXX",
    MessagingSenderId: "XXXXXXXXXXXXX",
    appId: "XXXXXXXXXXXXX"
});
const Messaging = firebase.messaging ();

Wenn Sie noch nichts von PWA Service Worker gehört haben, haben wir einen exklusiven Artikel für Sie, um alles über diese erstaunliche Technologie zu erfahren.

Schritt 4: Fordern Sie Benutzerberechtigungen zum Senden von Benachrichtigungen an

Es ist das Zeitalter der Privatsphäre, und Sie möchten Ihre Benutzer nicht durch das Senden unerwünschter und nicht autorisierter Benachrichtigungen verärgern!

Um die Erlaubnis Ihres Benutzers anzufordern, fügen Sie dies einfach zu Ihrer push-notification.js hinzu:

 Firebase aus 'Firebase' importieren;
 
export const initializeFirebase = () => {
  firebase.initializeApp({
    apiKey: "XXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXXXXX",
    Datenbank-URL: "XXXXXXXXXXXXX",
    Projekt-ID: "XXXXXXXXXXXXX",
    storageBucket: "XXXXXXXXXXXXX",
    MessagingSenderId: "XXXXXXXXXXXXX",
    appId: "XXXXXXXXXXXXX"
  });
}
 
export const askForPermissionToReceiveNotifications = async () => {
  Versuchen {
    const Messaging = firebase.messaging ();
    warten Sie auf Messaging.requestPermission ();
    const token = warte auf Messaging.getToken();
    console.log('Ihr Token ist:', token);
    
    Rückgabetoken;
  } Fang (Fehler) {
    console.error (Fehler);
  }
}

Und da diese Funktion von irgendwoher aufgerufen werden muss, fügen wir sie auf Knopfdruck hinzu. Bearbeiten Sie die Datei app.js in Ihrem Verzeichnis /src/ wie folgt:

 Logo aus „./logo.svg“ importieren;
'./App.css' importieren;
import { askForPermissionToReceiveNotifications } from './push-notification';

Funktion App() {
  Rückkehr (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <code>src/App.js</code> bearbeiten und zum erneuten Laden speichern.
        </p>
        <ein
          className="App-Link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Reagieren lernen
        </a>
		 <button onClick={askForPermissionToReceiveNotifications} >
          Klicken Sie hier, um Benachrichtigungen zu erhalten
        </button>
      </header>
    </div>
  );
}

Standard-App exportieren;

Lassen Sie uns jetzt unser Projekt starten und Sie sollten eine Schaltfläche Klicken Sie hier, um Benachrichtigungen zu erhalten , wie folgt sehen:

Klicken Sie auf die Schaltfläche und Sie sollten ein Popup sehen, das Sie um Ihre Erlaubnis bittet:

Klicken Sie auf Zulassen und überprüfen Sie die Konsole Ihres Browsers. Sie sollten eine Nachricht sehen, die Sie über Ihr Token informiert:

Speichern Sie dieses Token jetzt an einer anderen Stelle, da Sie es im nächsten Schritt benötigen.

Schritt 5: Senden Sie Push-Benachrichtigungen mit Postman

In den nächsten Schritten verwenden wir Postman, um Benachrichtigungen über den Cloud Messaging-Dienst von Firebase zu senden.

Erstellen Sie in Postman eine POST- Anforderung mit den folgenden Informationen:

• Anfrage-URL : https://fcm.googleapis.com/fcm/send

• Header : In den Headern Ihrer POST-Anforderung müssen Sie die folgenden Schlüssel haben:

Berechtigung: key= SERVER_KEY

Inhaltstyp : application/json

Hinweise : SERVER_KEY finden Sie auf der Registerkarte Cloud Messaging in Ihren Firebase-Einstellungen

• Body : Füllen Sie den Body Ihrer POST-Anfrage mit dem folgenden Code:

 {
    "Benachrichtigung": {
        "title": "SimiCart",
        "body": "Push-Benachrichtigung testen",
        "click_action": "http://localhost:3000/",
        "Symbol": "https://i.imgur.com/5zO5cce.png"
    }
    "an": "USER_TOKEN"
}

Ersetzen Sie USER_TOKEN durch das Token, das Sie in Schritt 4 erhalten haben (durch Klicken auf die Schaltfläche Klicken Sie hier, um Benachrichtigungen zu erhalten ). Vergessen Sie nicht, Body type als raw und JSON auszuwählen.

Klicken Sie nun auf Senden und Sie sollten eine Benachrichtigung in Ihrer unteren rechten Ecke sehen:

Hinweise : Diese Benachrichtigungen werden nur angezeigt, wenn sich die App im Hintergrund befindet oder minimiert ist.

Herzliche Glückwünsche! Ihre PWA kann jetzt Benachrichtigungen senden!

Fazit

Wir hoffen, dass Sie nach dieser Anleitung nun selbstbewusst eine eigene Push-Benachrichtigungsfunktion einrichten können. Da es sich um eine neue Technologie handelt, sind Progressive Web Apps sicherlich eine komplizierte Sache für technisch nicht versierte Benutzer, weshalb es leicht verfügbare Lösungsanbieter wie SimiCart gibt, die sich mit unserer jahrelangen Erfahrung mit PWAs um alle Ihre Bedürfnisse kümmern können.