Eventi push

Matt Gaunt
X Home page

A questo punto, abbiamo trattato l'iscrizione di un utente e l'invio di un messaggio push. Il passaggio successivo consiste nel ricevere il messaggio push sul dispositivo dell'utente e visualizzare una notifica (così come il lavoro che vorremmo svolgere).

Evento push

Quando un messaggio viene ricevuto, verrà inviato un evento push nel Service worker.

Il codice per la configurazione di un listener di eventi push dovrebbe essere molto simile a quello di qualsiasi altro evento listener che scriveresti in JavaScript:

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

La parte più strana di questo codice per la maggior parte degli sviluppatori che non hanno familiarità con i service worker è self . L'istruzione self è comunemente utilizzata nei web worker, al pari dei service worker. self si riferisce a con l'ambito globale, un po' come window in una pagina web. Ma per i web worker e i service worker, self si riferisce al worker stesso.

Nell'esempio precedente, self.addEventListener() può essere considerato come l'aggiunta di un listener di eventi a del service worker stesso.

Nell'esempio dell'evento push, controlliamo se ci sono dati e stampiamo qualcosa sulla console.

Esistono altri modi per analizzare i dati di un evento push:

// 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()

La maggior parte delle persone utilizza json() o text(), a seconda di ciò che si aspetta dalla propria applicazione.

Questo esempio mostra come aggiungere un listener di eventi push e come accedere ai dati, mancano due parti molto importanti di funzionalità. Non mostra alcuna notifica e non utilizzano event.waitUntil().

Attendi fino a

Una delle cose da capire dei service worker è che avete poco controllo su quando verrà eseguito il codice del service worker. Il browser decide quando attivarlo e quando e terminarla. L'unico modo per dire al browser è: "Sono molto impegnato a fare cose", consiste nel passare una promessa al metodo event.waitUntil(). In questo modo, il browser mantieni il service worker in esecuzione finché la promessa che hai passato non si è risolta.

Con gli eventi push, c'è un ulteriore requisito che devi mostrare una notifica prima la promessa che hai lasciato si è stabilizzata.

Ecco un esempio base di visualizzazione di una notifica:

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

    event.waitUntil(promiseChain);
});

Chiamare self.registration.showNotification() è il metodo che mostra una notifica a l'utente e restituisce una promessa che si risolverà una volta visualizzata la notifica.

Per rendere questo esempio il più chiaro possibile, ho assegnato questa promessa a un denominata promiseChain. Questo viene poi trasmesso a event.waitUntil(). So che è molto dettagliato, ma ho notato una serie di problemi che sono culminati come risultato non aver capito cosa trasmettere a waitUntil() o che sia il risultato di una promessa non andata a buon fine o encoder-decoder.

Un esempio più complicato con una richiesta di rete di dati e il monitoraggio dell'evento push con Analytics potrebbe avere il seguente aspetto:

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

Qui chiamiamo una funzione che restituisce una promessa pushReceivedTracking(), che, ai fini dell'esempio, possiamo far finta di effettuare una richiesta di rete al nostro fornitore di analisi. Stiamo anche facendo una richiesta di rete, ottenendo risposta e mostrare una notifica utilizzando i dati delle risposte per il titolo e messaggio della notifica.

Possiamo garantire che il service worker rimanga attivo mentre entrambe queste attività vengono eseguite combinando queste promesse con Promise.all(). La promessa risultante viene passata a event.waitUntil() Ciò significa che il browser attenderà il termine di entrambe le promesse prima di controllare che una notifica e termina il service worker.

Il motivo per cui dovremmo preoccuparci di waitUntil() e di come usarlo è che uno dei I problemi comuni riscontrati dagli sviluppatori sono che, quando la catena delle promesse non è corretta o è inaccessibile, Chrome mostra questo valore "predefinito" notifica:

Un'immagine della notifica predefinita in Chrome

Chrome mostrerà solo il messaggio "Questo sito è stato aggiornato in background". quando un e l'evento push nel service worker non mostra un una notifica al termine della promessa passata a event.waitUntil().

Il motivo principale per cui gli sviluppatori si bloccano è che il loro codice spesso chiama self.registration.showNotification(), ma non lo sta facendo con la promessa che restituisce. A intermittenza, viene visualizzata la notifica predefinita essere visualizzati. Ad esempio, potremmo rimuovere il reso per self.registration.showNotification() nell'esempio precedente e corriamo il rischio che lo visualizzi notifica.

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

Puoi vedere quanto è facile perdersi.

Ricorda: se vedi questa notifica, controlla le catene promesse e event.waitUntil().

Nella prossima sezione, vedremo cosa possiamo fare per definire lo stile delle notifiche quali contenuti possiamo visualizzare.

Passaggi successivi

Codelab