Web Push verwenden

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

Berechtigung zur Nutzung der Push API erhalten

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

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

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

Push-Anbieter und Push-Dienste

Nachdem Sie die Berechtigung zu "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, das Sie zum Senden der Nachricht an den Push-Dienst verwenden. Es gibt viele verschiedene Optionen und jeder Push-Anbieter kann für die Push API arbeiten. Möglicherweise bietet er jedoch kein SDK an, das eine einfache Integration ermöglicht. Sie müssen mit dem SDK Ihres Anbieters experimentieren, um herauszufinden, was möglich ist. Bei einem Push-Dienst ist das Gerät des Endnutzers registriert, sodass es auf jede Push-Nachricht benachrichtigt werden kann, die von einem Push-Anbieter gesendet wird. Darüber haben Sie keine Kontrolle, da es in einzelnen Browsern hartcodiert ist. Für Chrome ist Firebase Cloud Messaging der Push-Dienst. Alle Nachrichten, die an einen Chrome-Nutzer gesendet werden, werden über dieses geleitet.

Selbsthosting eines Push-Anbieters

Es kann jeder Push-Anbieter verwendet werden. Allerdings bieten nicht alle Anbieter ein SDK an, das in Service Workern funktioniert. Wenn Sie Probleme haben, das Gerät zum Laufen zu bringen, wenden Sie sich an Ihren Anbieter. Sie müssen jedoch keinen öffentlichen Anbieter verwenden. Mithilfe von Bibliotheken wie web-push können Sie Ihr eigenes Backend hosten.

Sie können diese Bibliothek mit web-push-codelab.glitch.me testen. Sie müssen dazu den VAPID-öffentlichen 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 umgewandelt werden muss, um sich beim Push-Manager des Browsers zu registrieren. Es gibt Bibliotheken, die diese Logik ausführen können, aber das Folgende ist 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 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 Bereich „Push-Abo“ der Seite kopiert werden.

Sobald du PushSubscription installiert hast, kannst du 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()}"`);
});

Nachdem Sie den Listener eingerichtet haben, können Sie eine Nachricht unter web-push-codelab.glitch.me senden. Die Nachrichten werden dann in der Konsole des Dienstarbeiters protokolliert.

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

Stummer Push

Seit der Einführung von Manifest V3 in Chrome 88 können Sie in Ihrer Manifest V3-Erweiterung Push-Benachrichtigungen erhalten. Es war jedoch immer erforderlich, dass die Benachrichtigung eine Art von Aufforderung für den Nutzer enthielt, z. B. eine Webbenachrichtigung. Das war sehr ärgerlich, 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 festlegen. Sie können jetzt stumme, nicht für Nutzer sichtbare Push-Benachrichtigungen an Ihre Nutzer senden. Dazu musst du userVisibleOnly auf false setzen, wenn du pushManager.subscribe aufrufst.

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