Web-Push-Benachrichtigungen einfach erklärt

Web-Push-Benachrichtigungen

Web-Push-Benachrichtigungen: Was sie sind und wie sie funktionieren | We.Inc

Was Push-Benachrichtigungen im Web sind, die drei Browser-APIs dahinter, die Home-Bildschirm-Regel auf dem iPhone und eine Berechtigungs-Demo, die du im Browser ausprobieren kannst.

Eine Push-Benachrichtigung ist eine kurze Nachricht, die eine Website oder App an dein Gerät sendet und die auch erscheint, wenn die Website geschlossen ist. Im Web braucht sie drei Browserfunktionen: einen Service Worker, der im Hintergrund läuft, die Push API zum Empfangen der Nachricht und die Notifications API zum Anzeigen, sobald der Besucher zustimmt.

Die Bausteine von Web Push

Baustein
Was er tut

Service Worker
Ein Skript, das der Browser für deine Website vorhält und das aufwachen kann, wenn eine Nachricht eintrifft

Push API
Meldet den Browser an und empfängt Nachrichten, die dein Server pusht

Notifications API
Fragt nach Erlaubnis und zeichnet die Benachrichtigung auf den Bildschirm

Dein Server
Speichert jedes Abonnement und sendet Nachrichten über den Push-Dienst des Browsers

Mit Push sagt ein Shop einem Kunden, dass seine Bestellung verschickt wurde, oder eine Buchungsseite erinnert an den Termin morgen, ganz ohne E-Mail. Gut gemacht ist das willkommen, zu früh gefragt wird es für immer blockiert. Die Demo unten zeigt die Berechtigungszustände nur mit einer lokalen Benachrichtigung.

Deine Website registriert auf einer HTTPS-Seite einen Service Worker, ein Hintergrundskript.
Wenn der Besucher auf einen Button wie Benachrichtige mich tippt, rufst du Notification.requestPermission() auf.
Erlaubt er es, ruft der Service Worker pushManager.subscribe() mit dem öffentlichen Schlüssel deines Servers auf und erhält ein Abonnement.
Du speicherst dieses Abonnement auf deinem Server. Später sendet dein Server eine Nachricht daran, der Service Worker empfängt ein push-Event und zeigt eine Benachrichtigung.

Frag nach einem klaren Moment des Interesses, etwa einer Bestellung, nicht beim ersten Seitenaufruf.
Zeig zuerst deine eigene kleine Frage und ruf den Browser-Dialog nur auf, wenn die Antwort ja lautet. Eine Blockierung im Browser können Besucher nur schwer rückgängig machen.
Sag, was du senden wirst und wie oft, und halte dich daran.
Nutze ein tag, damit ein neues Update das alte ersetzt, statt sich zu stapeln.
Biete eine Möglichkeit, Benachrichtigungen auf deiner Website abzuschalten, nicht nur in den Browsereinstellungen.

Häufige Fragen

Funktionieren Web-Push-Benachrichtigungen auf dem iPhone?

Ja, seit iOS und iPadOS 16.4, für Web-Apps, die zum Home-Bildschirm hinzugefügt wurden. Laut WebKit kann eine solche App um Erlaubnis bitten, und die Anfrage muss aus einer direkten Nutzeraktion kommen, etwa dem Tippen auf einen Button.

Muss die Website geöffnet sein, um einen Push zu empfangen?

Nein. MDN beschreibt die Push API so, dass eine Web-App Nachrichten empfangen kann, egal ob sie im Vordergrund oder überhaupt geladen ist. Der Service Worker verarbeitet die Nachricht.

Welche drei Berechtigungszustände gibt es?

granted (der Besucher hat es erlaubt), denied (er hat es blockiert) und default (noch nicht entschieden). Im Zustand default verhält sich der Browser so, als wäre es denied.

Brauche ich HTTPS?

Ja. MDN kennzeichnet die Berechtigungsanfrage für Benachrichtigungen als nur in sicheren Kontexten verfügbar und sagt, dass auch Service Worker nur in sicheren Kontexten verfügbar sind (http://localhost zählt während der Entwicklung).

Was ist userVisibleOnly?

Eine Option für pushManager.subscribe(), die verspricht, dass jeder Push etwas für den Nutzer Sichtbares erzeugt. MDN merkt an, dass Chrome und Edge das Abonnement ablehnen, wenn sie nicht auf true gesetzt ist.

Push, In-App-Nachrichten und E-Mail

Push erreicht den Benachrichtigungsbereich des Geräts und eignet sich daher für Zeitkritisches und Persönliches: eine Lieferung heute, ein freier Tisch, ein Zahlungsproblem.
Alles Lange oder alles, was jemand später wiederfinden muss, gehört in eine E-Mail. Ein tägliches Sonderangebot gehört nirgendwo in die Nähe von Push.

Die Erlaubnis ist eine einmalige Chance

Nachdem ein Besucher Benachrichtigungen blockiert hat, lautet die Berechtigung denied, und das Beispiel von MDN hört einfach auf zu fragen. Sie wieder einzuschalten liegt beim Besucher, in den Website-Einstellungen des Browsers. Deshalb ist eine sanfte Anfrage üblich, dein eigenes Banner vor dem echten Dialog.
MDN merkt außerdem an, dass Chrome und Firefox die Berechtigungsanfrage aus einem Cross-Origin-iframe nicht mehr zulassen, frag also von deiner eigenen Seite auf oberster Ebene.

Der Code, Schritt für Schritt

Auf der Seite: fragen, dann abonnieren

Läuft nur, wenn der Besucher auf deinen Button tippt. Der öffentliche Schlüssel stammt aus dem VAPID-Schlüsselpaar deines Servers.

In sw.js: die Nachricht anzeigen

Der Service Worker wacht bei einem push-Event auf und muss dafür eine Benachrichtigung anzeigen.

Den Berechtigungsablauf ausprobieren

Das prüft, was dein Browser unterstützt, und lässt dich dir selbst eine lokale Benachrichtigung anzeigen. Nichts wird abonniert und kein Server ist beteiligt.

Was dieser Browser unterstützt

Funktion
Hier verfügbar

Notifications API

Service Worker

Push API (PushManager)

Sichere Seite (HTTPS)

Nein

Benachrichtigungsberechtigung gerade:

Noch nicht gefragt (default)

Erlaubt (granted)

Blockiert (denied)

In diesem Browser nicht unterstützt

Um Erlaubnis bitten

Test-Benachrichtigung anzeigen

Deine Bestellung ist bereit

Das ist ein lokaler Test aus dem we.inc-Leitfaden. Kein Server hat ihn gesendet.

An dein System gesendet. Wenn nichts erschienen ist, prüfe die Benachrichtigungseinstellungen deines Geräts.

Dieser Browser wollte keine Seitenbenachrichtigung anzeigen. Auf vielen Handys kommen Benachrichtigungen nur über einen Service Worker.

Du hast Benachrichtigungen für diese Website blockiert. Nur du kannst das rückgängig machen, über die Website-Einstellungen neben der Adressleiste.

Nachricht erhalten, wenn deine Bestellung verschickt wird?

Wir senden nur Versand-Updates. Jederzeit abschaltbar.

Ja, benachrichtige mich

Jetzt nicht

Es wurde kein Browser-Dialog angezeigt, du kannst also später erneut fragen, ohne blockiert zu werden.

Web-Push-Benachrichtigungen einfach erklärt