Una funzionalità dei Service worker è la possibilità di salvare file nella cache quando sta installando il service worker. In questo caso si parla di "prememorizzazione nella cache". La pre-memorizzazione nella cache consente di pubblicare file memorizzati nella cache al browser senza dover alla rete. Usa la pre-memorizzazione nella cache per gli asset critici di cui il tuo sito ha bisogno anche se offline: pagina principale, stili, immagine di riserva e script essenziali.
Perché dovresti usare Workbox?
L'uso di Workbox per la pre-memorizzazione nella cache è facoltativo. Puoi scrivere il tuo codice prememorizzare nella cache gli asset critici durante l'installazione del service worker. Il vantaggio principale dell'utilizzo di Workbox è il controllo della versione pronta all'uso. Incontrerai molti meno problemi di aggiornamento degli asset prememorizzati nella cache con Workbox rispetto se dovessi gestire autonomamente il controllo delle versioni e l'aggiornamento di questi file.
Manifest di pre-memorizzazione nella cache
La pre-memorizzazione nella cache si basa su un elenco di URL e sulle relative informazioni sul controllo delle versioni ogni URL. Complessivamente, queste informazioni sono note come manifest della pre-cache. Il manifest è la "fonte di riferimento" allo stato di tutto ciò che si intende la preregistrazione per una determinata versione di un'app web. Un manifest di preregistrazione, nel utilizzato da Workbox, ha un aspetto simile a questo:
[{
url: 'app.abcd1234.js'
}, {
url: 'offline.svg',
revision: '7836745f'
}, {
url: 'index.html',
revision: '518747aa'
}]
Quando il service worker è installato, vengono create tre voci della cache nell'
Spazio di archiviazione della cache, per ciascuno dei tre URL elencati. Il primo asset prevede il controllo delle versioni
informazioni già incluse nel relativo URL (app è il nome effettivo del file,
.abcd1234 contiene le informazioni sul controllo delle versioni, subito prima dell'estensione del file
.js). Gli strumenti di creazione di Workbox sono in grado di rilevare questo errore ed escludere un campo di revisione. La
gli altri due asset non includono informazioni sul controllo delle versioni, quindi
gli strumenti di creazione creano un campo revision separato, contenente un hash del codice locale
i contenuti del file.
Gestione di risorse prememorizzate nella cache
L'aggiunta di asset alla cache è solo una parte della procedura di pre-memorizzazione nella cache, una volta
gli asset vengono memorizzati nella cache, devono rispondere alle richieste in uscita. Per questo è necessario
Listener di eventi fetch nel service worker che può verificare quali URL hanno
pre-memorizzati nella cache e restituiscono le risposte memorizzate nella cache in modo affidabile, bypassando
rete nel processo di sviluppo. Poiché il service worker controlla la cache per trovare risposte
(e utilizza quelli prima della rete), si parla di
strategia incentrata sulla cache.
Aggiornamenti efficienti
Un manifest di pre-cache fornisce una rappresentazione esatta della cache prevista state; Se una combinazione URL/revisione nel manifest cambia, un service worker sape che la voce precedente memorizzata nella cache non è più valida e deve essere aggiornato. È sufficiente una singola richiesta di rete, effettuata automaticamente come parte del service worker controllo degli aggiornamenti, per determinare quali URL prememorizzati nella cache devono essere aggiornati.
Aggiornamenti alle risorse prememorizzate nella cache
Quando rilasci nuove versioni della tua app web, devi mantenere gli URL precedentemente prememorizzati nella cache, prememorizzare nella cache nuovi asset ed eliminare gli URL obsoleti le voci corrispondenti. A condizione che continui a generare ogni volta un manifest completo di pre-cache ricostruisci il tuo sito, il manifest funge da "fonte attendibile" per il tuo prememorizzazione nella cache in qualsiasi momento.
Se esiste già un URL con un nuovo campo di revisione o se è stato eseguito
aggiunto o rimosso dal manifest, indica al tuo service worker che
aggiornamenti necessari, nell'ambito della
install
e
activate
e gestori di eventi. Ad esempio, se hai apportato alcune modifiche al tuo sito e
completamente riprogettato, il file manifest di preregistrazione più recente potrebbe aver subito le seguenti
modifiche:
[{
url: 'app.ffaa4455.js'
}, {
url: 'offline.svg',
revision: '7836745f'
}, {
url: 'index.html',
revision: '518747aa'
}]
Ognuna di queste modifiche comunica al service worker che le nuove richieste
creato per aggiornare le voci memorizzate in precedenza ('offline.svg' e 'index.html')
e memorizzare nella cache nuovi URL ('app.ffaa4455.js'), nonché le eliminazioni per ripulire gli URL
non più utilizzate ('app.abcd1234.js').
"App store" reale esperienza di installazione
Un altro vantaggio della pre-memorizzazione nella cache è che puoi offrire agli utenti un'esperienza che altrimenti sarebbe difficile da raggiungere al di fuori di uno "store" dell'installazione. Quando un utente visita una pagina qualsiasi della tua app web per la prima volta, puoi potenzialmente prememorizzare nella cache tutti gli URL necessari per visualizzare uno dei tuoi di visualizzazioni delle app web in anticipo, senza dover aspettare le visualizzazioni vista individuale.
Quando un utente installa un'app, si aspetta che ogni sua parte venga visualizzata rapidamente, non solo alle visualizzazioni a cui hanno preso parte in passato. La pre-memorizzazione nella cache offre lo stesso la tua esperienza alle app web.
Quali asset devono essere prememorizzati nella cache?
Fai riferimento alla sezione Identificare caricata per creare un'esperienza un'immagine degli URL più sensati da prememorizzare nella cache. La regola generale è prememorizzare nella cache qualsiasi codice HTML, JavaScript o CSS che viene caricato inizialmente ed è fondamentale per che mostra la struttura di base di una determinata pagina.
È preferibile evitare di memorizzare nella cache i contenuti multimediali o altri asset caricati in un secondo momento. (a meno che non siano fondamentali per la funzionalità della tua app web). Utilizza invece un runtime strategia di memorizzazione nella cache per garantire che vengano le risorse vengono memorizzate nella cache a consumo.
Ricorda sempre che la pre-memorizzazione nella cache comporta l'uso della larghezza di banda della rete e dello spazio di archiviazione. sul dispositivo di un utente (proprio come avviene per l'installazione di un'app da uno store). Sta a te, in qualità di sviluppatore, prememorizzare nella cache ed evitare che si gonfi pre-memorizzazione nella cache.
Gli strumenti di creazione di Workbox aiutano indicandoti il numero di elementi nella preregistrazione del file manifest nonché la dimensione totale del payload di pre-cache.
I visitatori ricorrenti della tua applicazione web traggono vantaggio sul lungo periodo dal costo iniziale pre-memorizzazione nella cache, in quanto la possibilità che offre di evitare la rete paga rapidamente e a risparmiare la larghezza di banda nel tempo.