Memorizzazione nella cache

L'archiviazione cache è uno strumento efficace. Rende le tue app meno dipendenti dalle condizioni della rete. Con un buon uso delle cache, puoi rendere disponibile offline la tua app web e pubblicare gli asset il più rapidamente possibile in qualsiasi condizione di rete. Come accennato in Risorse e dati, puoi decidere la strategia migliore per memorizzare le risorse necessarie nella cache. Per gestire la cache che il service worker interagisce con l'API Cache Storage.

Supporto dei browser

  • 43
  • 16
  • 41
  • 11.1

Fonte

L'API Cache Storage è disponibile in diversi contesti:

  • Il contesto della finestra (il thread principale della PWA).
  • Il service worker.
  • Qualsiasi altro worker che utilizzi.

Un vantaggio della gestione della cache mediante i service worker è che il suo ciclo di vita non è legato alla finestra, il che significa che non stai bloccando il thread principale. Tieni presente che, per utilizzare l'API Cache Storage, la maggior parte di questi contesti deve utilizzare una connessione TLS.

Che cosa memorizzare nella cache

La prima domanda che potresti avere in merito alla memorizzazione nella cache riguarda la memorizzazione nella cache. Anche se non esiste una sola risposta a questa domanda, puoi iniziare con tutte le risorse minime necessarie per il rendering dell'interfaccia utente.

Tali risorse dovrebbero includere:

  • Il codice HTML della pagina principale (il valore start_url dell'app).
  • Fogli di stile CSS necessari per l'interfaccia utente principale.
  • Immagini utilizzate nell'interfaccia utente.
  • I file JavaScript sono necessari per il rendering dell'interfaccia utente.
  • Per eseguire il rendering di un'esperienza di base sono necessari dati, ad esempio un file JSON.
  • Caratteri web.
  • In un'applicazione con più pagine, altri documenti HTML che vuoi pubblicare rapidamente o in modalità offline.

Pronto per offline

Sebbene la funzionalità offline sia uno dei requisiti per un'app web progressiva, è essenziale capire che non tutte le PWA hanno bisogno di un'esperienza offline completa, ad esempio le soluzioni di cloud gaming o le app di crypto-asset. Pertanto, è buona norma offrire un'interfaccia utente di base che guidi gli utenti in queste situazioni.

La PWA non dovrebbe visualizzare il messaggio di errore di un browser che indica che il motore di rendering web non è riuscito a caricare la pagina. Utilizza invece il service worker per mostrare i tuoi messaggi, evitando un errore generico e poco chiaro del browser.

Esistono molte strategie di memorizzazione nella cache diverse che puoi utilizzare a seconda delle esigenze della tua PWA. Ecco perché è importante progettare l'utilizzo della cache per offrire un'esperienza veloce e affidabile. Ad esempio, se tutti gli asset per app vengono scaricati rapidamente, non consumano molto spazio e non devono essere aggiornati a ogni richiesta, la memorizzazione nella cache di tutti gli asset è una strategia valida. Se invece disponi di risorse che devono essere la versione più recente, potresti considerare la possibilità di non memorizzare nella cache questi asset.

Utilizzo dell'API

Utilizza l'API Cache Storage per definire un insieme di cache all'interno della tua origine, ciascuna identificata con un nome stringa che puoi definire. Accedi all'API tramite l'oggetto caches e il metodo open consente la creazione o l'apertura di una cache già creata. Il metodo aperto restituisce una promessa per l'oggetto cache.

caches.open("pwa-assets")
.then(cache => {
  // you can download and store, delete or update resources with cache arguments
});

Download e archiviazione di asset

Per chiedere al browser di scaricare e archiviare gli asset, utilizza i metodi add o addAll. Il metodo add effettua una richiesta e archivia una risposta HTTP e addAll un gruppo di risposte HTTP come transazione basata su un array di richieste o URL.

caches.open("pwa-assets")
.then(cache => {
  cache.add("styles.css"); // it stores only one resource
  cache.addAll(["styles.css", "app.js"]); // it stores two resources
});

L'interfaccia di archiviazione della cache archivia la totalità di una risposta, comprese tutte le intestazioni e il corpo. Di conseguenza, puoi recuperarla in un secondo momento utilizzando una richiesta HTTP o un URL come chiave. Vedrai come farlo nel capitolo Pubblicazione.

Quando inserire nella cache

Nella PWA, sei tu a decidere quando memorizzare i file nella cache. Sebbene uno dei due approcci sia archiviare il maggior numero possibile di asset quando il service worker è installato, di solito non è l'idea migliore. La memorizzazione nella cache di risorse non necessarie spreca larghezza di banda e spazio di archiviazione e potrebbe causare la pubblicazione da parte dell'app di risorse obsolete non intenzionali.

Non è necessario memorizzare nella cache tutti gli asset contemporaneamente, perché puoi memorizzarli nella cache molte volte durante il ciclo di vita della PWA, ad esempio:

  • Al momento dell'installazione del service worker.
  • Dopo il primo caricamento della pagina.
  • Quando l'utente accede a una sezione o a un percorso.
  • Quando la rete è inattiva.

Puoi richiedere la memorizzazione nella cache di nuovi file nel thread principale o all'interno del contesto del service worker.

Memorizzazione nella cache degli asset in un service worker

Uno degli scenari più comuni è la memorizzazione nella cache di un insieme minimo di asset quando viene installato il service worker. Per farlo, puoi utilizzare l'interfaccia di archiviazione della cache all'interno dell'evento install nel service worker.

Poiché il thread del service worker può essere interrotto in qualsiasi momento, puoi richiedere al browser di attendere il completamento della promessa di addAll per aumentare le opportunità di archiviazione di tutti gli asset e mantenere l'app coerente. L'esempio seguente mostra come eseguire questa operazione utilizzando il metodo waitUntil dell'argomento dell'evento ricevuto nel listener di eventi del service worker.

const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", event => {
   event.waitUntil(
      caches.open("pwa-assets")
      .then(cache => {
         return cache.addAll(urlsToCache);
      });
   );
});

Il metodo waitUntil() riceve una promessa e chiede al browser di attendere l'esecuzione dell'attività nella promessa di risoluzione (evasa o non riuscita) prima di terminare il processo del service worker. Potrebbe essere necessario concatenare le promesse e restituire le chiamate add() o addAll() in modo che un singolo risultato arrivi al metodo waitUntil().

Puoi anche gestire le promesse utilizzando la sintassi asinc/await. In questo caso, devi creare una funzione asincrona che possa chiamare await e che restituisca una promessa a waitUntil() dopo la chiamata, come nell'esempio seguente:

const urlsToCache = ["/", "app.js", "styles.css", "logo.svg"];
self.addEventListener("install", (event) => {
   let cacheUrls = async () => {
      const cache = await caches.open("pwa-assets");
      return cache.addAll(urlsToCache);
   };
   event.waitUntil(cacheUrls());
});

Richieste interdominio e risposte opache

La PWA può scaricare e memorizzare nella cache gli asset dalla tua origine e da più domini, ad esempio i contenuti di CDN di terze parti. Con un'app interdominio, l'interazione con la cache è molto simile alle richieste dalla stessa origine. La richiesta viene eseguita e una copia della risposta viene archiviata nella cache. Come per altri asset memorizzati nella cache, può essere utilizzato solo nell'origine dell'app.

L'asset verrà memorizzato come una risposta opaca, il che significa che il codice non potrà vedere o modificare i contenuti o le intestazioni di quella risposta. Inoltre, le risposte opache non espongono le proprie dimensioni effettive nell'API Storage, con ripercussioni sulle quote. Alcuni browser espongono dimensioni elevate, ad esempio 7 MB, a prescindere dalle dimensioni del file.

Aggiornamento ed eliminazione degli asset

Puoi aggiornare gli asset utilizzando cache.put(request, response) ed eliminarli con delete(request).

Per ulteriori dettagli, consulta la documentazione sugli oggetti cache.

Debug dell'archiviazione cache

Molti browser offrono un modo per eseguire il debug dei contenuti dello spazio di archiviazione della cache nella scheda Applicazione DevTools. Qui puoi vedere i contenuti di ogni cache all'interno dell'origine corrente. Analizzeremo meglio questi strumenti nel capitolo Strumenti e debug.

Chrome DevTools per eseguire il debug dei contenuti dello spazio di archiviazione della cache.

Risorse