Aggiornamenti all'API Service Worker Cache

Jake Archibald
Jake Archibald
X Home page

Mi è stato chiesto di scrivere questo post su un aggiornamento abbastanza minore dell'API cache del servizio worker. Non pensavo che meritasse un articolo a parte, ma dopo un lungo dibattito che alla fine si è ridotto a una partita a sasso, carta, forbice, ho perso, quindi eccolo qui.

Vuoi scoprire gli aggiornamenti all'implementazione dell'API di cache dei worker di servizio di Chrome?

Non ti sento. Ti ho chiesto se vuoi sapere di più sugli aggiornamenti all'implementazione dell'API di cache dei worker di servizio di Chrome.

(puoi continuare a leggere solo se hai saltato sulla sedia e hai urlato "YEAHHH!". Simulare di dondolare un lazo è facoltativo, ma incoraggiato).

cache.addAll è stata introdotta in Chrome 46

Sì. Esatto. Cache! Aggiungi tutto con i puntini. Chrome 46.

Ok, a parte il sarcasmo, si tratta di un fatto piuttosto importante, dato che cache.addAll è l'ultima parte rimasta 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 un'operazione transazionale: se una delle operazioni di recupero o scrittura non va a buon fine, l'intera operazione non va a buon fine e la cache torna allo stato precedente. Questo è particolarmente utile per le operazioni di installazione come quelle sopra indicate, in cui un singolo errore deve essere un errore complessivo.

L'esempio riportato sopra si trova in un service worker, ma l'API Caches è completamente accessibile anche dalle pagine.

Firefox supporta già questa API nella versione per sviluppatori, quindi verrà rilasciata con il resto dell'implementazione dei worker di servizio.

Ma non è tutto, sono in programma altri miglioramenti della cache…

cache.matchAll sarà disponibile in Chrome 47

In questo modo puoi ottenere più corrispondenze:

caches.open('mysite-static-v1').then(function(cache) {
    return cache.matchAll('/');
}).then(function(responses) {
    // …
});

Il codice riportato sopra restituirà tutto ciò che corrisponde a / in mysite-static-v1. La cache ti consente di avere più voci per URL se sono memorizzabili in cache in modo indipendente, ad esempio se hanno intestazioni Vary diverse.

Firefox supporta già questa funzionalità nella versione per sviluppatori, quindi verrà implementata insieme al resto dei service worker.

Opzioni di query della cache disponibili a breve su Chrome

Ecco un gestore di recupero abbastanza standard:

self.addEventListener('fetch', function(event) {
    event.respondWith(
    caches.match(event.request).then(function(response) {
        return response || fetch(event.request);
    })
    );
});

Se abbiamo / in cache e riceviamo una richiesta per /, la pagina verrà pubblicata dalla cache. Tuttavia, se riceviamo una richiesta per /?utm_source=blahblahwhatever che non proviene 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à associato 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 vary nelle risposte memorizzate nella cache

Firefox supporta già questa funzionalità… ok, ormai sai come funziona. Vai a dire a Ben Kelly quanto è bravo per aver inserito tutto questo in Firefox.

Se vuoi seguire l'implementazione di Chrome delle opzioni di query della cache, visita la pagina crbug.com/426309.

A presto per un altro emozionante capitolo di "Che cosa abbiamo implementato nell'API cache".