ServiceWorkerGlobalScope: pushsubscriptionchange-Ereignis

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

addEventListener("pushsubscriptionchange", (event) => {});

onpushsubscriptionchange = (event) => {};

Ein generisches Event.

Obwohl Beispiele, die zeigen, wie Abonnement-bezogene Informationen mit dem Anwendungsserver ausgetauscht werden können, in der Regel fetch() verwenden, ist dies möglicherweise nicht die beste Wahl für den praktischen Einsatz, da es beispielsweise nicht funktioniert, wenn die App offline ist.

Erwägen Sie die Verwendung einer anderen Methode, um Abonnementinformationen zwischen Ihrem Service Worker und dem Anwendungsserver zu synchronisieren, oder stellen Sie sicher, dass Ihr Code, der fetch() verwendet, robust genug ist, um mit Fällen umzugehen, in denen der Versuch des Datenaustauschs fehlschlägt.

Dieses Beispiel, ausgeführt im Kontext eines Service Workers, hört auf ein pushsubscriptionchange-Ereignis und meldet das abgelaufene Abonnement erneut an.

self.addEventListener(
  "pushsubscriptionchange",
  (event) => {
    const conv = (val) =>
      self.btoa(String.fromCharCode.apply(null, new Uint8Array(val)));
    const getPayload = (subscription) => ({
      endpoint: subscription.endpoint,
      publicKey: conv(subscription.getKey("p256dh")),
      authToken: conv(subscription.getKey("auth")),
    });

    const subscription = self.registration.pushManager
      .subscribe(event.oldSubscription.options)
      .then((subscription) =>
        fetch("register", {
          method: "post",
          headers: {
            "Content-type": "application/json",
          },
          body: JSON.stringify({
            old: getPayload(event.oldSubscription),
            new: getPayload(subscription),
          }),
        }),
      );
    event.waitUntil(subscription);
  },
  false,
);

Wenn ein pushsubscriptionchange-Ereignis eintrifft, das anzeigt, dass das Abonnement abgelaufen ist, melden wir uns erneut an, indem wir die subscribe()-Methode des Push-Managers aufrufen. Wenn das zurückgegebene Versprechen aufgelöst wird, erhalten wir das neue Abonnement. Dieses wird über einen fetch()-Aufruf, um eine im JSON-Formatierte Version des Abonnement-endpoints an den Anwendungsserver zu senden, übermittelt.

Sie können auch die onpushsubscriptionchange-Ereignishandler-Eigenschaft verwenden, um den Ereignishandler einzurichten:

self.onpushsubscriptionchange = (event) => {
  event.waitUntil(
    self.registration.pushManager
      .subscribe(event.oldSubscription.options)
      .then((subscription) => {
        /* ... */
      }),
  );
};

• Verwendung der Push API