Web Push verwenden

In Erweiterungen können Sie einen beliebigen Push-Anbieter zum Senden von Push-Benachrichtigungen und Nachrichten verwenden. Ein Push von der Push API wird von Ihrem Service Worker verarbeitet, sobald er eingeht. Wenn der Service Worker gesperrt wurde, wird er durch einen Push wieder aktiviert. Die Verwendung in Erweiterungen ist mit der im offenen Web identisch.

Berechtigung zur Verwendung der Push API erhalten

Wenn Sie einen Push-Server auf einer normalen Website registrieren, wird dem Nutzer eine Berechtigungsaufforderung angezeigt, mit der er ihn gewähren oder ablehnen kann. Bei Erweiterungen wird diese Aufforderung nicht angezeigt. Damit Sie die Push API in Ihrer Erweiterung verwenden können, müssen Sie die Berechtigung notifications in der Datei „manifest.json“ festlegen.

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

Wenn Ihnen diese Berechtigung fehlt, führt jede Interaktion mit registration.pushManager zu einem sofortigen Fehler, genau wie wenn der Nutzer die Berechtigung verweigert hat. Beachten Sie außerdem, dass bei der Installation durch die Berechtigung notifications eine Berechtigungswarnung angezeigt wird. Außerdem deaktiviert Chrome die Erweiterung für alle vorhandenen Installationen, bis der Nutzer die neue Berechtigungsanfrage genehmigt. Weitere Informationen dazu, wie Sie damit umgehen können, finden Sie im Leitfaden zu Berechtigungswarnungen.

Push-Anbieter und Push-Dienste

Nachdem Sie die Berechtigung in der Datei „manifest.json“ hinzugefügt haben, müssen Sie die Verbindung zwischen Ihrem Back-End und der Erweiterung konfigurieren. Diese Verbindung besteht aus zwei Teilen: dem Push-Anbieter und dem Push-Dienst. Ein Anbieter ist das SDK, mit dem Sie die Nachricht an den Push-Dienst senden. Es gibt viele verschiedene Optionen, und jeder Push-Anbieter kann für die Push API verwendet werden. Allerdings bieten sie unter Umständen kein SDK für eine einfache Integration an. Sie müssen mit dem SDK Ihres Anbieters experimentieren, um herauszufinden, was möglich ist. Ein Push-Dienst ist das Gerät, mit dem das Gerät des Endnutzers registriert ist. Daher kann es über jede Push-Nachricht informiert werden, die von einem Push-Anbieter gesendet wird. Über diesen Wert haben Sie keine Kontrolle, da er in den einzelnen Browsern hartcodiert ist. Für Chrome ist Firebase Cloud Messaging der Push-Dienst. Alle Nachrichten, die an einen Chrome-Nutzer gesendet werden, werden darüber weitergeleitet.

Selbsthosting eines Push-Anbieters

Jeder Push-Anbieter kann funktionieren. Allerdings bieten nicht alle Anbieter ein SDK an, das für Service Worker geeignet ist. Sie müssen sich an Ihren Anbieter wenden, wenn Probleme bei der Ausführung auftreten. Sie müssen jedoch keinen öffentlichen Anbieter nutzen. Wenn Sie Bibliotheken wie web-push verwenden, können Sie Ihr eigenes Back-End hosten.

Sie können diese Bibliothek mit web-push-codelab.glitch.me testen. Insbesondere 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 Binärwert, der decodiert und in ein Uint8Array konvertiert werden muss, um sich im Push-Manager des Browsers zu registrieren. Für diese Logik sind Bibliotheken verfügbar. Sie benötigen jedoch nur die folgenden.

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 Funktion subscribe gibt ein PushSubscription zurück, ein Objekt, das die Metadaten des Push-Servers enthält. Da Sie web-push-codelab.glitch.me verwenden, muss dieser Wert in den Push-Abo-Teil der Seite kopiert werden.

Sobald Sie PushSubscription haben, können Sie einen Listener für Push-Nachrichten im Service Worker unserer 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 an web-push-codelab.glitch.me senden. Die Nachrichten werden dann in der Service Worker-Konsole angemeldet.

Da es sich um einen offenen Webstandard handelt, gibt es bereits viele weitere Dokumentationen zur Implementierung von Web Push, unter anderem im Chrome-Blog. Eine vollständige Version des hier behandelten Beispiels finden Sie in unserem Beispiel-Repository für Erweiterungen.

Stummer Push

Seit der Einführung von Manifest V3 in Chrome 88 konntest du in deiner Manifest V3-Erweiterung Push-Benachrichtigungen erhalten. Es gab jedoch schon immer die Anforderung, dass in der Benachrichtigung eine für den Nutzer sichtbare Aufforderung angezeigt wurde, z. B. eine Webbenachrichtigung. Dies machte es deutlich weniger nützlich, wenn Sie Befehle oder Datenaktualisierungen an die Erweiterung senden wollten, ohne den Nutzer mit unnötigen Informationen zu belästigen. Ab Chrome 121 können Erweiterungen für userVisibleOnly den Wert false festlegen. Sie können jetzt stumme, nicht an Nutzer gerichtete Push-Benachrichtigungen an Ihre Nutzer senden. Setzen Sie dazu userVisibleOnly auf false, wenn Sie pushManager.subscribe aufrufen.

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