App web progressive: include service worker

1. Ti diamo il benvenuto

In questo lab, prenderai un'applicazione web esistente e aggiungerai una risposta di routing di streaming per migliorare le prestazioni. Questo è il settimo di una serie di codelab complementari per il workshop sulle app web progressive. Il codelab precedente era Potenziare la tua PWA. In questa serie è presente un altro codelab.

Obiettivi didattici

• Aggiungere una risposta di streaming a un service worker

Che cosa devi sapere

• JavaScript

Che cosa ti serve

• Un browser che supporti service worker e stream

2. Configurazione

Inizia clonando o scaricando il codice iniziale necessario per completare questo codelab:

Clona il repository

Scarica zip

Se cloni il repository, assicurati di trovarti nel ramo pwa06--service-worker-includes. Il file zip contiene anche il codice per questo ramo.

Questo codebase richiede Node.js 14 o versioni successive. Una volta disponibile il codice, esegui npm ci dalla riga di comando nella cartella del codice per installare tutte le dipendenze necessarie. Poi, esegui npm start per avviare il server di sviluppo per il codelab.

Il file README.md del codice sorgente fornisce una spiegazione per tutti i file distribuiti. Inoltre, i seguenti sono i file esistenti chiave con cui lavorerai durante questo codelab:

File delle chiavi

• js/preview.js: visualizza l'anteprima del file JavaScript della pagina
• service-worker.js - File service worker della PWA

3. Anteprima dello streaming

La pagina di anteprima può essere suddivisa in tre parti distinte: l'intestazione, il corpo compilato e il piè di pagina. Al momento, il corpo compilato viene visualizzato lato client, ma non c'è motivo per cui debba essere così. Spostiamolo nel service worker.

Per compilare il corpo, viene eseguita una ricerca asincrona dei contenuti. Poiché il lavoro asincrono in una risposta di navigazione è costoso, è un'ottima opportunità per trasmettere in streaming prima i contenuti noti al browser.

Per farlo, cancella prima i contenuti in js/preview.js per assicurarti che non vengano più compilati. Poi, in service-worker.js, procedi nel seguente modo:

• Importa l'esportazione denominata strategy da workbox-streams come streamsStrategy
• Importa l'esportazione denominata openDB da idb e importa l'esportazione denominata marked da marked
• Prima della registrazione del percorso per le navigazioni, aggiungi una nuova registrazione del percorso
  • Deve verificare che pathname dell'URL sia /preview
  • Deve utilizzare una strategia di streaming che
    1. Rispondi con i contenuti di preview/index.html tramite l'area dei contenuti del tag main
    2. Rispondi con una funzione che apre settings-store IndexedDB, recupera i contenuti dall'archivio oggetti settings e restituisce la versione di rendering markdown dei contenuti.
    3. Rispondi con i tag di chiusura main, body e html.

Assicurati di inserire la registrazione della route di streaming prima della registrazione della navigazione normale. Le registrazioni delle route vengono eseguite nell'ordine in cui sono incluse nel service worker, quindi se le esegui in ordine inverso, quella di streaming non verrà mai eseguita perché la richiesta sarà già stata gestita.

Con la risposta di streaming attiva, torna indietro e apri l'anteprima del sito nel browser. Dovresti notare che i contenuti della pagina vengono ora visualizzati direttamente dal service worker, senza codice lato client.

Se non vedi le modifiche, assicurati che la pagina utilizzi il nuovo service worker controllando il service worker attivo nella scheda Service Workers del riquadro Applications in Chrome DevTools.

4. Complimenti!

Hai imparato a mettere offline la tua app web utilizzando i service worker e l'API Cache Storage.

Il prossimo codelab della serie è Working with Workers.