Web Push verwenden

In Erweiterungen können Sie mit einem beliebigen Push-Anbieter Push-Benachrichtigungen Nachrichten. Ein Push von der Push API wird von Ihrem Service Worker als sobald wir sie erhalten. Wenn der Service Worker gesperrt wurde, weckt es wieder auf. Die Verwendung in Erweiterungen funktioniert genau wie bei würden Sie sie im offenen Web nutzen.

Berechtigung zur Verwendung der Push API erhalten

Wenn Sie einen Push-Server auf einer normalen Website registrieren, wird dem Nutzer ein um sie zu gewähren oder abzulehnen. Bei Erweiterungen ist diese Aufforderung angezeigt. Um die Push API in Ihrer Erweiterung zu verwenden, müssen Sie die Berechtigung notifications in der Datei „manifest.json“

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

Wenn Ihnen diese Berechtigung fehlt, sind alle Interaktionen mit registration.pushManager führt zu einem sofortigen Fehler, das gleiche Ergebnis wie wenn der Nutzer die Berechtigung verweigert hat. Beachten Sie außerdem, dass die Die Berechtigung notifications löst eine Berechtigungswarnung aus die bei der Installation angezeigt werden soll. Chrome deaktiviert die Erweiterung für alle bestehende Installationen zu generieren, bis der Nutzer die neue Berechtigungsanfrage genehmigt. Sie können Weitere Informationen zum Umgang damit finden Sie in der Anleitung für Warnungen zu Berechtigungen.

Push-Anbieter und Push-Dienste

Nachdem Sie der Datei „manifest.json“ die Berechtigung hinzugefügt haben, müssen Sie Folgendes tun: die Verbindung zwischen Ihrem Back-End und der Erweiterung konfigurieren. Diese Verbindung aus zwei Teilen: dem Push-Anbieter und dem Push-Dienst. A 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 den Push-Dienst eingesetzt werden. , auch wenn dort unter Umständen kein SDK zur Verfügung steht, das eine einfache Integration ermöglicht. Ich mit dem SDK Ihres Anbieters experimentieren, um zu sehen, was möglich ist. A Push ist der Dienst, bei dem das Gerät des Endnutzers registriert ist, damit es benachrichtigt werden kann. an alle von einem Push-Anbieter gesendeten Push-Nachrichten. Das ist etwas, das Ihnen da sie in einzelne Browser hartcodiert sind. Für Chrome: Firebase Cloud Messaging ist der Push-Dienst. Alle an einen Chrome-Browser gesendeten Nachrichten durch den Nutzer weitergeleitet werden.

Selbsthosting eines Push-Anbieters

Jeder Push-Anbieter kann funktionieren, allerdings bieten nicht alle Anbieter ein funktionierendes SDK an. in Service Workern. Wende dich bei Problemen bitte an deinen Anbieter. um sie in Betrieb zu nehmen. Sie müssen jedoch keinen öffentlichen Anbieter verwenden. Mit wie web-push, können Sie Ihr eigenes Back-End hosten.

Sie können diese Bibliothek testen mit web-push-codelab.glitch.me. Insbesondere müssen Sie Kopieren Sie den öffentlichen VAPID-Schlüssel des Push-Servers, um die Push-Benachrichtigung Abo im Browser. Dieser öffentliche Schlüssel ist in Wirklichkeit ein base64-Schlüssel codierten Binärwert, der decodiert und in einen Uint8Array, um sich beim Push-Befehl des Browsers Verwaltungskonto. Es gibt Bibliotheken, um diese Logik auszuführen, brauchen Sie nichts weiter zu tun.

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, eine , das die Metadaten des Push-Servers enthält. Da Sie web-push-codelab.glitch.me, muss dieser Wert kopiert werden in Abschnitt „Push-Abo“ der Seite.

Sobald Sie PushSubscription erstellt haben, können Sie einen Listener für Push-Nachrichten im Service Worker unserer Erweiterung zu senden.

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

Sobald Ihr Listener eingerichtet ist, können Sie eine Nachricht web-push-codelab.glitch.me und Nachrichten werden in die Konsole des Service Workers.

Da es sich um einen offenen Webstandard handelt, gibt es Informationen zur Implementierung von Web Push, auch im Chrome Blog Für eine die vollständige Version des hier behandelten Beispiels. Eine davon finden Sie Beispiel-Repository für Erweiterungen.

Stummer Push

Sie haben eine Push-Benachrichtigung in Ihrer Manifest V3-Erweiterung erhalten seit der Einführung von Manifest V3 in Chrome 88. Es gab jedoch schon immer dass die Benachrichtigung eine für den Nutzer sichtbare Aufforderung enthielt, z. B. eine Webbenachrichtigung. Dies hat dazu geführt, dass es viel weniger nützlich ist, wenn Sie möchte Befehle oder Datenaktualisierungen auf die Erweiterung übertragen, ohne die unnötige Informationen enthält. Seit Chrome 121 werden Erweiterungen können Sie userVisibleOnly auf false setzen. Sie können jetzt stille, nicht für Nutzer sichtbare Push-Benachrichtigungen an Ihre Nutzer. Um diese Funktion zu nutzen, Setzen Sie userVisibleOnly auf false, wenn Sie pushManager.subscribe aufrufen.

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