Mi è stato chiesto di scrivere questo post su un aggiornamento abbastanza minore dell'API cache del service worker. Non pensavo che meritasse un articolo a parte, ma dopo un lungo dibattito che alla fine si è trattato di un gioco di sassi, forbici, carta, ho perso, eccolo.
Vuoi conoscere gli aggiornamenti all'implementazione di Chrome dell'API cache del service worker?
Non riesco a sentirti. Come ho già detto, vorresti saperne di più sugli aggiornamenti all'implementazione di Chrome dell'API Service worker Cache?
(puoi continuare a leggere solo se sei saltato sulla sedia e hai gridato "EAHHH!". Fingere contemporaneamente di oscillare un lazo è opzionale, ma incoraggiato).
cache.addAll arrivato in Chrome 46
Sì. Esatto! Cache! Aggiungi tutti. Chrome 46
Ok, a parte il sarcasmo, è una questione piuttosto importante, dato che cache.addAll
è l'ultima parte rimanente del polyfill "essenziali" della cache, il che significa che non è più necessario.
Ecco come funziona cache.addAll
:
// when the browser sees this SW for the first time
self.addEventListener('install', function(event) {
// wait until the following promise resolves
event.waitUntil(
// open/create a cache named 'mysite-static-v1'
caches.open('mysite-static-v1').then(function(cache) {
// fetch and add this stuff to it
return cache.addAll([
'/',
'/css/styles.css',
'/js/script.js',
'/imgs/cat-falls-over.gif'
]);
})
);
});
addAll
prende un array di URL e richieste, li recupera e li aggiunge alla cache. Si tratta di transazioni: se una qualsiasi delle operazioni di recupero o scrittura non va a buon fine, l'intera operazione non va a buon fine e la cache viene restituita allo stato precedente. Ciò è particolarmente utile per le operazioni di installazione come sopra, in cui un singolo errore dovrebbe essere un errore generale.
L'esempio precedente è all'interno di un service worker, ma l'API Caches è completamente accessibile anche dalle pagine.
Firefox supporta già questa API nella sua versione per sviluppatori, quindi arriverà alle altre implementazioni del service worker.
Ma non è tutto, sono in corso altri miglioramenti della cache...
cache.matchAll in arrivo su Chrome 47
In questo modo puoi ottenere più corrispondenze:
caches.open('mysite-static-v1').then(function(cache) {
return cache.matchAll('/');
}).then(function(responses) {
// …
});
Sopra verranno visualizzati tutti gli elementi in mysite-static-v1
che corrispondono a /
. La cache consente di avere più voci per URL se possono essere memorizzate nella cache in modo indipendente, ad esempio se hanno intestazioni Vary
diverse.
Firefox supporta già questa funzionalità nella sua versione per sviluppatori, quindi arriverà al resto dell'implementazione del service worker.
Opzioni per le query cache disponibili a breve su Chrome...
Di seguito è riportato un gestore di recupero piuttosto standard:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
Se abbiamo /
memorizzato nella cache e riceviamo una richiesta per /
, l'elemento verrà pubblicato dalla cache. Tuttavia, se riceviamo una richiesta per /?utm_source=blahblahwhatever
che non proverrà dalla cache. Puoi aggirare il problema ignorando la stringa di ricerca dell'URL durante la corrispondenza:
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request, {
ignoreSearch: true
}).then(function(response) {
return response || fetch(event.request);
})
);
});
Ora /?utm_source=blahblahwhatever
verrà abbinato alla voce per /
. Le opzioni complete sono:
ignoreSearch
: ignora la parte di ricerca dell'URL sia nell'argomento della richiesta sia nelle richieste memorizzate nella cacheignoreMethod
: ignora il metodo dell'argomento della richiesta, in modo che una richiesta POST possa corrispondere a una voce GET nella cacheignoreVary
: ignora l'intestazione "Varie" nelle risposte memorizzate nella cache
Firefox già supporta questa funzionalità nel loro... ok, ormai conosci il trapano. Di' a Ben Kelly quanto è bravo a inserire tutto questo in Firefox.
Se vuoi seguire l'implementazione delle opzioni di query della cache in Chrome, visita la pagina crbug.com/426309.
Vi aspettiamo la prossima volta per un altro entusiasmante capitolo di "cosa abbiamo implementato nell'API cache".