Mises à jour de l'API Service Worker Cache

Jake Archibld
Jake Archibald

On m'a demandé de rédiger cet article sur une mise à jour assez mineure de l'API Service worker Cache. Je ne pensais pas que cela justifiait la rédaction de son propre article, mais après un long débat qui a fini par déboucher sur une partie de pierre-papier-ciseaux, j'ai perdu, et voilà.

Êtes-vous prêt à découvrir les modifications apportées à l'implémentation de l'API Service worker Cache dans Chrome ?

Je ne t'entends pas ! J'ai dit : Êtes-vous prêt à découvrir les modifications apportées à l'implémentation de l'API Service worker Cache dans Chrome ?

(Vous ne pouvez lire ce qui suit que si vous êtes monté sur votre chaise en criant "YEAHHH !". Simultanément, faire semblant de faire un lasso est facultatif, mais encouragé.

cache.addAll est disponible dans Chrome 46

Oui ! C'est exact ! Cache! Tout ajouter ! Chrome 46

D'accord, le sarcasme mis à part le sarcasme ! En réalité, cache.addAll est la dernière partie du polyfill des "essentiels" du cache, ce qui signifie qu'il n'est plus nécessaire.

Voici comment fonctionne 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 récupère un tableau d'URL et de requêtes, puis les ajoute au cache. Il s'agit d'une opération transactionnelle : si l'une des opérations de récupération ou d'écriture échoue, toute l'opération échoue et le cache revient à son état précédent. Cela est particulièrement utile pour les opérations d'installation telles que ci-dessus, où une seule défaillance devrait être un échec global.

L'exemple ci-dessus concerne un service worker, mais l'API des caches est entièrement accessible à partir des pages.

Firefox est déjà compatible avec cette API dans l'édition Developer. Elle sera donc disponible avec le reste de la mise en œuvre du service worker.

Mais attendez, ce n'est pas tout. Le pipeline continue d'améliorer le cache...

cache.matchAll sera bientôt disponible dans Chrome 47

Cela vous permet d'obtenir plusieurs correspondances:

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

La requête ci-dessus obtiendra tous les résultats de mysite-static-v1 qui correspondent à /. Le cache vous permet d'avoir plusieurs entrées par URL si elles peuvent être mises en cache indépendamment (par exemple, si elles ont des en-têtes Vary différents).

Firefox propose déjà cette fonctionnalité dans l'édition Developer. Elle sera donc disponible avec le reste de la mise en œuvre de service worker.

Options de requête relatives au cache bientôt disponibles dans Chrome

Voici un gestionnaire de récupération assez standard:

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

Si nous avons mis en cache / et que nous recevons une requête pour /, elle sera diffusée à partir du cache. Toutefois, si nous recevons une requête pour /?utm_source=blahblahwhatever qui ne provient pas du cache. Vous pouvez contourner ce problème en ignorant la chaîne de recherche d'URL lors de la mise en correspondance:

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

/?utm_source=blahblahwhatever sera désormais associé à la vidéo /. Les options complètes sont les suivantes:

  • ignoreSearch : ignore la partie recherche de l'URL dans l'argument de la requête et dans les requêtes mises en cache.
  • ignoreMethod : ignore la méthode de l'argument de requête, de sorte qu'une requête POST puisse correspondre à une entrée GET dans le cache.
  • ignoreVary - ignore l'en-tête "vari" dans les réponses mises en cache.

Firefox prend déjà en charge cela dans leur... OK, vous connaissez maintenant l'exercice. Dites à Ben Kelly à quel point il est formidable de pouvoir faire tout cela dans Firefox.

Si vous souhaitez suivre l'implémentation Chrome des options de requête du cache, consultez crbug.com/426309.

Rendez-vous la prochaine fois pour découvrir un autre chapitre passionnant de "ce que nous avons implémenté dans l'API Cache".