Push-Ereignisse

Matt Gaunt
X Startseite

Sie haben bereits gelernt, wie Sie einen Nutzer abonnieren und eine Push-Nachricht senden. Der nächste Schritt besteht darin, diese Push-Nachricht auf das Gerät des Nutzers zu empfangen und eine Benachrichtigung anzuzeigen (sowie alle anderen Arbeit, die wir machen könnten).

Das Push-Ereignis

Wenn eine Nachricht empfangen wird, wird im Service Worker ein Push-Ereignis gesendet.

Der Code zum Einrichten eines Push-Ereignis-Listeners sollte jedem anderen Ereignis ziemlich ähnlich sein. Listener, den Sie in JavaScript schreiben würden:

self.addEventListener('push', function(event) {
    if (event.data) {
    console.log('This push event has data: ', event.data.text());
    } else {
    console.log('This push event has no data.');
    }
});

Der ungewöhnlichste Teil dieses Codes für die meisten Entwickler, die Service Worker noch nicht kennen, ist der self . self wird häufig in Web Workern verwendet, also dem Service Worker. self bezieht sich auf des globalen Bereichs, ähnlich wie window auf einer Webseite. Für Web Worker und Service Worker self bezieht sich auf den Worker selbst.

Im obigen Beispiel kann man sich self.addEventListener() vorstellen, als würde man einen Event-Listener zu dem Service Worker selbst.

Im Beispiel des Push-Ereignisses prüfen wir, ob Daten vorhanden sind, und geben etwas an die Konsole aus.

Es gibt andere Möglichkeiten, Daten aus einem Push-Ereignis zu parsen:

// Returns string
event.data.text()

// Parses data as JSON string and returns an Object
event.data.json()

// Returns blob of data
event.data.blob()

// Returns an arrayBuffer
event.data.arrayBuffer()

Die meisten Nutzer verwenden json() oder text(), je nachdem, was sie von ihrer Anwendung erwarten.

Dieses Beispiel zeigt, wie Sie einen Push-Ereignis-Listener hinzufügen und auf Daten zugreifen. zwei sehr wichtige Funktionen fehlen. Es wird keine Benachrichtigung angezeigt und verwendet event.waitUntil() nicht.

Warten bis

Ein wichtiger Punkt bei Service Workern ist, dass Sie wenig Kontrolle darüber haben, der Service Worker-Code ausgeführt wird. Der Browser entscheidet, wann er aktiviert und wann und zu beenden. Die einzige Möglichkeit, dem Browser mitzuteilen: „Hey, ich bin sehr beschäftigt mit ist die Übergabe eines Promise an die Methode event.waitUntil(). So kann der Browser den Service Worker so lange weiterlaufen lassen, bis das von Ihnen übergebene Versprechen eingelöst wurde.

Bei Push-Ereignissen müssen Sie zusätzlich eine Benachrichtigung anzeigen, bevor das Versprechen, das du weitergegeben hast, in die Tat umgesetzt wurde.

Hier ein einfaches Beispiel für die Anzeige einer Benachrichtigung:

self.addEventListener('push', function(event) {
    const promiseChain = self.registration.showNotification('Hello, World.');

    event.waitUntil(promiseChain);
});

Durch den Aufruf von self.registration.showNotification() wird dem Nutzer eine Benachrichtigung angezeigt. und gibt ein Versprechen zurück, das aufgelöst wird, sobald die Benachrichtigung angezeigt wird.

Um dieses Beispiel so klar wie möglich zu halten, habe ich dieses Versprechen einer Variable namens promiseChain. Diese wird dann an event.waitUntil() übergeben. Ich weiß, das ist sehr ausführlich, aber es gab eine Reihe von Problemen, die infolge von missverstanden wird, was an waitUntil() weitergegeben werden soll oder was als Folge eines gebrochenen Versprechens passieren soll Ketten.

Ein komplizierteres Beispiel mit einer Netzwerkanfrage nach Daten und der Verfolgung des Push-Ereignisses mit Analytics so aussehen:

self.addEventListener('push', function(event) {
    const analyticsPromise = pushReceivedTracking();
    const pushInfoPromise = fetch('/api/get-more-data')
    .then(function(response) {
        return response.json();
    })
    .then(function(response) {
        const title = response.data.userName + ' says...';
        const message = response.data.message;

        return self.registration.showNotification(title, {
        body: message
        });
    });

    const promiseChain = Promise.all([
    analyticsPromise,
    pushInfoPromise
    ]);

    event.waitUntil(promiseChain);
});

Hier rufen wir eine Funktion auf, die ein Promise-pushReceivedTracking() zurückgibt. Damit können wir in diesem Beispiel so tun, als würden wir eine Netzwerkanfrage stellen, an unseren Analyseanbieter. Außerdem stellen wir eine Netzwerkanfrage, und eine Benachrichtigung mit den Antwortdaten für „title“ und Nachricht der Benachrichtigung.

Wir können sicherstellen, dass der Service Worker aktiv bleibt, während diese beiden Aufgaben erledigt werden, indem wir diese Versprechen mit Promise.all(). Das resultierende Promise wird an event.waitUntil() übergeben d. h. der Browser wartet, bis beide Versprechen beendet sind, bevor er überprüft, ob eine Benachrichtigung angezeigt und der Service Worker wird beendet.

Der Grund, warum wir uns wegen waitUntil() und seiner Verwendung beunruhigen sollten, ist, dass eine der Probleme, mit denen Entwickler konfrontiert sind, besteht darin, dass Chrome bei falscher oder defekter „Standard“ anzeigen Benachrichtigung:

Ein Bild der Standardbenachrichtigung in Chrome

In Chrome wird nur die Meldung „Diese Website wurde im Hintergrund aktualisiert“ angezeigt. wenn eine empfangen, aber im Push-Ereignis im Service Worker kein nachdem das an event.waitUntil() weitergegebene Versprechen abgelaufen ist.

Der Hauptgrund dafür ist, dass ihr Code ruft oft self.registration.showNotification() an, aber das hat nicht getan. mit dem Versprechen, das es gibt. Dies führt ab und zu zur Standardbenachrichtigung angezeigt wird. Beispielsweise könnten wir die Rückgabe für self.registration.showNotification() im obigen Beispiel. Es besteht die Gefahr, dass dies zu sehen ist. Benachrichtigung.

self.addEventListener('push', function(event) {
    const analyticsPromise = pushReceivedTracking();
    const pushInfoPromise = fetch('/api/get-more-data')
    .then(function(response) {
        return response.json();
    })
    .then(function(response) {
        const title = response.data.userName + ' says...';
        const message = response.data.message;

        self.registration.showNotification(title, {
        body: message
        });
    });

    const promiseChain = Promise.all([
    analyticsPromise,
    pushInfoPromise
    ]);

    event.waitUntil(promiseChain);
});

Sie sehen, dass es leicht zu übersehen ist.

Wenn Sie diese Benachrichtigung sehen, prüfen Sie Ihre Promise-Ketten und event.waitUntil().

Im nächsten Abschnitt sehen wir uns an, wie Sie Benachrichtigungen welche Inhalte angezeigt werden können.

Weitere Informationen

Code labs