Push-Benachrichtigungen zu Web-Apps hinzufügen

Mit Push-Nachrichten können Sie einfach und effektiv mit Ihren Nutzern interagieren. In diesem Codelab lernen Sie, wie Sie Push-Benachrichtigungen in Ihrer Web-App hinzufügen.

Lerninhalte

  • Nutzer für Push-Benachrichtigungen abonnieren und abbestellen
  • Umgang mit eingehenden Push-Nachrichten
  • Benachrichtigung anzeigen
  • Benachrichtigungsklicks beantworten

Voraussetzungen

  • Chrome 52 oder höher
  • Webserver für Chrome oder Ihren eigenen Webserver
  • Ein Texteditor
  • Grundkenntnisse in HTML, CSS, JavaScript und Chrome-Entwicklertools
  • Beispielcode (siehe "Einrichten".)

Beispielcode herunterladen

Es gibt zwei Möglichkeiten, den Beispielcode in diesem 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 du die Quelle als ZIP-Datei herunterlädst, erhältst du einen Root-Ordner mit dem Wert push-notifications-master.

Webserver installieren und bestätigen

Sie können Ihren eigenen Webserver zwar verwenden, aber dieses Codelab ist gut für die Nutzung mit der Webserver-App für Chrome ausgelegt. Wenn Sie die App noch nicht installiert haben, können Sie sie im Chrome Web Store herunterladen:

Webserver für Chrome installieren

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

Klicken Sie im Apps-Fenster auf das Webserversymbol:

Es wird dieses Dialogfeld angezeigt, über das Sie Ihren lokalen Webserver konfigurieren können:

Klicken Sie auf die Schaltfläche Ordner auswählen und wählen Sie den Ordner app in dem heruntergeladenen Ordner "push-notifications" aus. So können Sie Ihre Arbeit über die URL bereitstellen, die im Dialogfeld URL(s) des Webservers angezeigt wird.

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

Beenden Sie dann den Server und starten Sie ihn neu. Bewegen Sie dazu den Schieberegler Webserver: STARTED nach links und dann wieder nach rechts.

Klicken Sie auf die Webserver-URL, um Ihre Website in Ihrem Webbrowser aufzurufen. Die Seite sollte in etwa so aussehen, obwohl Ihre Version möglicherweise 127.0.0.1:8887 als Adresse enthält:

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 aktuellen Stand ist und die neuesten Änderungen aufweist.

So funktioniert die Einrichtung in Chrome:

  1. Öffnen Sie den Tab Push-Codelab.
  2. Öffnen Sie die Entwicklertools: Strg-Umschalttaste-I unter Windows und Linux, Cmd-Option-I unter macOS.
  3. Wählen Sie das Steuerfeld Anwendung aus, klicken Sie auf den Tab Dienst-Worker und klicken Sie auf das Kästchen Beim Aktualisieren aktualisieren. Wenn dieses Kästchen aktiviert ist, wird der Service Worker immer dann aktualisiert, wenn die Seite neu geladen wird.

Abgeschlossener Code

In Ihrem Verzeichnis app sehen Sie, dass Sie eine leere Datei namens sw.js haben. Dies ist der Service Worker. Sie kann vorerst leer bleiben. Sie fügen später Code hinzu.

Als Erstes müssen Sie diese Datei als Service Worker registrieren.

Auf der Seite app/index.html werden scripts/main.js geladen. Sie registrieren Ihren Service Worker in dieser JavaScript-Datei.

Fügen Sie scripts/main.js den folgenden Code 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';
}

Dieser Code prüft, ob Service Worker und Push-Nachrichten von Ihrem Browser unterstützt werden. Wenn sie unterstützt werden, registriert der Code Ihre sw.js-Datei.

Jetzt ausprobieren

Überprüfen Sie Ihre Änderungen, indem Sie den Tab Codelab öffnen im Browser aktualisieren.

Rufe die Konsole in den Chrome-Entwicklertools auf, um eine Service Worker is registered message zu finden:

Nameserver-Schlüssel abrufen

Um mit diesem Codelab arbeiten zu können, müssen Sie Nameserver-Schlüssel generieren. Das ist auf der Companion-Website möglich: web-push-codelab.glitch.me.

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

Push-Code-Lab-04-Companion.png

Kopiere deinen öffentlichen Schlüssel in scripts/main.js und ersetze dabei den Wert <Your Public Key>:

const applicationServerPublicKey = '<Your Public Key>';

Wichtig: Fügen Sie niemals einen privaten Schlüssel in Ihre Webanwendung ein.

Abgeschlossener Code

Im Moment ist die Schaltfläche Aktivieren der Web-App deaktiviert und kann nicht angeklickt werden. Das liegt daran, dass es standardmäßig empfohlen ist, die Push-Schaltfläche zu deaktivieren und zu aktivieren, sobald du weißt, dass Push-Nachrichten vom Browser unterstützt werden. Du kannst auch prüfen, ob der Nutzer gerade Nachrichten abonniert hat oder nicht.

Du musst in scripts/main.js zwei Funktionen erstellen:

  • initializeUI, um zu prüfen, ob der Nutzer gerade ein Abo abgeschlossen hat
  • updateBtn, um Ihre Schaltfläche zu aktivieren und den Text zu ändern, je nachdem, ob der Nutzer Abonnent ist oder nicht.

Füge eine initializeUI Funktion so zu main.js 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();
  });
}

Sie verwenden die neue Methode swRegistration aus dem vorherigen Schritt, rufen die Property pushManager ab und rufen getSubscription() darauf auf.

pushManager. getSubscription() gibt ein Promise zurück, das mit dem aktuellen Abo aufgelöst wird, wenn es eins gibt. Andernfalls wird null zurückgegeben. So kannst du prüfen, ob der Nutzer bereits ein Abo abgeschlossen hat, den Wert von isSubscribed festlegen und dann updateBtn() aufrufen, um die Schaltfläche zu aktualisieren.

Füge 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;
}

Mit dieser Funktion wird die Schaltfläche aktiviert und der Schaltflächentext geändert, je nachdem, ob der Nutzer ein Abo hat oder nicht.

Schließlich 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 Codelab aktualisieren. Die Schaltfläche Push-Benachrichtigungen aktivieren ist aktiviert (Sie können jetzt darauf klicken) und Sie sollten User is NOT subscribed in der Konsole sehen.

Im Verlauf dieses Codelabs sollte sich der Text der Schaltfläche ändern, sobald du ein Abo abonnierst oder dich abmeldest.

Abgeschlossener Code

Mit der Schaltfläche Push-Benachrichtigungen aktivieren lässt sich momentan nicht viel tun. Das sollte nicht sein.

Fügen Sie in der Funktion initializeUI() einen Klick-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, wird die Schaltfläche deaktiviert, damit der Nutzer kein zweites Mal darauf klicken kann. Das Abonnieren von Push-Nachrichten kann einige Zeit in Anspruch nehmen.

Wenn du den Nutzer gerade nicht abonnierst, rufe subscribeUser() auf. Fügen Sie dazu den folgenden Code in scripts/main.js ein:

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();
  });
}

Sieh dir an, wie dieser Code funktioniert und wie er den Nutzer für Push-Benachrichtigungen abonniert.

Zuerst musst du den öffentlichen Schlüssel des Anwendungsservers, der Base64-URL-sicher codiert ist, in einen UInt8Array konvertieren, da dies die erwartete Eingabe des subscribe()-Aufrufs ist. Die Funktion urlB64ToUint8Array() befindet sich oben in scripts/main.js.

Nach der Konvertierung des Werts rufen Sie die subscribe()-Methode für den Service Worker (pushManager) auf und übergeben den öffentlichen Schlüssel des Nameservers und den Wert userVisibleOnly: true.

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

Der Parameter userVisibleOnly ist eine Zusicherung, dass Sie bei jedem Senden einer Push-Nachricht eine Benachrichtigung sehen. Derzeit ist dieser Wert erforderlich und muss „true“ sein.

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

  1. Der Nutzer hat festgelegt, dass Benachrichtigungen angezeigt werden dürfen.
  2. Der Browser hat eine Netzwerkanfrage an einen Push-Dienst gesendet, um die für die Generierung einer PushSubscription erforderlichen Daten abzurufen.

Das subscribe()-Versprechen wird mit einem PushSubscription aufgelöst, wenn diese Schritte erfolgreich waren. Wenn der Nutzer die Berechtigung nicht gewährt oder wenn es ein Problem gibt, den Nutzer zu abonnieren, wird das Versprechen mit einer Fehlermeldung 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();
});

Damit wird entweder ein Abo abgeschlossen und der Nutzer wird als abonniert behandelt. Es kann auch ein Fehler auftreten und der Vorgang wird in der Konsole protokolliert. In beiden Fällen rufst du updateBtn() auf, um sicherzustellen, dass die Schaltfläche wieder aktiviert wird und den richtigen Text enthält.

In einer echten Anwendung würden Sie über die Funktion „updateSubscriptionOnServer()“ Ihre Abodaten an ein Back-End senden, für das Codelab jedoch einfach das Abo in der Benutzeroberfläche anzeigen. Füge 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

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

Wenn Sie die Berechtigung gewähren, 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 unten als JSON-Daten ansehen.

Abgeschlossener Code

Was Sie noch nicht verarbeitet haben, hängt davon ab, was passiert, wenn der Nutzer die Berechtigungsanfrage sperrt. Das erfordert besondere Aufmerksamkeit. Wenn der Nutzer die Berechtigung blockiert, kann Ihre Web-App die Berechtigungsaufforderung nicht noch einmal anzeigen und den Nutzer nicht abonnieren. Du musst zumindest die Taste deaktivieren, damit der Nutzer weiß, dass er sie nicht verwenden kann.

In der updateBtn()-Funktion lässt sich dieses Szenario offensichtlich verarbeiten. Dazu musst du nur den Notification.permission-Wert prüfen:

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 du die Berechtigung „denied“ hast, kann der Nutzer kein Abo abschließen und du kannst nichts weiter tun. Daher ist es am besten, die Schaltfläche dauerhaft zu deaktivieren.

Jetzt ausprobieren

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

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

Mit dieser Änderung kannst du den Nutzer jetzt abonnieren, nachdem du dir die möglichen Berechtigungen angesehen hast.

Abgeschlossener Code

Bevor Sie erfahren, wie Sie eine Push-Nachricht von Ihrem Back-End senden, sollten Sie überlegen, was passiert, wenn ein abonnierter Nutzer eine Push-Nachricht erhält.

Wenn eine Push-Nachricht ausgelöst wird, empfängt der Browser die Push-Nachricht, ermittelt, für welchen Service-Worker die Push-Nachricht gesendet wird, aktiviert diesen Service Worker und sendet ein Push-Ereignis. Sie müssen auf dieses Ereignis achten und eine Benachrichtigung einblenden.

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));
});

Dieser Code wird hier erläutert. Sie fügen Ihrem Service Worker push-Ereignisse hinzu, indem Sie einen Ereignis-Listener hinzufügen.

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

Sofern Sie nicht bereits mit Web Workern gespielt haben, ist self wahrscheinlich neu. In einer Service Worker-Datei verweist self auf den Service Worker.

Wenn eine Push-Nachricht eingeht, wird der Ereignis-Listener aufgerufen und Sie erstellen eine Benachrichtigung durch Aufrufen von showNotification() für die registration-Property des Service Workers. Für showNotification() ist ein title erforderlich. Sie können ihm auch ein options-Objekt zuweisen, um eine Nachricht, ein Symbol und ein Badge zu setzen. Das Logo wird zum Zeitpunkt der Erstellung dieses Dokuments nur auf Android-Geräten 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 Element, das in Ihrer push-Ereignisverarbeitung behandelt wird, ist event.waitUntil(). Bei dieser Methode muss ein Browserversprechen versprochen werden, dass Ihr Service Worker weiterhin verfügbar bleibt, bis das Versprechen aufgelöst wurde.

Der Code oben lässt sich leichter verständlich formulieren:

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

Nachdem Sie das Push-Ereignis durchlaufen haben, können Sie ein Push-Ereignis testen.

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 Push-Nachrichten in Ihrer Webanwendung und achten Sie darauf, dass in der Konsole User IS subscribed angezeigt wird. Klicken Sie in den Entwicklertools auf dem Tab Service Workers (Anwendungs-Worker) im Bereich Application (Anwendung) auf die Schaltfläche Push (Push):

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

Hinweis: Wenn dieser Schritt nicht funktioniert, heben Sie die Registrierung Ihres Service Workers mit dem Link Registrierung aufheben im Steuerfeld für Entwicklertools auf, warten Sie auf das Ende des Service Workers und aktualisieren Sie die Seite dann.

Abgeschlossener Code

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

Füge 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 Ereignis-Listener notificationclick aufgerufen.

Mit dem Code wird zuerst die angeklickte Benachrichtigung geschlossen:

event.notification.close();

Daraufhin wird ein neues Fenster oder ein neuer Tab geöffnet, in dem die URL https://developers.google.com/web geladen wird. Sie können es jederzeit ändern. 

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

event.waitUntil() stellt sicher, dass der Browser den Service Worker nicht beendet, bevor das neue Fenster oder der neue Tab angezeigt wird.

Jetzt ausprobieren

Führen Sie noch einmal eine Push-Nachricht in Entwicklertools aus und klicken Sie auf die Benachrichtigung. Die Benachrichtigung wird geschlossen und ein neuer Tab geöffnet.

Du hast festgestellt, dass deine Web-App mit den Entwicklertools eine Benachrichtigung anzeigen kann, und wie du die Benachrichtigung mit einem Klick schließen kannst. Im nächsten Schritt senden Sie eine Push-Nachricht.

Normalerweise ist dafür ein Abo von einer Webseite an ein Back-End erforderlich. Das Back-End löst dann eine Push-Nachricht aus, indem ein API-Aufruf an den Endpunkt im Abo gesendet wird.

Dies ist im Rahmen dieses Codelabs nicht möglich. Sie können aber die Companion-Website (web-push-codelab.glitch.me) verwenden, um eine tatsächliche Push-Nachricht auszulösen. Füge das Abo unten auf deiner Seite ein:

Fügen Sie dies anschließend in die Companion-Website in den Textbereich Abo senden an ein:

Fügen Sie unter SMS senden einen String hinzu, den Sie mit der Push-Nachricht senden möchten.

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

Sie erhalten dann eine Push-Nachricht. Der verwendete Text wird in der Konsole protokolliert.

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

Die Companion App ist nur ein Knotenserver, der die Web-Push-Bibliothek verwendet, um Nachrichten zu senden. Es lohnt sich, die web-push-libs-Organisation auf GitHub zu überprüfen, um herauszufinden, welche Bibliotheken für das Senden von Push-Nachrichten verfügbar sind. Dadurch werden viele Details verarbeitet, um Push-Nachrichten auszulösen.

Sie können den gesamten Code für die Companion-Website hier ansehen.

Abgeschlossener Code

Es fehlt nur die Möglichkeit, den Push-Vorgang für einen Nutzer zu beenden. Dazu musst du unsubscribe() für PushSubscription aufrufen.

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

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

Wie Sie sehen, werden Sie jetzt eine neue Funktion aufrufen: unsubscribeUser(). Mit dieser Funktion erhalten Sie das aktuelle Abo und rufen dafür unsubscribe() auf. Fügen Sie scripts/main.js den folgenden Code 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();
  });
}

Gehen Sie von dieser Funktion aus.

Sichern Sie sich das aktuelle Abo, indem Sie getSubscription() aufrufen:

swRegistration.pushManager.getSubscription()

Dadurch wird ein Promise zurückgegeben, das mit einem PushSubscription aufgelöst wird, wenn ein solches vorhanden ist. Andernfalls wird null zurückgegeben. Wenn es ein Abo gibt, wird unsubscribe() dafür aufgerufen, wodurch 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 Versprechen zurück, da es einige Zeit dauern kann, bis es abgeschlossen ist. Du gibst das Versprechen zurück, sodass die nächste then() in der Kette wartet, bis unsubscribe() abgeschlossen ist. Sie fügen auch einen Catching-Handler für den Fall hinzu, dass unsubscribe()-Ergebnisse zu einem Fehler führen. Anschließend können Sie Ihre Benutzeroberfläche aktualisieren.

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

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

  updateBtn();
})

Jetzt ausprobieren

Sie sollten in der Webanwendung Push-Benachrichtigungen aktivieren oder Push-Benachrichtigungen deaktivieren drücken können. In den Protokollen wird angezeigt, ob der Nutzer abonniert oder abgemeldet wurde.

Glückwunsch, du hast dieses Codelab abgeschlossen!

In diesem Codelab haben wir Ihnen gezeigt, wie Sie Push-Benachrichtigungen in Ihrer Web-App einrichten. Weitere Informationen zu den Möglichkeiten von Web-Benachrichtigungen finden Sie in diesen Dokumenten.

Wenn Sie Push-Benachrichtigungen auf Ihrer Website bereitstellen möchten, können Sie einen Support für ältere Browser oder nicht standardkonforme Browser mit GCM hinzufügen. Weitere Informationen finden Sie hier.

Weitere Informationen

Relevante Blogposts