Push-Benachrichtigungen im offenen Web

Matt Gaunt

Achtung:Dieser Blogpost ist etwas alt. Weitere Informationen zur Implementierung von Push-Benachrichtigungen finden Sie in unserer Dokumentation zu Web-Push-Benachrichtigungen.

Wenn Sie Entwickler fragen, welche mobilen Funktionen im stehen Push-Benachrichtigungen immer ganz oben auf der Liste.

Mit Push-Benachrichtigungen können Ihre Nutzer zeitnah Updates von Websites erhalten, die sie und bieten ihnen die Möglichkeit, sie mit individuellen, interessanten Inhalten erneut anzusprechen.

Ab Chrome-Version 42 werden die Push API und Notification API ist verfügbar für zu entwickeln.

Die Push API in Chrome basiert auf verschiedenen Technologien, darunter: Web-App-Manifeste und Service Workers. In diesem Post schauen wir uns jede dieser Technologien an, aber nur das absolute Minimum um Push-Nachrichten umzusetzen. Um ein besseres Verständnis für einige die anderen Manifeste und Offlinefunktionen von Service Workern, finden Sie unter den Links oben.

Wir werden uns auch ansehen, was in zukünftigen Chrome-Versionen, und schließlich kommen wir zu den häufig gestellten Fragen.

Push-Benachrichtigungen für Chrome implementieren

In diesem Abschnitt werden die einzelnen Schritte beschrieben, die Sie zur Unterstützung der Push-Benachrichtigungen ausführen müssen. Messaging in Ihrer Webanwendung.

Service Worker registrieren

Es besteht die Abhängigkeit davon, dass ein Service Worker Push-Nachrichten für im Web. Der Grund dafür ist, dass beim Empfang einer Push-Nachricht der Fehler Browser einen Service Worker starten, der im Hintergrund ausgeführt wird, und ein Ereignis auslösen, damit Sie entscheiden können, Push-Nachricht.

Unten sehen Sie ein Beispiel dafür, wie Sie einen Service Worker in Ihrer Webanwendung registrieren. Wann? die Registrierung erfolgreich abgeschlossen wurde, rufen wir initialiseState() auf. die wir gleich behandeln werden.

var isPushEnabled = false;

…

window.addEventListener('load', function() {
    var pushButton = document.querySelector('.js-push-button');
    pushButton.addEventListener('click', function() {
    if (isPushEnabled) {
        unsubscribe();
    } else {
        subscribe();
    }
    });

    // Check that service workers are supported, if so, progressively
    // enhance and add push messaging support, otherwise continue without it.
    if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
    .then(initialiseState);
    } else {
    console.warn('Service workers aren\'t supported in this browser.');
    }
});

Der Schaltflächen-Klick-Handler abonniert oder beendet den Nutzer, um Nachrichten zu senden. isPushEnabled ist eine globale Variable, die einfach verfolgt, ob Push ob die Nachrichtenfunktion aktuell abonniert ist oder nicht. Auf diese wird im weiteren Verlauf die Code-Snippets erstellen.

Anschließend prüfen wir, ob Service Worker unterstützt werden, bevor service-worker.js registriert wird. -Datei, die die Logik für die Verarbeitung einer Push-Nachricht enthält. Hier haben wir teilen dem Browser lediglich mit, dass diese JavaScript-Datei der Service Worker ist für unsere Website.

Anfangszustand einrichten

Sobald der Service Worker registriert ist, müssen wir den Status unserer UI einrichten.

Die Nutzer erwarten, dass Push-Nachrichten über eine einfache Benutzeroberfläche aktiviert oder deaktiviert werden. und erwartet, dass es sich über Änderungen auf dem Laufenden hält. In anderen Wenn Sie Push-Nachrichten für Ihre Website aktivieren, verlassen Sie Ihre Website Woche später sollte in Ihrer UI angezeigt werden, dass Push-Nachrichten bereits aktiviert sind.

Einige UX-Richtlinien finden Sie in diesem Dokument. In diesem Artikel geht es um die technischen Aspekte.

An dieser Stelle denken Sie vielleicht, dass es nur zwei Bundesstaaten gibt, aktiviert oder deaktiviert ist. Es gibt jedoch noch einige andere Bundesstaaten die Sie berücksichtigen müssen.

Es gibt eine Reihe von APIs, die wir überprüfen müssen, bevor wir die Schaltfläche aktivieren. Wenn alles unterstützt wird, können wir unsere Benutzeroberfläche aktivieren und den Anfangszustand auf um anzugeben, ob Push-Nachrichten abonniert sind oder nicht.

Da die meisten Überprüfungen zu einer Deaktivierung unserer Benutzeroberfläche führen, sollten Sie stellen Sie den Ausgangsstatus auf „Deaktiviert“ ein. So vermeiden Sie auch Unklarheiten, Es könnte sich um ein Problem mit dem JavaScript Ihrer Seite handeln. So kann die JS-Datei heruntergeladen wurde oder der Nutzer JavaScript deaktiviert hat.

<button class="js-push-button" disabled>
    Enable Push Messages
</button>

Mit diesem Ausgangszustand können wir die oben beschriebenen Überprüfungen in der initialiseState()-Methode, d.h. nach der Registrierung des Service Workers.

// Once the service worker is registered set the initial state
function initialiseState() {
    // Are Notifications supported in the service worker?
    if (!('showNotification' in ServiceWorkerRegistration.prototype)) {
    console.warn('Notifications aren\'t supported.');
    return;
    }

    // Check the current Notification permission.
    // If its denied, it's a permanent block until the
    // user changes the permission
    if (Notification.permission === 'denied') {
    console.warn('The user has blocked notifications.');
    return;
    }

    // Check if push messaging is supported
    if (!('PushManager' in window)) {
    console.warn('Push messaging isn\'t supported.');
    return;
    }

    // We need the service worker registration to check for a subscription
    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    // Do we already have a push message subscription?
    serviceWorkerRegistration.pushManager.getSubscription()
        .then(function(subscription) {
        // Enable any UI which subscribes / unsubscribes from
        // push messages.
        var pushButton = document.querySelector('.js-push-button');
        pushButton.disabled = false;

        if (!subscription) {
            // We aren't subscribed to push, so set UI
            // to allow the user to enable push
            return;
        }

        // Keep your server in sync with the latest subscriptionId
        sendSubscriptionToServer(subscription);

        // Set your UI to show they have subscribed for
        // push messages
        pushButton.textContent = 'Disable Push Messages';
        isPushEnabled = true;
        })
        .catch(function(err) {
        console.warn('Error during getSubscription()', err);
        });
    });
}

Kurze Übersicht über diese Schritte:

• Wir prüfen, ob showNotification in ServiceWorkerRegistration verfügbar ist Prototyp erstellen. Andernfalls können wir keine Benachrichtigung von unserem Service Worker anzeigen. wenn eine Push-Nachricht eingeht.
• Wir prüfen den aktuellen Notification.permission, um sicherzustellen, "denied". Eine verweigerte Berechtigung bedeutet, dass du keine Benachrichtigungen anzeigen kannst bis der Nutzer die Berechtigung im Browser manuell ändert.
• Um herauszufinden, ob Push-Nachrichten unterstützt werden, prüfen wir, ob PushManager im Fensterobjekt verfügbar.
• Schließlich haben wir mit pushManager.getSubscription() geprüft, ob sie ein Abo haben oder nicht. In diesem Fall senden wir die Abodetails an unser um sicherzustellen, dass die richtigen Informationen vorliegen, und richten Sie die Benutzeroberfläche so ein, dass ob Push-Nachrichten bereits aktiviert sind oder nicht. Wir werden uns ansehen, welche Details werden weiter unten in diesem Artikel im Aboobjekt angezeigt.

Wir warten, bis navigator.serviceWorker.ready aufgelöst ist, und prüfen dann, ob um ein Abonnement abzuschließen, und die Drucktaste zu aktivieren, da dies erst nach dem Service erfolgt. Worker aktiv ist, können Sie Push-Nachrichten abonnieren.

Im nächsten Schritt werden Push-Nachrichten aktiviert, Dazu müssen wir zuerst ein Google Developer Console-Projekt einrichten. und fügen unserem Manifest einige Parameter hinzu, Firebase Cloud Messaging (FCM) verwenden, zuvor als Google Cloud Messaging (GCM) bekannt.

Projekt in der Firebase Developer Console erstellen

Chrome nutzt FCM, um Push-Nachrichten zu senden und zuzustellen. aber um die FCM API verwenden, müssen Sie ein Projekt in der Firebase Developer Console einrichten.

Die folgenden Schritte gelten nur für Chrome, Opera für Android und Samsung. Browser nutzt FCM. Wie dies in anderen Browsern funktioniert, erfahren Sie weiter unten in diesem Artikel.

Neues Firebase-Entwicklerprojekt erstellen

Erstellen Sie zuerst auf https://console.firebase.google.com/ ein neues Projekt. indem Sie auf „Neues Projekt erstellen“ klicken.

Geben Sie einen Projektnamen ein, erstellen Sie das Projekt und Sie werden zum Projekt weitergeleitet Dashboard:

Klicken Sie in diesem Dashboard oben auf das Zahnrad neben dem Projektnamen und klicken Sie auf "Projekteinstellungen".

Klicken Sie auf der Seite „Einstellungen“ auf „Cloud Messaging“. .

Diese Seite enthält den API-Schlüssel für Push-Nachrichten, den wir später verwenden. und die Absender-ID, die wir im Webanwendungs-Manifest .

Web-App-Manifest hinzufügen

Für Push müssen wir eine Manifestdatei mit dem Feld gcm_sender_id hinzufügen. damit das Push-Abo erfolgreich ist. Dieser Parameter ist nur für Chrome, Opera für Android und Samsung-Browser, damit sie FCM / GCM verwenden können

Die gcm_sender_id wird von diesen Browsern verwendet, wenn Nutzer einen Nutzer abonnieren mit FCM. Das bedeutet, dass FCM das Gerät des Nutzers identifizieren und dass Ihre Absender-ID mit dem entsprechenden API-Schlüssel übereinstimmt und dass der Nutzer dass Ihr Server ihnen Push-Nachrichten senden darf.

Hier ist eine sehr einfache Manifestdatei:

{
    "name": "Push Demo",
    "short_name": "Push Demo",
    "icons": [{
        "src": "images/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
        }],
    "start_url": "/index.html?homescreen=1",
    "display": "standalone",
    "gcm_sender_id": "<Your Sender ID Here>"
}

Legen Sie für gcm_sender_id die Absender-ID von Ihr Firebase-Projekt.

Sobald Sie die Manifestdatei in Ihrem Projekt gespeichert haben (manifest.json ist eine gute Name), verweisen Sie im HTML-Code mit dem folgenden Tag im Header Ihrer Seite.

<link rel="manifest" href="/manifest.json">

Wenn du kein Webmanifest mit diesen Parametern hinzufügst, erhältst du eine Ausnahme wenn Sie versuchen, Push-Nachrichten für den Nutzer zu abonnieren, und der Fehler "Registration failed - no sender id provided" oder "Registration failed - permission denied".

Push-Benachrichtigungen abonnieren

Nachdem Sie nun ein Manifest eingerichtet haben, können Sie zum JavaScript Ihrer Websites zurückkehren.

Um ein Abo abzuschließen, musst du die Subscribe()-Methode für die PushManager-Objekt, auf die Sie über die ServiceWorkerRegistration

Dadurch wird der Nutzer aufgefordert, Ihrem Ursprung die Berechtigung zum Senden von Push zu erteilen. Benachrichtigungen. Ohne diese Berechtigung ist Folgendes nicht möglich: abonnieren.

Wenn das Promise zurückgegeben wurde Subscribe() auflöst, erhalten Sie eine PushSubscription Objekt, das einen Endpunkt enthält.

Der endpoint sollte für jeden Endpunkt einzeln auf Ihrem Server gespeichert werden. da Sie diese später zum Senden von Push-Nachrichten benötigen.

Mit dem folgenden Code wird der Nutzer für Push-Nachrichten abonniert:

function subscribe() {
    // Disable the button so it can't be changed while
    // we process the permission request
    var pushButton = document.querySelector('.js-push-button');
    pushButton.disabled = true;

    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    serviceWorkerRegistration.pushManager.subscribe()
        .then(function(subscription) {
        // The subscription was successful
        isPushEnabled = true;
        pushButton.textContent = 'Disable Push Messages';
        pushButton.disabled = false;

        // TODO: Send the subscription.endpoint to your server
        // and save it to send a push message at a later date
        return sendSubscriptionToServer(subscription);
        })
        .catch(function(e) {
        if (Notification.permission === 'denied') {
            // The user denied the notification permission which
            // means we failed to subscribe and the user will need
            // to manually change the notification permission to
            // subscribe to push messages
            console.warn('Permission for Notifications was denied');
            pushButton.disabled = true;
        } else {
            // A problem occurred with the subscription; common reasons
            // include network errors, and lacking gcm_sender_id and/or
            // gcm_user_visible_only in the manifest.
            console.error('Unable to subscribe to push.', e);
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
        }
        });
    });
}

Ihre Webanwendung kann nun eine Push-Nachricht empfangen, jedoch wird nichts bis wir unserer Service Worker-Datei einen Push-Ereignis-Listener hinzufügen.

Service Worker-Push-Ereignis-Listener

Wenn eine Push-Nachricht eingeht (über die Push-Benachrichtigung im nächsten Abschnitt), ein Push-Ereignis in Ihrem Service Worker gesendet. Danach benötigen Sie um eine Benachrichtigung anzuzeigen.

self.addEventListener('push', function(event) {
    console.log('Received a push message', event);

    var title = 'Yay a message.';
    var body = 'We have received a push message.';
    var icon = '/images/icon-192x192.png';
    var tag = 'simple-push-demo-notification-tag';

    event.waitUntil(
    self.registration.showNotification(title, {
        body: body,
        icon: icon,
        tag: tag
    })
    );
});

Mit diesem Code wird ein Push-Ereignis-Listener registriert und eine Benachrichtigung mit einem vordefinierter Titel, Textkörper, Symbol und ein Benachrichtigungs-Tag. Eine Feinheit, die bei diesem Beispiel hervorgehoben werden sollte, ist die event.waitUntil(). . Diese Methode nimmt eine versprechen und erweitert die die Lebensdauer eines Ereignis-Handlers (oder damit Arbeiter am Leben), bis das Versprechen beglichen; In diesem Fall ist das an event.waitUntil weitergegebene Promise das zurückgegebene Promise. von showNotification().

Das Benachrichtigungs-Tag dient als Kennung für eindeutige Benachrichtigungen. Wenn wir zwei Push-Nachrichten an denselben mit einer kurzen Verzögerung dazwischen und zeigt Benachrichtigungen an mit demselben Tag verwenden, zeigt der Browser die erste Benachrichtigung an und ersetzt sie durch die zweite Benachrichtigung, wenn die Push-Nachricht eingeht.

Wenn Sie mehrere Benachrichtigungen gleichzeitig anzeigen möchten, verwenden Sie ein anderes Tag oder überhaupt kein Tag. Ein ausführlicheres Beispiel für die Anzeige einer Benachrichtigung . Halten wir es vorerst einfach und prüfen, ob das Senden einer Push-Nachricht diese Benachrichtigung.

Senden einer Push-Nachricht

Wir haben Push-Nachrichten abonniert und unser Service Worker ist bereit, eine eine Push-Nachricht über FCM.

Dies gilt nur für Browser, die FCM verwenden.

Wenn Sie die Variable PushSubscription.endpoint an Ihren Server senden, gibt der ist ein spezieller Endpunkt für FCM. Am Ende der URL befindet sich ein Parameter, der ist ein registration_id.

Beispiel für einen Endpunkt:

https://fcm.googleapis.com/fcm/send/APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP

Die FCM-URL lautet:

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

Der registration_id wäre dann:

APA91bHPffi8zclbIBDcToXN_LEpT6iA87pgR-J-MuuVVycM0SmptG-rXdCPKTM5pvKiHk2Ts-ukL1KV8exGOnurOAKdbvH9jcvg8h2gSi-zZJyToiiydjAJW6Fa9mE3_7vsNIgzF28KGspVmLUpMgYLBd1rxaVh-L4NDzD7HyTkhFOfwWiyVdKh__rEt15W9n2o6cZ8nxrP

Dies gilt speziell für Browser, die FCM verwenden. In einem normalen Browser erhalten Sie einfach einen Endpunkt funktioniert es unabhängig von der URL.

Das bedeutet, dass Sie auf Ihrem Server überprüfen müssen, ob der Endpunkt gilt für FCM. Falls ja, extrahieren Sie die „registration_id“. In Python geht das in etwa so aussehen:

if endpoint.startswith('https://fcm.googleapis.com/fcm/send'):
    endpointParts = endpoint.split('/')
    registrationId = endpointParts[len(endpointParts) - 1]

    endpoint = 'https://fcm.googleapis.com/fcm/send'

Sobald du die Registrierungs-ID hast, kannst du die FCM API aufrufen. Ich Referenzdokumente zur FCM API

Die wichtigsten Aspekte, die beim Aufrufen von FCM beachtet werden sollten, sind:

• Einen Authorization-Header mit dem Wert key=<YOUR_API_KEY> muss beim API-Aufruf festgelegt werden, wobei <YOUR_API_KEY> der Wert API-Schlüssel aus dem Firebase-Projekt.
  • Der API-Schlüssel wird von FCM verwendet, um die entsprechende Absender-ID zu finden. der Nutzer die Berechtigung für Ihr Projekt erteilt hat. Sie sorgen dafür, dass die IP-Adresse des Servers für dieses Projekt auf die Zulassungsliste gesetzt wird.
• Entsprechender Content-Type-Header von application/json oder application/x-www-form-urlencoded;charset=UTF-8 abhängig davon, ob Sie die Daten als JSON- oder Formulardaten zu senden.
• Ein Array mit registration_ids – das sind die Registrierungs-IDs, die Sie verwenden von den Endpunkten Ihrer Nutzenden extrahieren.

finden Sie in der Dokumentation Push-Nachrichten von Ihrem Server zu senden, Zur schnellen Überprüfung Ihres Service Workers können Sie cURL um eine Push-Nachricht an Ihren Browser zu senden.

<YOUR_API_KEY> und <YOUR_REGISTRATION_ID> tauschen in diesen cURL-Befehl durch Ihren eigenen und führen ihn von einem Terminal aus aus.

Sie sollten eine brillante Benachrichtigung sehen:

    curl --header "Authorization: key=<YOUR_API_KEY>" --header
    "Content-Type: application/json" https://fcm.googleapis.com/fcm/send -d
    "{\"registration_ids\":[\"<YOUR_REGISTRA>TION_ID\"]}"

Denken Sie bei der Entwicklung Ihrer Back-End-Logik daran, dass der Autorisierungsheader und Format des POST-Textkörpers sind spezifisch für den FCM-Endpunkt. Ermitteln Sie daher, wann der Endpunkt ist für FCM. Fügen Sie den Header bedingt hinzu und formatieren Sie den POST-Text. Für andere Browser (und für Chrome hoffentlich in Zukunft) müssen Sie das Web-Push-Protokoll.

Ein Nachteil der aktuellen Implementierung der Push API in Chrome ist, dass Sie kann keine Daten mit einer Push-Nachricht senden. Nein, nichts. Der Grund dafür ist, dass Nutzlastdaten in einer zukünftigen Implementierung auf eurem bevor er an einen Push-Messaging-Endpunkt gesendet wird. So kann der Endpunkt, den jeweiligen Push-Anbieter, können die Inhalte Push-Nachricht. Dies schützt auch vor anderen Sicherheitslücken wie Validierung von HTTPS-Zertifikaten und Man-in-the-Middle-Angriffen zwischen und den Push-Anbieter. Da diese Verschlüsselung jedoch noch nicht unterstützt wird, In der Zwischenzeit müssen Sie einen Abruf durchführen, um Informationen zu erhalten, in eine Benachrichtigung einfügen.

Beispiel für ein umfassenderes Push-Ereignis

Die Benachrichtigung, die wir bisher erhalten haben, ist ziemlich einfach. ist es ziemlich schlecht, einen realen Anwendungsfall abzudecken.

Realistisch gesehen werden die meisten Nutzer einige Informationen von ihrem Server abrufen wollen. bevor die Benachrichtigung angezeigt wird. Diese können Daten in die Benachrichtigungstitel und eine spezifische Nachricht oder und einige Seiten oder Daten im Cache zu speichern, sodass Nutzer, die auf die Benachrichtigung klicken, Alles ist sofort verfügbar, wenn der Browser geöffnet wird – selbst wenn der Netzwerk nicht verfügbar ist.

Im folgenden Code rufen wir einige Daten von einer API ab, konvertieren die Antwort in einen und in unsere Benachrichtigung einfügen.

self.addEventListener('push', function(event) {
    // Since there is no payload data with the first version
    // of push messages, we'll grab some data from
    // an API and use it to populate a notification
    event.waitUntil(
    fetch(SOME_API_ENDPOINT).then(function(response) {
        if (response.status !== 200) {
        // Either show a message to the user explaining the error
        // or enter a generic message and handle the
        // onnotificationclick event to direct the user to a web page
        console.log('Looks like there was a problem. Status Code: ' + response.status);
        throw new Error();
        }

        // Examine the text in the response
        return response.json().then(function(data) {
        if (data.error || !data.notification) {
            console.error('The API returned an error.', data.error);
            throw new Error();
        }

        var title = data.notification.title;
        var message = data.notification.message;
        var icon = data.notification.icon;
        var notificationTag = data.notification.tag;

        return self.registration.showNotification(title, {
            body: message,
            icon: icon,
            tag: notificationTag
        });
        });
    }).catch(function(err) {
        console.error('Unable to retrieve data', err);

        var title = 'An error occurred';
        var message = 'We were unable to get the information for this push message';
        var icon = URL_TO_DEFAULT_ICON;
        var notificationTag = 'notification-error';
        return self.registration.showNotification(title, {
            body: message,
            icon: icon,
            tag: notificationTag
        });
    })
    );
});

Ich möchte noch einmal betonen, dass event.waitUntil() etwas versprochen wird. was dazu führt, dass das von showNotification() zurückgegebene Promise zurückgegeben wird, was bedeutet, dass unser Event-Listener erst beendet wird, wenn der asynchrone fetch()-Aufruf abgeschlossen ist, und wird die Benachrichtigung angezeigt.

Du wirst feststellen, dass wir auch dann eine Benachrichtigung anzeigen, wenn ein Fehler vorliegt. Dies ist Andernfalls zeigt Chrome eine eigene allgemeine Benachrichtigung an.

URL öffnen, wenn der Nutzer auf eine Benachrichtigung klickt

Wenn der Nutzer auf eine Benachrichtigung klickt, wird ein notificationclick-Ereignis ausgelöst in Ihrem Service Worker. Innerhalb Ihres Handlers können Sie entsprechende Maßnahmen ergreifen, wie das Fokussieren eines Tabs oder das Öffnen eines Fensters mit einer bestimmten URL:

self.addEventListener('notificationclick', function(event) {
    console.log('On notification click: ', event.notification.tag);
    // Android doesn't close the notification when you click on it
    // See: http://crbug.com/463146
    event.notification.close();

    // This looks to see if the current is already open and
    // focuses if it is
    event.waitUntil(
    clients.matchAll({
        type: "window"
    })
    .then(function(clientList) {
        for (var i = 0; i < clientList.length; i++) {
        var client = clientList[i];
        if (client.url == '/' && 'focus' in client)
            return client.focus();
        }
        if (clients.openWindow) {
        return clients.openWindow('/');
        }
    })
    );
});

In diesem Beispiel wird im Browser das Stammverzeichnis der Website geöffnet. vorhandener Tab mit demselben Ursprung, falls vorhanden, und öffnen Sie ansonsten einen neuen.

Hier finden Sie einen Beitrag zu den Verwendungsmöglichkeiten der Notification API.

Abo für ein Nutzergerät beenden

Sie haben das Gerät eines Nutzers abonniert und erhalten Push-Nachrichten. Wie können Sie können diese E-Mails nicht mehr erhalten.

Zum Abbestellen eines Nutzergeräts ist vor allem Folgendes erforderlich: unsubscribe()-Methode für PushSubscription und den Endpunkt von Ihren Servern zu entfernen. Senden von Push-Nachrichten, die bekanntermaßen nicht empfangen werden). Mit dem folgenden Code genau so:

function unsubscribe() {
    var pushButton = document.querySelector('.js-push-button');
    pushButton.disabled = true;

    navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
    // To unsubscribe from push messaging, you need get the
    // subscription object, which you can call unsubscribe() on.
    serviceWorkerRegistration.pushManager.getSubscription().then(
        function(pushSubscription) {
        // Check we have a subscription to unsubscribe
        if (!pushSubscription) {
            // No subscription object, so set the state
            // to allow the user to subscribe to push
            isPushEnabled = false;
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
            return;
        }

        var subscriptionId = pushSubscription.subscriptionId;
        // TODO: Make a request to your server to remove
        // the subscriptionId from your data store so you
        // don't attempt to send them push messages anymore

        // We have a subscription, so call unsubscribe on it
        pushSubscription.unsubscribe().then(function(successful) {
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
            isPushEnabled = false;
        }).catch(function(e) {
            // We failed to unsubscribe, this can lead to
            // an unusual state, so may be best to remove
            // the users data from your data store and
            // inform the user that you have done so

            console.log('Unsubscription error: ', e);
            pushButton.disabled = false;
            pushButton.textContent = 'Enable Push Messages';
        });
        }).catch(function(e) {
        console.error('Error thrown while unsubscribing from push messaging.', e);
        });
    });
}

Abonnement auf dem neuesten Stand halten

Abos können zwischen FCM und deinem Server nicht mehr synchron sein. Achten Sie darauf, parst dein Server den Antworttext der FCM API-Sende-POST-Anfrage und sucht nach error:NotRegistered- und canonical_id-Ergebnisse, wie in der FCM-Dokumentation erläutert.

Abos können auch zwischen dem Service Worker und Ihrem Server. Nach einem erfolgreichen Abonnieren/Abbestellen wird beispielsweise eine instabile Netzwerkverbindung kann dazu führen, dass Sie Ihren Server nicht aktualisieren können. Oder Nutzende könnten Widerruft die Berechtigung für Benachrichtigungen, wodurch das automatische Abbestellen ausgelöst wird. Alias dieser Fälle durch Überprüfung des Ergebnisses Regelmäßig serviceWorkerRegistration.pushManager.getSubscription() (z.B. beim Laden der Seite) und synchronisieren Sie ihn mit dem Server. Sie können auch automatisch ein neues Abo abschließen, wenn Sie kein Abo mehr haben und Notification.permission == 'granted'.

In sendSubscriptionToServer() musst du berücksichtigen, wie du fehlgeschlagene Netzwerkanfragen beim Aktualisieren von endpoint. Eine Lösung ist zum Verfolgen des Status von endpoint in einem Cookie um festzustellen, ob Ihr Server aktuelle Informationen benötigt.

Alle oben genannten Schritte führen zu einer vollständigen Implementierung der Push-Benachrichtigung auf der im Web in Chrome 46. Es gibt auch noch Spezifikationsfunktionen, die die Arbeit erleichtern. (wie eine Standard-API zum Auslösen von Push-Nachrichten), aber mit dieser Version können Sie Beginnen Sie noch heute damit, Push-Nachrichten in Ihre Web-Apps zu integrieren.

Fehler in Ihrer Webanwendung beheben

Bei der Implementierung von Push-Nachrichten treten Fehler an einem von zwei Orten auf: auf Ihrer Seite oder Ihren Service Worker.

Fehler auf der Seite können mit dem folgenden Befehl behoben werden: DevTools aus. Fehler in Service Worker beheben haben Sie zwei Möglichkeiten:

1. Rufen Sie chrome://Inspect> aufrufen > Service Worker: Diese Ansicht bietet keine als die aktuell ausgeführten Service Worker.
2. Rufen Sie chrome://serviceworker-internals auf. Hier können Sie die Status von Service Workern und sehen ggf. Fehler. Diese Seite ist temporär, bis die Entwicklertools ähnliche Funktionen haben.

Einer der besten Tipps, die ich jemandem geben kann, der neu im Bereich Service Worker ist, ist: Verwendung des Kontrollkästchens „Entwicklertools-Fenster öffnen und JavaScript-Ausführung pausieren“ beim Start des Service Workers zur Fehlerbehebung.“ Mit diesem Kontrollkästchen wird an der den Start des Service Workers und die Ausführung pausieren, können Sie das Service Worker-Skript durchgehen und überprüfen, Probleme.

Bei einem Problem zwischen FCM und dem Push-Ereignis Ihres Service Workers kann das Problem nicht behoben werden, da keine Möglichkeit besteht, um zu sehen, ob Chrome Daten empfangen hat. Das Entscheidende ist, von FCM erfolgreich ist, wenn Ihr Server einen API-Aufruf durchführt. Es sieht so aus: etwa so:

{"multicast_id":1234567890,"success":1,"failure":0,"canonical_ids":0,"results":[{"message_id":"0:1234567890"}]}

Beachten Sie die Antwort "success": 1. Wenn stattdessen ein Fehler auftritt, deutet darauf hin, dass etwas mit der FCM-Registrierungs-ID und der Push-Benachrichtigung nicht stimmt. wird Ihre Nachricht nicht an Chrome gesendet.

Fehlerbehebung bei Service Workern in Chrome für Android

Derzeit ist die Fehlerbehebung für Service Worker in Chrome für Android nicht offensichtlich. Gehen Sie zu chrome://inspect und suchen Sie nach Ihrem Gerät Listeneintrag mit dem Namen "Worker pid:...." mit der URL Ihres Dienstes Worker.

UX für Push-Benachrichtigungen

Das Chrome-Team hat ein Dokument mit Best Practices für Push-Benachrichtigungen und ein Dokument, bei der Arbeit mit Push-Benachrichtigungen.

• Best Practices für Berechtigungen für Push-Benachrichtigungen
• Push-Benachrichtigungen – Edge Cases und Gegenmaßnahmen

Push-Benachrichtigungen in Chrome und im offenen Web der Zukunft

In diesem Abschnitt geht es um einige der Chrome-Funktionen, bestimmte Aspekte dieser Implementierung kennen, die Sie kennen sollten, unterscheiden sich von anderen Browserimplementierungen.

Web-Push-Protokoll und Endpunkte

Das Tolle am Push API-Standard ist, dass Sie in der Lage sein sollten, endpoint an, übergeben Sie sie an Ihren Server und senden Sie Nachrichten senden, indem Sie das Web-Push-Protokoll implementieren.

Das Web Push Protocol ist ein neuer Standard, den Push-Anbieter implementieren können, sodass Entwickler sich keine Gedanken darüber machen müssen, wer der Push-Anbieter ist. Die dass Sie sich nicht für API-Schlüssel registrieren und spezielle wie bei FCM.

Chrome war der erste Browser, der die Push API implementiert hat, und FCM nutzt unterstützen das Web Push Protocol. Daher benötigt Chrome das gcm_sender_id und Sie müssen die Restful API für FCM verwenden.

Das Ziel von Chrome ist es, das Web Push Protocol zusammen mit Chrome und FCM zu verwenden.

Bis dahin müssen Sie den Endpunkt "https://fcm.googleapis.com/fcm/send" und getrennt von anderen Endpunkten verarbeitet, d.h. die Nutzlastdaten in einem und fügen Sie den Autorisierungsschlüssel hinzu.

So implementieren Sie das Web-Push-Protokoll

Firefox Nightly arbeitet derzeit an einer Push-Funktion und wird wahrscheinlich der erste Browser sein. um das Web-Push-Protokoll zu implementieren.

Häufig gestellte Fragen

Wo sind die Spezifikationen?

https://slightlyoff.github.io/ServiceWorker/spec/service_worker/ https://w3c.github.io/push-api/ https://notifications.spec.whatwg.org/

Kann ich doppelte Benachrichtigungen vermeiden, wenn meine Webpräsenz mehrere Ursprünge hat oder wenn ich sowohl eine webbasierte als auch eine native Präsenz habe?

Im Moment gibt es keine Lösung dafür, aber du kannst den Fortschritt in Chromium verfolgen.

Ideal wäre eine ID für das Gerät des Nutzers. die Abo-IDs der nativen App und der Web-App abgleichen, und entscheiden, an welche Person eine Push-Nachricht gesendet wird. Sie können dies über die Bildschirmgröße, Gerätemodell verwenden, bei dem ein generierter Schlüssel zwischen der Web-App und der nativen App ausgetauscht wird. hat jeder Ansatz Vor- und Nachteile.

Warum benötige ich eine gcm_sender_id?

Dies ist erforderlich, damit Chrome, Opera für Android und der Samsung-Browser die Firebase Cloud Messaging (FCM) API verwenden Ziel ist es, die Funktion Web Push Protocol, wenn der Standard abgeschlossen ist und FCM ihn unterstützt.

Warum sind es nicht sinnvoll, Web Sockets oder vom Server gesendete Ereignisse (EventSource) zu verwenden?

Der Vorteil von Push-Nachrichten besteht darin, dass Ihre Der Service Worker wird geweckt und kann eine Benachrichtigung anzeigen. Web Sockets Die Verbindung zwischen EventSource und EventSource wird getrennt, wenn die Seite oder der Browser geschlossen wird.

Was ist, wenn ich keine Übermittlung von Hintergrundereignissen benötige?

Wenn Sie keine Übermittlung im Hintergrund benötigen, sind WebSockets eine gute Option.

Wann kann ich Push-Nachrichten verwenden, ohne Benachrichtigungen anzuzeigen (z.B. Push-Benachrichtigungen im Hintergrund)?

Es gibt noch keinen Zeitplan, bis wann diese Funktion verfügbar sein wird, Hintergrundsynchronisierung implementieren Es ist noch nicht entschieden oder spezifiziert, aber es wird diskutiert, Push mit Hintergrundsynchronisierung im Hintergrund.

Warum ist HTTPS erforderlich? Wie kann ich das während der Entwicklung umgehen?

Service Worker benötigen sichere Ursprünge, um sicherzustellen, dass das Service Worker-Skript vom beabsichtigten Ursprung stammt und nicht von einem Man-in-the-Middle stammt. Angriff. Derzeit bedeutet dies die Verwendung von HTTPS auf Live-Websites, auch wenn localhost während der Entwicklung.

Wie werden Browser unterstützt?

Chrome unterstützt in der stabilen Version und an Mozilla wird in Firefox Nightly gearbeitet. Weitere Informationen finden Sie unter Push API implementieren. Weitere Informationen zur Implementierung von Benachrichtigungen

Kann ich eine Benachrichtigung nach einem bestimmten Zeitraum entfernen?

Das ist im Moment nicht möglich. Wir planen jedoch, Support für eine Liste der derzeit sichtbaren Benachrichtigungen. Wenn Sie einen Anwendungsfall für nachdem sie angezeigt wurde, würden wir gerne erfahren, Fügen Sie also bitte einen Kommentar hinzu und wir leiten ihn an das Chrome-Team weiter.

Wenn Sie nur verhindern möchten, dass eine Push-Benachrichtigung an den Nutzer gesendet wird nach einem bestimmten Zeitraum erscheinen. Es spielt dabei keine Rolle, wie lange die Benachrichtigung sichtbar ist, können Sie den FCM-Parameter für die Gültigkeitsdauer (TTL) verwenden. Weitere Informationen

Welche Einschränkungen gibt es bei Push-Nachrichten in Chrome?

In diesem Beitrag werden einige Einschränkungen beschrieben:

• Die Nutzung von CCM als Push-Dienst in Chrome führt zu einer Reihe proprietärer Anforderungen. Wir arbeiten intensiv daran, zu prüfen, ob einige dieser Probleme in die Zukunft zu führen.
• Sie müssen eine Benachrichtigung anzeigen, wenn Sie eine Push-Nachricht erhalten.
• Wenn Chrome nicht ausgeführt wird, erhalten Sie Push-Benachrichtigungen, nicht empfangen werden. Dies unterscheidet sich von ChromeOS und Android, wo Push-Nachrichten immer empfangen werden.

Sollten wir nicht die Permissions API verwenden?

Die Die Permission API ist in Chrome implementiert. aber nicht unbedingt in allen Browsern verfügbar. Weitere Informationen

Warum öffnet Chrome nicht den vorherigen Tab, wenn ich auf eine Benachrichtigung klicke?

Dieses Problem betrifft nur Seiten, die derzeit nicht von einem Dienst verwaltet werden Worker. Weitere Informationen

Was passiert, wenn eine Benachrichtigung zum Zeitpunkt, zu dem das Gerät des Nutzers die Push-Benachrichtigung erhalten hat, veraltet war?

Sie müssen immer eine Benachrichtigung anzeigen, wenn Sie eine Push-Nachricht erhalten. Für den Fall, dass Sie eine Benachrichtigung senden möchten, die aber nur nützlich ist können Sie das Feld 'time_to_live' Parameter in CCM damit FCM die Push-Nachricht nicht sendet, wenn die Ablaufzeit abgelaufen ist.

Weitere Informationen

Was passiert, wenn ich zehn Push-Nachrichten sende, das Gerät aber nur eine empfangen soll?

FCM verfügt über einen "min_key" können Sie FCM anweisen, ausstehende Anfragen die den gleichen 'min_key' [minimiert] mit der neuen Nachricht hat.

Weitere Informationen