Erste Schritte mit Web-Push-Benachrichtigungen

Ich habe oft von Web-Push-Benachrichtigungen und Service Workern gehört, aber ich habe sie bis zur letzten Woche nie implementiert Nur Kommentare. Also beschloss ich, meine Notizen zu dieser Technologie zu teilen.

Zunächst einmal gibt es viele Artikel und nützliche Dokumentationen zu Web-Push-Benachrichtigungen, daher werde ich nichts Neues hinzufügen. Ich werde versuchen, zusammenzufassen, was man meiner Meinung nach verstehen und wissen muss, um schnell loszulegen und eine Basisversion von Web-Push-Benachrichtigungen zu implementieren.

Beginnen wir mit einigen Eckdaten:

#1 Push-Benachrichtigungen basieren auf mehreren separaten Browser-APIs

Die gesamte Funktion von Push-Benachrichtigungen umfasst die Push-API und die Benachrichtigungs-API, die separat verwendet werden können. Außerdem ist es auf Service Worker angewiesen, da nur sie im Hintergrund ausgeführt werden können, um Push-Benachrichtigungen zu erhalten, selbst wenn der Benutzer die sendende Website geschlossen hat.

#2 Nicht alle Browser unterstützen Push-Benachrichtigungen (noch)

Derzeit IE && Opera Mini unterstützt keine Service Worker und Push-API und zusätzlich werden iOS Safari, Chrome für Android, Samsung Browser und UC-Browser für Android nicht unterstützt API für Webbenachrichtigungen.

Das bedeutet, dass Sie erkennen müssen, ob der Browser die erforderlichen APIs unterstützt oder nicht, wenn Sie Push-Benachrichtigungen implementieren.

Großes Diagramm, wie das funktioniert

Ich habe ein einfaches Diagramm erstellt, um mich mit verschiedenen APIs und Konzepten vertraut zu machen. Es verbindet verschiedene Teile über eine Abfolge von Aktionen/Beziehungen zwischen ihnen.

Fließen

Alles beginnt also mit einem JavaScript-Code auf Ihrer Webseite, der (1) einen Servicemitarbeiter registriert. Der Service-Worker stellt (2) ein Service-Worker-Registrierungsobjekt bereit, das wiederum Zugriff (3) auf eine Instanz von Push Manager gewährt. Der Push-Manager kann (4) uns ein Push-Abonnement bereitstellen, wenn der Benutzer dies zulässt. Dieses Abonnementobjekt kann an Ihr Backend gesendet werden (5). Auf dem Server können Sie das Abonnement verwenden, um eine Nachricht (6) an den Browser des Benutzers zu senden. Der Servicemitarbeiter erhält (7) die Nachricht, aber sie wird dem Benutzer nicht automatisch angezeigt. Der Servicemitarbeiter analysiert die Nachricht und kann entscheiden, was damit geschehen soll. Normalerweise zeigt der Worker eine Benachrichtigung (8) mithilfe der Benachrichtigungs-API an.

Der Kodierungsteil

Wie ich in den wichtigsten Fakten erwähnt habe, unterstützen nicht alle Browser die APIs, daher müssen wir prüfen, ob die Browser des Benutzers Servicemitarbeiter unterstützen:

function supportsPushNotifications() {
  return 'serviceWorker' in navigator && 'PushManager' in window;
}

supportsPushNotifications() === true 

Nachdem wir geprüft haben, ob wir Service Worker einsetzen können, können wir mit dem ersten Schritt beginnen und einen Service Worker registrieren:

navigator
  .serviceWorker
  .register('/sw.js')
  .then(swRegistration => {
    
  })
  .catch(err => {
    console.log('serviceWorker.register failed', err);
  });

Dieser Code wird abgerufen sw.js im Stammverzeichnis Ihrer Website. Das register Die Funktion gibt ein Promise zurück. Deshalb handhaben wir es mit .then für einen erfolgreichen Fall und .catch Wenn etwas schief läuft.

Jetzt können wir die Schritte 2 und 3 implementieren, die die erfordern swRegistration:

const applicationServerKey = '';
swRegistration
  .pushManager
  .getSubscription()
  .then(subscription => {
    const isSubscribed = !(subscription === null);
    if (!isSubscribed) {
      return swRegistration.pushManager
        .subscribe({
          userVisibleOnly: true,
          applicationServerKey,
        })
        .then(sendSubscriptionToServer);
    }
    sendSubscriptionToServer(subscription);
  })
  .catch(err => {
    console.log('getSubscription failed', err);
  });

Mach dir keine Sorgen applicationServerKey zur Zeit. applicationServerKey ermöglicht die Zuordnung des Abonnements zu Ihrem Server. Ich werde später erklären, wie man diesen Schlüssel erhält.

Also, was passiert hier: Wir nennen die pushManager.getSubscription Methode, die ein Abonnement zurückgibt, wenn der Benutzer bereits Push-Benachrichtigungen zugelassen hat und null Andernfalls. Wenn wir bereits ein Abonnement haben, können wir es an das Backend senden. Wenn nicht, rufen wir an pushManager.subscribe um den Benutzer zu bitten, Push-Benachrichtigungen zuzulassen.

Für Schritt 5 können Sie nun eine beliebige Methode verwenden, um das Abonnementobjekt an Ihren Server zu senden. Ich empfehle, es zuerst mit zu besaiten JSON.stringify(subscription).

Um eine Nachricht von Ihrem Server an den Client zu senden, empfehle ich die Verwendung von web-push Modul:

const webpush = require('web-push');

const vapidKeys = {
  publicKey: '',
  privateKey: '',
};

webpush.setVapidDetails(
  'mailto:your@email',
  vapidKeys.publicKey,
  vapidKeys.privateKey
);

webpush.sendNotification(
  JSON.parse(subscription),
  JSON.stringify({
    title: 'Title',
    icon: 'https://your-site.com/assets/push-icon.png',
    body: 'Body',
    url: 'https://your-site.com/url-to-open',
  })
)

Und jetzt kehren wir in den Schritten 7 und 8 zurück zu sw.jsder Code des Servicemitarbeiters, der für den Empfang und die Anzeige einer Push-Nachricht verantwortlich ist:

self.addEventListener('push', function(event) {
  const message = JSON.parse(event.data.text());
  const title = message.title;
  const url = message.url;
  const options = {
    body: message.body,
    icon: message.icon,
    badge: message.badge,
    data: url,
  };
  event.waitUntil(self.registration.showNotification(title, options));
});

self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  event.waitUntil(clients.openWindow(event.notification.data));
});

Hier werden zwei Ereignis-Listener definiert. Mit dem push Listener, analysieren wir die Nachricht und rufen die auf showNotification Methode zum Anzeigen einer Benachrichtigung. An notificationclick Wir schließen die Benachrichtigung und navigieren zu der über die Push-Nachricht gesendeten URL.

Schlüssel generieren

Du kannst den … benutzen web-push Bibliothek zum Generieren von Schlüsseln. Die Schlüsselgenerierung muss einmalig durchgeführt werden. Sowohl das Frontend als auch das Backend verwenden denselben öffentlichen Schlüssel, und das Backend verwendet nur den privaten Schlüssel:

const webpush = require('web-push');
const vapidKeys = webpush.generateVAPIDKeys();
console.log(vapidKeys);

Sie sollten die Schlüssel bei Bedarf in den vorherigen Codeausschnitten angeben.

Fazit

Ich finde die APIs für Push-Benachrichtigungen ziemlich einfach und unkompliziert. Trotzdem dauert es am Anfang einige Zeit, sich mit allen Konzepten und beweglichen Teilen vertraut zu machen.

Ich hoffe, Sie finden diese Hinweise hilfreich und werden darauf zurückkommen, sobald Sie Push-Benachrichtigungen implementieren müssen. Und wenn dieser Zeitpunkt kommt, fragen Sie bitte nicht nach Berechtigungen, sobald die Webseite geladen wird: Es ist nervig und die meisten Leute würden es blockieren.

Danke fürs Lesen!

Similar Posts

Leave a Reply

Your email address will not be published.