App web progressive: modalità offline

1. Ti diamo il benvenuto

In questo lab, prenderai un'applicazione web esistente e la renderai utilizzabile offline. Questo è il primo di una serie di codelab complementari per il workshop sulle app web progressive. Questa serie contiene altri sette codelab.

Obiettivi didattici

• Scrivere un service worker manualmente
• Aggiungere un service worker a un'applicazione web esistente
• Utilizza il service worker e l'API Cache Storage per rendere disponibili le risorse offline

Che cosa devi sapere

• HTML e JavaScript di base

Che cosa ti serve

• Un browser che supporta i service worker

2. Configurazione

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

Clona il repository

file_downloadScarica zip

Se cloni il repository, assicurati di trovarti nel ramo starter. 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/main.js - File JavaScript dell'applicazione principale
• service-worker.js - File service worker dell'applicazione

3. Test offline

Prima di apportare modifiche, eseguiamo un test per dimostrare che l'app web attualmente non funziona offline. Per farlo, disconnetti il computer da internet e ricarica l'app web oppure, se utilizzi Chrome:

1. Apri Chrome DevTools
2. Passa alla scheda Applicazione
3. Passa alla sezione Service worker
4. Seleziona la casella di controllo Offline.
5. Aggiorna la pagina senza chiudere Chrome DevTools

Ora che il sito è stato testato e non è stato caricato offline, è il momento di aggiungere alcune funzionalità online. Deseleziona la casella di controllo offline e continua con il passaggio successivo.

4. Interagisci offline

È il momento di aggiungere un service worker di base. Questa operazione avviene in due passaggi: la registrazione del service worker e la memorizzazione nella cache delle risorse.

Registrare un service worker

Esiste già un file service worker vuoto, quindi per assicurarti che le modifiche vengano visualizzate, registriamolo nella nostra applicazione. Per farlo, aggiungi il seguente codice all'inizio di js/main.js:

// Register the service worker
if ('serviceWorker' in navigator) {
  // Wait for the 'load' event to not block other work
  window.addEventListener('load', async () => {
    // Try to register the service worker.
    try {
      // Capture the registration for later use, if needed
      let reg;

      // Use ES Module version of our Service Worker in development
      if (import.meta.env?.DEV) {
        reg = await navigator.serviceWorker.register('/service-worker.js', {
          type: 'module',
        });
      } else {
        // In production, use the normal service worker registration
        reg = await navigator.serviceWorker.register('/service-worker.js');
      }

      console.log('Service worker registered! 😎', reg);
    } catch (err) {
      console.log('😥 Service worker registration failed: ', err);
    }
  });
}

Spiegazione

Questo codice registra il file service worker service-worker.js vuoto una volta caricata la pagina e solo se il sito supporta i service worker.

Risorse di prememorizzazione nella cache

Affinché l'app web funzioni offline, il browser deve essere in grado di rispondere alle richieste di rete e scegliere dove indirizzarle. Per farlo, aggiungi quanto segue a service-worker.js

// Choose a cache name
const cacheName = 'cache-v1';
// List the files to precache
const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js'];

// When the service worker is installing, open the cache and add the precache resources to it
self.addEventListener('install', (event) => {
  console.log('Service worker install event!');
  event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources)));
});

self.addEventListener('activate', (event) => {
  console.log('Service worker activate event!');
});

// When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network
self.addEventListener('fetch', (event) => {
  console.log('Fetch intercepted for:', event.request.url);
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      if (cachedResponse) {
        return cachedResponse;
      }
      return fetch(event.request);
    }),
  );
});

Ora torna al browser, chiudi la scheda di anteprima e riaprila. Dovresti vedere console.log corrispondenti ai diversi eventi nel service worker.

Dopodiché, torna offline e aggiorna il sito. Dovresti vedere che si carica anche se sei offline.

Spiegazione

Durante l'evento di installazione del service worker, viene aperta una cache denominata utilizzando l'API Cache Storage. I file e le route specificati in precacheResources vengono quindi caricati nella cache utilizzando il metodo cache.addAll. Questa operazione viene chiamata pre-caching perché memorizza preventivamente nella cache il set di file durante l'installazione, anziché memorizzarli nella cache quando sono necessari o richiesti.

Una volta che il service worker controlla il sito, le risorse richieste passano attraverso il service worker come un proxy. Ogni richiesta attiva un evento di recupero che, in questo service worker, cerca una corrispondenza nella cache e, se la trova, risponde con la risorsa memorizzata nella cache. Se non viene trovata una corrispondenza, la risorsa viene richiesta normalmente.

La memorizzazione nella cache delle risorse consente all'app di funzionare offline evitando le richieste di rete. Ora l'app può rispondere con un codice di stato 200 quando è offline.

5. Complimenti!

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

Il prossimo codelab della serie è Utilizzo di Workbox.