PushSubscription.unsubscribe() — Methode · JavaScript-Referenz

Signatur

PushSubscription.prototype.unsubscribe()

Beschreibung

unsubscribe() beendet ein bestehendes Push-Abonnement, das zuvor mit PushManager.subscribe() angelegt wurde. Danach wird der Endpunkt des Push-Dienstes (z. B. FCM, Mozilla autopush, Apple Push) ungültig, und der Service Worker bekommt über dieses Abonnement keine push-Ereignisse mehr.

Die Methode wird typischerweise benutzt, wenn der Nutzer Benachrichtigungen in den Einstellungen deaktiviert, sich abmeldet oder wenn ein neues Abonnement mit anderem applicationServerKey angelegt werden soll (ein bestehendes Abonnement mit anderem Schlüssel muss erst abgemeldet werden).

Wichtig: unsubscribe() betrifft nur den Browser und den Push-Dienst. Dein eigener Anwendungsserver, der den Endpunkt gespeichert hat, erfährt davon nichts. Du musst den Endpunkt dort selbst löschen – sonst sendet der Server weiter an einen toten Endpunkt und erhält 404/410-Antworten.

Die Methode ist in Fenster-Kontexten (über navigator.serviceWorker.ready) und direkt im Service Worker (self.registration.pushManager) verfügbar und erfordert einen sicheren Kontext (HTTPS).

Rückgabewert

Typ

Promise<boolean>

Beschreibung

Ein Promise, das mit true erfüllt wird, wenn die Abmeldung erfolgreich war, bzw. mit false, wenn kein aktives Abonnement (mehr) bestand. Bei einem Fehler während der Abmeldung wird das Promise mit einer DOMException abgelehnt.

Beispiele

Benachrichtigungen per Schalter deaktivieren

const disablePush = async () => {
  const registration = await navigator.serviceWorker.ready;
  const subscription = await registration.pushManager.getSubscription();

  if (!subscription) {
    console.log('Kein aktives Abonnement vorhanden.');
    return false;
  }

  const success = await subscription.unsubscribe();
  console.log('Abgemeldet:', success);
  return success;
};

document.querySelector('#push-toggle').addEventListener('change', (event) => {
  if (!event.target.checked) disablePush();
});

Abgemeldet: true

Abmelden und Endpunkt auf dem eigenen Server löschen

const unsubscribeEverywhere = async () => {
  const registration = await navigator.serviceWorker.ready;
  const subscription = await registration.pushManager.getSubscription();
  if (!subscription) return;

  // Endpunkt merken, bevor das Abonnement ungültig wird
  const { endpoint } = subscription;

  try {
    const ok = await subscription.unsubscribe();
    if (!ok) throw new Error('Abmeldung fehlgeschlagen');

    await fetch('/api/push/subscriptions', {
      method: 'DELETE',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ endpoint })
    });
    console.log('Abonnement entfernt:', endpoint);
  } catch (err) {
    console.error('Fehler beim Abmelden:', err);
  }
};

unsubscribeEverywhere();

Abonnement entfernt: https://fcm.googleapis.com/fcm/send/...

Neu abonnieren mit anderem Server-Schlüssel

const urlBase64ToUint8Array = (base64) => {
  const padding = '='.repeat((4 - (base64.length % 4)) % 4);
  const raw = atob((base64 + padding).replace(/-/g, '+').replace(/_/g, '/'));
  return Uint8Array.from([...raw].map((c) => c.charCodeAt(0)));
};

const resubscribe = async (newPublicKey) => {
  const registration = await navigator.serviceWorker.ready;
  const old = await registration.pushManager.getSubscription();

  // Bei geändertem applicationServerKey muss erst abgemeldet werden
  if (old) await old.unsubscribe();

  const fresh = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(newPublicKey)
  });
  console.log('Neuer Endpunkt:', fresh.endpoint);
  return fresh;
};

Neuer Endpunkt: https://...

// Wichtig · Fallstricke

Server nicht vergessen: unsubscribe() informiert deinen Anwendungsserver nicht. Lösche den gespeicherten Endpunkt selbst; lies subscription.endpoint am besten vor dem Aufruf aus.
Ein Rückgabewert von false ist kein Fehler, sondern bedeutet meist, dass das Abonnement bereits ungültig war. Echte Fehler führen zur Ablehnung des Promises – immer mit try/catch absichern.
Nach dem Abmelden liefert pushManager.getSubscription() null. Die Benachrichtigungs-Berechtigung (Notification.permission) bleibt dagegen unverändert.
Soll ein Abonnement mit anderem applicationServerKey angelegt werden, schlägt subscribe() mit InvalidStateError fehl, solange das alte nicht abgemeldet ist.
Kompatibilität: Nur in sicheren Kontexten (HTTPS, localhost) und mit registriertem Service Worker. Safari unterstützt die Push API erst ab 16 (macOS) bzw. 16.4 (iOS, nur für zum Home-Bildschirm hinzugefügte Web-Apps). Vorher per 'PushManager' in window prüfen.
Wird die Service-Worker-Registrierung per unregister() entfernt, werden zugehörige Abonnements ebenfalls ungültig.

Siehe auch

PushSubscription.toJSON() PushSubscription.getKey() PushManager.subscribe() CookieStoreManager.unsubscribe() TrustedScript.toString()