Gestion du cache avec l'API Cache

JavaScript possède dans ses Services Workers, l'API Cache afin de contrôler les ressources tel que les pages HTML, CSS, JS, JSON, images... pour les mettre en cache hors ligne et les récupérer ultérieurement si nécessaire.

L'API Cache est disponible que sur les navigateurs modernes dont vous pouvez retrouver la liste ici : https://developer.mozilla.org/fr/docs/Web/API/Cache#compatibilité_des_navigateurs

La bonne pratique veut que vous vérifiiez en amont si votre navigateur peut supporter ce système avant de l'utiliser. Pour cela, il faut vérifier si la propriété caches est disponible dans l'objet window et que celle-ci est implémentée dans le navigateur :

if ('caches' in window) {
    /* ... */
}

add()

Cette méthode permet d'ajouter un élément à votre cache. Pour cela, il suffit d'appeler le fichier que vous souhaitez stocker :

caches.open('writeCache').then(cache => {
    cache.add('products.json').then(() => {
        console.log('Cache added');
    });
});

Je donne un nom à mon cache, ici writeCache dans lequel j'ajoute le fichier products.json. Si le cache nommé writeCache n'existe pas, alors il sera créé, sinon, il sera mis à jour.

addAll()

La méthode addAll() sera bien plus pratique si vous avez besoin d'ajouter plusieurs ressources à votre cache en passant en paramètre un tableau.

let urlsToCache = [
    'index.html',
    'products.json',
    'image.png',
    'style.css'
];

caches.open('writeCache').then(cache => {
    cache.addAll(urlsToCache).then(() => {
        console.log('Cache added');
    });
});

put()

Alors, cette méthode est encore expérimentale et ne peut ne pas fonctionner pour le moment. Elle prend en paramètre deux valeurs :

• le premier argument correspond au fichier recevant les mises à jour ;
• le second argument, une Response des données à mettre à jour en cache.

caches.open('writeCache').then(cache => {
    cache.put('products.json', new Response('{"name": "iPhone"}')).then(() => {
        console.log('Cache added');
    });
});

put() écrasera toutes les paires de clés/valeurs précédemment stockées dans le cache correspondant à la requête.

match()

Elle permet de retrouver des données stockées en cache et de les ressortir au besoin.

caches.open('writeCache').then(cache => {
    cache.match('products.json').then(response => {
        if (response) {
            response.json().then(data => {
                console.log(data);
            });
        }
    });
});

La variable data contiendra le résultat du cache si celui-ci est disponible.

delete()

Il est deux méthodes delete() n'effaçant, évidemment, pas la même chose selon comment elle est employée.

Effacer un élément du cache

Pour effacer juste un élément mis en cache, il vous suffit d'utiliser de passer en paramètre, la ressource à vider :

caches.open('writeCache').then(cache => {
    cache.delete('products.json').then(() => {
        console.log('Cache deleted');
   });
});

Effacer tout le cache

caches.delete('writeCache').then(() => {
    console.log('Cache deleted');
});

Notes

Pour des raisons de sécurité, un cache est lié à l'origine actuelle et les autres origines ne peuvent pas accéder aux caches établi pour d'autres origines.