Web Push verwenden

In Erweiterungen können Sie einen beliebigen Push-Anbieter verwenden, um Push-Benachrichtigungen und ‑Nachrichten zu senden. Ein Push von der Push API wird von Ihrem Service Worker verarbeitet, sobald er empfangen wird. Wenn der Service Worker angehalten wurde, wird er durch einen Push wieder aktiviert. Die Verwendung in Erweiterungen ist genau dieselbe wie im offenen Web.

Berechtigung zur Verwendung der Push API erhalten

Wenn Sie einen Push-Server auf einer normalen Website registrieren, wird dem Nutzer eine Berechtigungsanfrage angezeigt, die er annehmen oder ablehnen kann. Bei Erweiterungen wird diese Anfrage nicht angezeigt. Wenn Sie die Push API in Ihrer Erweiterung verwenden möchten, müssen Sie die Berechtigung notifications in Ihrer Datei manifest.json festlegen.

  {
    "manifest_version": 3,
    ...
    "permissions": ["notifications"]

Wenn Sie diese Berechtigung nicht haben, führt jede Interaktion mit registration.pushManager zu einem sofortigen Fehler. Das Ergebnis ist dasselbe, als hätte der Nutzer die Berechtigung abgelehnt. Außerdem wird bei der Installation aufgrund der notifications Berechtigung eine Berechtigungswarnung angezeigt. Chrome deaktiviert die Erweiterung auch für alle vorhandenen Installationen, bis der Nutzer die neue Berechtigungsanfrage genehmigt. Weitere Informationen dazu finden Sie in der Anleitung zur Berechtigungswarnung.

Push-Anbieter und Push-Dienste

Nachdem Sie die Berechtigung zu Ihrer Datei manifest.json hinzugefügt haben, müssen Sie die Verbindung zwischen Ihrem Backend und der Erweiterung konfigurieren. Diese Verbindung lässt sich in zwei Teile unterteilen: den Push-Anbieter und den Push-Dienst. Ein Anbieter ist das SDK, das Sie verwenden, um die Nachricht an den Push-Dienst zu senden. Es gibt viele verschiedene Optionen und jeder Push-Anbieter kann für die Push API verwendet werden. Allerdings bieten sie möglicherweise kein SDK an, das die Integration vereinfacht. Sie müssen mit dem SDK Ihres Anbieters experimentieren, um herauszufinden, was möglich ist. Ein Push-Dienst ist der Dienst, bei dem das Gerät des Endnutzers registriert ist, damit er über Push-Nachrichten informiert werden kann, die von einem Push-Anbieter gesendet werden. Darauf haben Sie keinen Einfluss, da er in die einzelnen Browser fest codiert ist. Für Chrome ist Firebase Cloud Messaging der Push-Dienst. Alle Nachrichten, die an einen Chrome-Nutzer gesendet werden, werden darüber weitergeleitet.

Push-Anbieter selbst hosten

Jeder Push-Anbieter kann verwendet werden, aber nicht alle Anbieter bieten ein SDK an, das in Service Workern funktioniert. Wenden Sie sich an Ihren Anbieter, wenn Sie Probleme mit der Ausführung haben. Sie müssen jedoch keinen öffentlichen Anbieter verwenden. Mit Bibliotheken wie web-push können Sie Ihr eigenes Backend hosten.

Sie können diese Bibliothek unter web-push-codelab.glitch.me testen. Dazu müssen Sie den öffentlichen VAPID-Schlüssel des Push-Servers kopieren, um das Push-Abo im Browser zu generieren. Dieser öffentliche Schlüssel ist ein base64 codierter Binärwert, der decodiert und in ein Uint8Array konvertiert werden muss, um sich beim Push Manager des Browsers zu registrieren. Es gibt Bibliotheken, mit denen Sie diese Logik ausführen können. Folgendes ist jedoch alles, was Sie benötigen.

function urlB64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');

  const rawData = atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

Dieser Wert wird an den Push-Manager übergeben.

const SERVER_PUBLIC_KEY = '_INSERT_VALUE_HERE_';
const applicationServerKey = urlB64ToUint8Array(SERVER_PUBLIC_KEY);

async function subscribe() {
  try {
    let subscription = await self.registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey
    });

    console.log(`Subscribed: ${JSON.stringify(subscription,0,2)}`);

    return subscription
  } catch (error) {
    console.error('Subscribe error: ', error);
  }
}

const subscription = await subscribe();

Die subscribe Funktion gibt ein PushSubscription-Objekt zurück, das die Metadaten des Push-Servers enthält. Da Sie web-push-codelab.glitch.me verwenden, muss dieser Wert in den Bereich „Push-Abo“ auf der Seite kopiert werden.

Sobald Sie das PushSubscription-Objekt haben, können Sie einen Listener für Push-Nachrichten im Service Worker Ihrer Erweiterung registrieren.

self.addEventListener('push', function (event) {
  console.log(`Push had this data/text: "${event.data.text()}"`);
});

Wenn der Listener eingerichtet ist, können Sie eine Nachricht unter web-push-codelab.glitch.me senden. Nachrichten werden in der Konsole des Service Workers protokolliert.

Da es sich um einen offenen Webstandard handelt, gibt es viel vorhandene Dokumentation zu der Implementierung von Web Push, auch im Chrome-Blog. Eine vollständige Version des hier behandelten Beispiels finden Sie in unserem Beispiel-Repository für Erweiterungen.

Stiller Push

Seit der Einführung von Manifest V3 in Chrome 88 können Sie Push-Benachrichtigungen in Ihrer Manifest V3-Erweiterung empfangen. Es war jedoch immer erforderlich, dass die Benachrichtigung eine für den Nutzer sichtbare Aufforderung enthielt, z. B. eine Webbenachrichtigung. Das war viel weniger nützlich, wenn Sie Befehle oder Datenaktualisierungen an Ihre Erweiterung senden wollten, ohne den Nutzer mit unnötigen Informationen zu belästigen. Ab Chrome 121 können Erweiterungen userVisibleOnly auf false setzen. Sie können jetzt stille Push-Benachrichtigungen an Ihre Nutzer senden, die nicht für sie sichtbar sind. Dazu müssen Sie userVisibleOnly auf false setzen, wenn Sie pushManager.subscribe aufrufen.

let subscription = await self.registration.pushManager.subscribe({
  userVisibleOnly: false,
  applicationServerKey
});