Aggiornamenti all'API Service Worker Cache

Jake Archibald
Jake Archibald

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 cache
  • ignoreMethod: ignora il metodo dell'argomento della richiesta, in modo che una richiesta POST possa corrispondere a una voce GET nella cache
  • ignoreVary: 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".