Push-Benachrichtigungen für eine Web-App hinzufügen

Push-Benachrichtigungen sind eine einfache und effektive Möglichkeit, Nutzer wieder anzusprechen. In diesem Codelab erfahren Sie, wie Sie Ihrer Web-App Push-Benachrichtigungen hinzufügen.

Lerninhalte

  • Nutzer für Push-Benachrichtigungen abonnieren und abmelden
  • Umgang mit eingehenden Push-Benachrichtigungen
  • Benachrichtigung anzeigen
  • Auf Benachrichtigungsklicks reagieren

Voraussetzungen

  • Chrome 52 oder höher
  • Web Server for Chrome oder ein anderer Webserver Ihrer Wahl
  • Ein Texteditor
  • Grundkenntnisse in HTML, CSS, JavaScript und den Chrome-Entwicklertools
  • Der Beispielcode (siehe „Einrichtung“).

Beispielcode herunterladen

Sie haben zwei Möglichkeiten, den Beispielcode für dieses Codelab abzurufen:

  • Klonen Sie das Git-Repository:
git clone https://github.com/GoogleChrome/push-notifications.git
  • Laden Sie die ZIP-Datei herunter:

Quellcode herunterladen

Wenn Sie den Quellcode als ZIP-Datei herunterladen, erhalten Sie nach dem Entpacken einen Stammordner push-notifications-master.

Webserver installieren und überprüfen

Sie können zwar Ihren eigenen Webserver verwenden, dieses Codelab ist jedoch für die Verwendung mit der App „Web Server for Chrome“ konzipiert. Wenn Sie diese App noch nicht installiert haben, können Sie sie im Chrome Web Store herunterladen:

Web Server for Chrome installieren

Klicken Sie nach der Installation der Web Server for Chrome App in der Lesezeichenleiste auf die Verknüpfung Apps:

Klicken Sie im Fenster „Apps“ auf das Symbol für den Webserver:

Als Nächstes wird dieses Dialogfeld angezeigt, in dem Sie Ihren lokalen Webserver konfigurieren können:

Klicken Sie auf die Schaltfläche Ordner auswählen und wählen Sie den Ordner app im heruntergeladenen Ordner push-notifications aus. So können Sie Ihre laufenden Arbeiten über die URL bereitstellen, die im Dialogfeld im Abschnitt Webserver-URLs angezeigt wird.

Klicken Sie unter Optionen das Kästchen neben index.html automatisch anzeigen an, wie unten dargestellt:

Stoppen Sie den Server und starten Sie ihn neu, indem Sie den Schalter Webserver: GESTARTET nach links und dann wieder nach rechts schieben.

Klicken Sie auf die Webserver-URL, um Ihre Website in Ihrem Webbrowser aufzurufen. Sie sollten eine Seite sehen, die so aussieht. In Ihrer Version wird möglicherweise die Adresse 127.0.0.1:8887 angezeigt:

00-push-codelab.png

Service Worker immer aktualisieren

Während der Entwicklung ist es hilfreich, dafür zu sorgen, dass Ihr Service Worker immer auf dem neuesten Stand ist und die neuesten Änderungen enthält.

So richten Sie das in Chrome ein:

  1. Rufen Sie den Tab Push-Codelab auf.
  2. Öffnen Sie die Entwicklertools: Strg+Umschalt+I unter Windows und Linux, Cmd+Option+I unter macOS.
  3. Wählen Sie den Bereich Application (Anwendung) aus, klicken Sie auf den Tab Service Workers (Service Worker) und setzen Sie ein Häkchen bei Update on Reload (Bei Neuladen aktualisieren). Wenn dieses Kästchen aktiviert ist, wird der Service Worker bei jedem Neuladen der Seite aktualisiert.

Vervollständigter Code

Im Verzeichnis app befindet sich eine leere Datei mit dem Namen sw.js. Diese Datei ist Ihr Service Worker. Das Feld kann vorerst leer bleiben. Sie fügen später Code hinzu.

Zuerst müssen Sie diese Datei als Service Worker registrieren.

Ihre Seite app/index.html wird scripts/main.js geladen. In dieser JavaScript-Datei registrieren Sie Ihren Service Worker.

Fügen Sie den folgenden Code zu scripts/main.js hinzu:

if ('serviceWorker' in navigator && 'PushManager' in window) {
  console.log('Service Worker and Push are supported');

  navigator.serviceWorker.register('sw.js')
  .then(function(swReg) {
    console.log('Service Worker is registered', swReg);

    swRegistration = swReg;
  })
  .catch(function(error) {
    console.error('Service Worker Error', error);
  });
} else {
  console.warn('Push messaging is not supported');
  pushButton.textContent = 'Push Not Supported';
}

Mit diesem Code wird geprüft, ob Service Worker und Push-Benachrichtigungen von Ihrem Browser unterstützt werden. Wenn sie unterstützt werden, wird mit dem Code Ihre sw.js-Datei registriert.

Jetzt ausprobieren

Prüfen Sie Ihre Änderungen, indem Sie den Tab Push Codelab im Browser aktualisieren.

Sehen Sie in der Konsole der Chrome-Entwicklertools nach einem Service Worker is registered message:

Anwendungsserver-Schlüssel abrufen

Für dieses Codelab müssen Sie Anwendungsserverschlüssel generieren. Sie können dies auf der Begleitwebsite web-push-codelab.glitch.me tun.

Hier können Sie ein Schlüsselpaar aus öffentlichem und privatem Schlüssel generieren.

push-codelab-04-companion.png

Kopieren Sie Ihren öffentlichen Schlüssel in scripts/main.js und ersetzen Sie den Wert <Your Public Key>:

const applicationServerPublicKey = '<Your Public Key>';

Wichtig: Sie sollten Ihren privaten Schlüssel niemals in Ihre Web-App einfügen.

Vervollständigter Code

Derzeit ist die Schaltfläche Aktivieren der Web-App deaktiviert und kann nicht angeklickt werden. Es empfiehlt sich, die Schaltfläche standardmäßig zu deaktivieren und erst dann zu aktivieren, wenn Sie wissen, dass Push-Benachrichtigungen vom Browser unterstützt werden und Sie prüfen können, ob der Nutzer derzeit für Benachrichtigungen registriert ist.

Sie müssen zwei Funktionen in scripts/main.js erstellen:

  • initializeUI, um zu prüfen, ob der Nutzer derzeit ein Abo hat
  • updateBtn, um die Schaltfläche zu aktivieren und den Text je nach Abo-Status des Nutzers zu ändern

Fügen Sie main.js eine initializeUI-Funktion hinzu:

function initializeUI() {
  // Set the initial subscription value
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    isSubscribed = !(subscription === null);

    if (isSubscribed) {
      console.log('User IS subscribed.');
    } else {
      console.log('User is NOT subscribed.');
    }

    updateBtn();
  });
}

Ihre neue Methode verwendet das swRegistration aus dem vorherigen Schritt, ruft die Eigenschaft pushManager ab und ruft getSubscription() dafür auf.

pushManager. getSubscription() gibt ein Promise zurück, das mit dem aktuellen Abo aufgelöst wird, sofern eines vorhanden ist. Andernfalls wird null zurückgegeben. So können Sie prüfen, ob der Nutzer bereits ein Abo hat, den Wert von isSubscribed festlegen und dann updateBtn() aufrufen, um die Schaltfläche zu aktualisieren.

Fügen Sie die Funktion updateBtn() zu main.js hinzu:

function updateBtn() {
  if (isSubscribed) {
    pushButton.textContent = 'Disable Push Messaging';
  } else {
    pushButton.textContent = 'Enable Push Messaging';
  }

  pushButton.disabled = false;
}

Diese Funktion aktiviert die Schaltfläche und ändert den Schaltflächentext je nachdem, ob der Nutzer ein Abo hat oder nicht.

Als Letztes müssen Sie initializeUI() aufrufen, wenn Ihr Service Worker in main.js registriert ist:

navigator.serviceWorker.register('sw.js')
.then(function(swReg) {
  console.log('Service Worker is registered', swReg);

  swRegistration = swReg;
  initializeUI();
})

Jetzt ausprobieren

Aktualisieren Sie den Tab Push-Codelab. Die Schaltfläche Push-Benachrichtigungen aktivieren sollte jetzt aktiviert sein (Sie können darauf klicken) und in der Konsole sollte User is NOT subscribed angezeigt werden.

Im weiteren Verlauf dieses Codelabs sollte sich der Schaltflächentext ändern, wenn Sie ein Abo abschließen oder kündigen.

Vervollständigter Code

Derzeit hat die Schaltfläche Push-Benachrichtigungen aktivieren noch keine große Funktion. Das sollte nicht sein.

Fügen Sie in der Funktion initializeUI() einen Click-Listener für die Schaltfläche hinzu:

function initializeUI() {
  pushButton.addEventListener('click', function() {
    pushButton.disabled = true;
    if (isSubscribed) {
      // TODO: Unsubscribe user
    } else {
      subscribeUser();
    }
  });

  // Set the initial subscription value
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    isSubscribed = !(subscription === null);

    updateSubscriptionOnServer(subscription);

    if (isSubscribed) {
      console.log('User IS subscribed.');
    } else {
      console.log('User is NOT subscribed.');
    }

    updateBtn();
  });
}

Wenn der Nutzer auf die Schaltfläche klickt, deaktivieren Sie sie, damit der Nutzer nicht ein zweites Mal darauf klicken kann, da das Abonnieren von Push-Benachrichtigungen einige Zeit in Anspruch nehmen kann.

Rufen Sie dann subscribeUser() auf, wenn der Nutzer derzeit kein Abo hat. Dazu müssen Sie den folgenden Code in scripts/main.js einfügen:

function subscribeUser() {
  const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
  swRegistration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: applicationServerKey
  })
  .then(function(subscription) {
    console.log('User is subscribed.');

    updateSubscriptionOnServer(subscription);

    isSubscribed = true;

    updateBtn();
  })
  .catch(function(error) {
    console.error('Failed to subscribe the user: ', error);
    updateBtn();
  });
}

Sehen wir uns an, was dieser Code macht und wie er den Nutzer für Push-Benachrichtigungen registriert.

Zuerst nehmen Sie den öffentlichen Schlüssel des Anwendungsservers, der Base64 URL-sicher codiert ist, und wandeln ihn in ein UInt8Array um, da dies die erwartete Eingabe des subscribe()-Aufrufs ist. Die Funktion urlB64ToUint8Array() befindet sich oben in scripts/main.js.

Nachdem Sie den Wert konvertiert haben, rufen Sie die Methode subscribe() für den pushManager Ihres Service Workers auf und übergeben den öffentlichen Schlüssel Ihres Anwendungsservers und den Wert userVisibleOnly: true.

const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey);
swRegistration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: applicationServerKey
})

Der Parameter userVisibleOnly sorgt dafür, dass jedes Mal, wenn eine Push-Nachricht gesendet wird, eine Benachrichtigung angezeigt wird. Derzeit ist dieser Wert erforderlich und muss „true“ sein.

Beim Aufrufen von subscribe() wird ein Promise zurückgegeben, das nach den folgenden Schritten aufgelöst wird:

  1. Der Nutzer hat die Berechtigung zum Anzeigen von Benachrichtigungen erteilt.
  2. Der Browser hat eine Netzwerkanfrage an einen Push-Dienst gesendet, um die zum Generieren einer PushSubscription erforderlichen Daten abzurufen.

Das subscribe()-Promise wird mit einem PushSubscription aufgelöst, wenn diese Schritte erfolgreich waren. Wenn der Nutzer keine Berechtigung erteilt oder beim Abonnieren des Nutzers ein Problem auftritt, wird das Promise mit einem Fehler abgelehnt. Dadurch erhalten Sie die folgende Promise-Kette in Ihrem Codelab:

swRegistration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: applicationServerKey
})
.then(function(subscription) {
  console.log('User is subscribed.');

  updateSubscriptionOnServer(subscription);

  isSubscribed = true;

  updateBtn();

})
.catch(function(err) {
  console.log('Failed to subscribe the user: ', err);
  updateBtn();
});

Dadurch erhalten Sie entweder ein Abo und behandeln den Nutzer als Abonnenten oder fangen einen Fehler ab und protokollieren ihn in der Konsole. In beiden Szenarien rufen Sie updateBtn() auf, um sicherzustellen, dass die Schaltfläche wieder aktiviert wird und den entsprechenden Text enthält.

In einer echten Anwendung würden Sie mit der Funktion updateSubscriptionOnServer() Ihre Abo-Daten an ein Backend senden. In diesem Codelab zeigen Sie das Abo jedoch einfach in der Benutzeroberfläche an. Fügen Sie scripts/main.js die folgende Funktion hinzu:

function updateSubscriptionOnServer(subscription) {
  // TODO: Send subscription to application server

  const subscriptionJson = document.querySelector('.js-subscription-json');
  const subscriptionDetails =
    document.querySelector('.js-subscription-details');

  if (subscription) {
    subscriptionJson.textContent = JSON.stringify(subscription);
    subscriptionDetails.classList.remove('is-invisible');
  } else {
    subscriptionDetails.classList.add('is-invisible');
  }
}

Jetzt ausprobieren

Rufen Sie den Tab Push-Codelab auf, aktualisieren Sie die Seite und klicken Sie auf die Schaltfläche. Sie sollten eine Berechtigungsaufforderung wie diese sehen:

Wenn Sie die Berechtigung erteilen, sollte User is subscribed in der Konsole protokolliert werden. Der Text der Schaltfläche ändert sich in Push-Benachrichtigungen deaktivieren und Sie können das Abo als JSON-Daten unten auf der Seite ansehen.

Vervollständigter Code

Eine Sache, die Sie noch nicht berücksichtigt haben, ist, was passiert, wenn der Nutzer die Berechtigungsanfrage blockiert. Das erfordert einige besondere Überlegungen, da Ihre Web-App die Berechtigungsaufforderung nicht noch einmal anzeigen und den Nutzer nicht abonnieren kann, wenn er die Berechtigung blockiert. Sie müssen zumindest den Druckknopf deaktivieren, damit der Nutzer weiß, dass er nicht verwendet werden kann.

Der offensichtliche Ort für die Verarbeitung dieses Szenarios ist die Funktion updateBtn(). Sie müssen nur den Notification.permission-Wert prüfen, wie hier gezeigt:

function updateBtn() {
  if (Notification.permission === 'denied') {
    pushButton.textContent = 'Push Messaging Blocked';
    pushButton.disabled = true;
    updateSubscriptionOnServer(null);
    return;
  }

  if (isSubscribed) {
    pushButton.textContent = 'Disable Push Messaging';
  } else {
    pushButton.textContent = 'Enable Push Messaging';
  }

  pushButton.disabled = false;
}

Wenn die Berechtigung denied ist, kann der Nutzer kein Abo abschließen. Sie können also nichts weiter tun. Daher ist es am besten, die Schaltfläche dauerhaft zu deaktivieren.

Jetzt ausprobieren

Da Sie die Berechtigung für Ihre Web-App bereits im vorherigen Schritt erteilt haben, müssen Sie in der URL-Leiste auf das i in einem Kreis klicken und die Berechtigung Benachrichtigungen in Globale Standardeinstellung verwenden (fragen) ändern.

Nachdem Sie diese Einstellung geändert haben, aktualisieren Sie die Seite, klicken Sie auf die Schaltfläche Push-Benachrichtigungen aktivieren und wählen Sie im Berechtigungsdialogfeld Blockieren aus. Die Schaltfläche wird deaktiviert und der Text Push-Benachrichtigungen blockiert wird angezeigt.

Nach dieser Änderung können Sie den Nutzer abonnieren, nachdem Sie die möglichen Berechtigungsszenarien berücksichtigt haben.

Vervollständigter Code

Bevor Sie erfahren, wie Sie eine Push-Nachricht von Ihrem Backend aus senden, müssen Sie sich überlegen, was passiert, wenn ein abonnierter Nutzer eine Push-Nachricht erhält.

Wenn Sie eine Push-Nachricht auslösen, empfängt der Browser die Push-Nachricht, ermittelt, für welchen Service Worker die Push-Nachricht bestimmt ist, aktiviert diesen Service Worker und sendet ein Push-Ereignis. Sie müssen auf dieses Ereignis reagieren und eine Benachrichtigung anzeigen.

Fügen Sie Ihrer sw.js-Datei den folgenden Code hinzu:

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

  const title = 'Push Codelab';
  const options = {
    body: 'Yay it works.',
    icon: 'images/icon.png',
    badge: 'images/badge.png'
  };

  event.waitUntil(self.registration.showNotification(title, options));
});

Sehen wir uns diesen Code genauer an. Sie warten auf push-Ereignisse in Ihrem Service Worker, indem Sie einen Event-Listener hinzufügen:

self.addEventListener('push', ... );

Wenn Sie noch nicht mit Web Workers gearbeitet haben, ist self wahrscheinlich neu für Sie. In einer Service Worker-Datei verweist self auf den Service Worker selbst.)

Wenn eine Push-Nachricht empfangen wird, wird der Event-Listener aufgerufen und Sie erstellen eine Benachrichtigung, indem Sie showNotification() für die registration-Property des Service Workers aufrufen. Für showNotification() ist ein title erforderlich. Sie können auch ein options-Objekt angeben, um eine Nachricht, ein Symbol und ein Badge festzulegen. (Das Symbol wird zum Zeitpunkt der Erstellung dieses Artikels nur auf Android verwendet.)

const title = 'Push Codelab';
const options = {
  body: 'Yay it works.',
  icon: 'images/icon.png',
  badge: 'images/badge.png'
};
self.registration.showNotification(title, options);

Das Letzte, was Sie bei der push-Ereignisverarbeitung berücksichtigen müssen, ist event.waitUntil(). Diese Methode verwendet ein Promise, damit der Browser Ihren Service Worker aktiv und ausgeführt hält, bis das übergebene Promise aufgelöst wurde.

Um den obigen Code etwas verständlicher zu machen, können Sie ihn so umschreiben:

const notificationPromise = self.registration.showNotification(title, options);
event.waitUntil(notificationPromise);

Nachdem Sie das Push-Ereignis durchlaufen haben, testen wir es.

Jetzt ausprobieren

Mit der Push-Ereignisverarbeitung im Service Worker können Sie ein gefälschtes Push-Ereignis auslösen, um zu testen, was passiert, wenn eine Nachricht empfangen wird.

Abonnieren Sie in Ihrer Web-App Push-Benachrichtigungen und prüfen Sie, ob in der Konsole User IS subscribed angezeigt wird. Klicken Sie in den DevTools im Bereich Anwendung auf dem Tab Service Worker auf die Schaltfläche Push:

Nachdem Sie auf Push geklickt haben, sollte eine Benachrichtigung wie diese angezeigt werden:

Hinweis: Wenn dieser Schritt nicht funktioniert, heben Sie die Registrierung des Service Workers über den Link Unregister (Registrierung aufheben) im Bereich „Application“ (Anwendung) der DevTools auf, warten Sie, bis der Service Worker beendet wurde, und laden Sie die Seite dann neu.

Vervollständigter Code

Wenn Sie auf eine dieser Benachrichtigungen klicken, passiert nichts. Sie können Benachrichtigungsklicks verarbeiten, indem Sie in Ihrem Service Worker auf notificationclick-Ereignisse warten.

Fügen Sie zuerst einen notificationclick-Listener in sw.js hinzu:

self.addEventListener('notificationclick', function(event) {
  console.log('[Service Worker] Notification click received.');

  event.notification.close();

  event.waitUntil(
    clients.openWindow('https://developers.google.com/web')
  );
});

Wenn der Nutzer auf die Benachrichtigung klickt, wird der notificationclick-Ereignis-Listener aufgerufen.

Zuerst wird die Benachrichtigung geschlossen, auf die geklickt wurde:

event.notification.close();

Daraufhin wird ein neues Fenster oder ein neuer Tab geöffnet und die URL https://developers.google.com/web wird geladen. Sie können das ändern. 

event.waitUntil(
    clients.openWindow('https://developers.google.com/web/')
  );

event.waitUntil() sorgt dafür, dass der Browser den Service Worker nicht beendet, bevor das neue Fenster oder der neue Tab angezeigt wurde.

Jetzt ausprobieren

Lösen Sie noch einmal eine Push-Nachricht in DevTools aus und klicken Sie auf die Benachrichtigung. Die Benachrichtigung wird geschlossen und ein neuer Tab wird geöffnet.

Sie haben gesehen, dass Ihre Web-App mit den Entwicklertools eine Benachrichtigung anzeigen kann, und sich angesehen, wie die Benachrichtigung mit einem Klick geschlossen wird. Im nächsten Schritt wird eine Push-Benachrichtigung gesendet.

Normalerweise wäre dazu erforderlich, ein Abo von einer Webseite an ein Backend zu senden. Das Backend würde dann eine Push-Nachricht auslösen, indem es einen API-Aufruf an den Endpunkt im Abo sendet.

Das ist nicht Teil dieses Codelabs, aber Sie können die Begleitwebsite (web-push-codelab.glitch.me) verwenden, um eine Push-Benachrichtigung auszulösen. Fügen Sie das Abo unten auf Ihrer Seite ein:

Füge den Link dann auf der Companion-Website in den Textbereich Abonnement für „Senden an“ ein:

Fügen Sie unter Zu sendender Text einen beliebigen String hinzu, der mit der Push-Benachrichtigung gesendet werden soll.

Klicken Sie auf die Schaltfläche Push-Nachricht senden.

Sie sollten dann eine Push-Benachrichtigung erhalten. Der von Ihnen verwendete Text wird in der Konsole protokolliert.

So haben Sie die Möglichkeit, das Senden und Empfangen von Daten zu testen und Benachrichtigungen entsprechend zu bearbeiten.

Die Companion-App ist nur ein Node-Server, der die Web-Push-Bibliothek zum Senden von Nachrichten verwendet. Es lohnt sich, die web-push-libs-Organisation auf GitHub zu prüfen, um zu sehen, welche Bibliotheken zum Senden von Push-Nachrichten verfügbar sind. Dadurch werden viele Details zum Auslösen von Push-Benachrichtigungen berücksichtigt.

Hier finden Sie den gesamten Code für die Begleitwebsite.

Vervollständigter Code

Die einzige Funktion, die fehlt, ist die Möglichkeit, einen Nutzer von Push-Benachrichtigungen abzumelden. Dazu müssen Sie unsubscribe() für ein PushSubscription aufrufen.

Ändern Sie in Ihrer scripts/main.js-Datei den pushButton-Klick-Listener in initializeUI() in Folgendes:

pushButton.addEventListener('click', function() {
  pushButton.disabled = true;
  if (isSubscribed) {
    unsubscribeUser();
  } else {
    subscribeUser();
  }
});

Sie rufen jetzt die neue Funktion unsubscribeUser() auf. In dieser Funktion rufen Sie das aktuelle Abo ab und rufen unsubscribe() dafür auf. Fügen Sie den folgenden Code zu scripts/main.js hinzu:

function unsubscribeUser() {
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) {
    if (subscription) {
      return subscription.unsubscribe();
    }
  })
  .catch(function(error) {
    console.log('Error unsubscribing', error);
  })
  .then(function() {
    updateSubscriptionOnServer(null);

    console.log('User is unsubscribed.');
    isSubscribed = false;

    updateBtn();
  });
}

Sehen wir uns diese Funktion einmal genauer an.

Rufen Sie zuerst das aktuelle Abo mit getSubscription() ab:

swRegistration.pushManager.getSubscription()

Gibt ein Promise zurück, das mit einem PushSubscription aufgelöst wird, falls eines vorhanden ist. Andernfalls wird null zurückgegeben. Wenn ein Abo vorhanden ist, rufen Sie unsubscribe() dafür auf, wodurch das PushSubscription ungültig wird.

swRegistration.pushManager.getSubscription()
.then(function(subscription) {
  if (subscription) {
    // TODO: Tell application server to delete subscription
    return subscription.unsubscribe();
  }
})
.catch(function(error) {
  console.log('Error unsubscribing', error);
})

Der Aufruf von unsubscribe() gibt ein Promise zurück, da es einige Zeit dauern kann, bis der Vorgang abgeschlossen ist. Sie geben dieses Promise zurück, damit das nächste then() in der Kette auf den Abschluss von unsubscribe() wartet. Außerdem fügen Sie einen Catch-Handler hinzu, falls beim Aufrufen von unsubscribe() ein Fehler auftritt. Danach können Sie die Benutzeroberfläche aktualisieren.

.then(function() {
  updateSubscriptionOnServer(null);

  console.log('User is unsubscribed.');
  isSubscribed = false;

  updateBtn();
})

Jetzt ausprobieren

In Ihrer Web-App sollte es möglich sein, auf Push-Messaging aktivieren oder Push-Messaging deaktivieren zu klicken. In den Logs sollte dann zu sehen sein, dass der Nutzer abonniert bzw. abgemeldet wurde.

Herzlichen Glückwunsch zum Abschluss dieses Codelabs!

In diesem Codelab haben Sie gelernt, wie Sie Push-Benachrichtigungen in Ihre Web-App einfügen. Wenn Sie mehr über die Möglichkeiten von Webbenachrichtigungen erfahren möchten, sehen Sie sich diese Dokumente an.

Wenn Sie Push-Benachrichtigungen auf Ihrer Website bereitstellen möchten, sollten Sie möglicherweise Unterstützung für ältere oder nicht standardkonforme Browser hinzufügen, die GCM verwenden. Weitere Informationen

Weitere Informationen

Relevante Blogposts