Comment vider le cache d'un prestataire de services ?

Question

Donc, j'ai une page HTML avec un travailleur de service, le travailleur de service cache l'index.html et mes fichiers JS.

Le problème est que lorsque je modifie le JS, le changement ne s'affiche pas directement sur le navigateur du client. Bien sûr, dans chrome dev-tools, je peux désactiver le cache. Mais dans chrome mobile, comment faire ?

J'ai essayé d'accéder aux paramètres du site et d'appuyer sur le bouton CLEAR % RESET. Mais il charge toujours l'ancienne page/chargement à partir du cache. J'ai essayé d'utiliser un autre navigateur ou Chrome incognito et il charge la nouvelle page.

Ensuite, j'essaie d'effacer mes données de navigation (seulement le cache) et cela fonctionne.

Je suppose que ce n'est pas comme ça que ça devrait fonctionner, n'est-ce pas ? Mon utilisateur ne saura pas si la page est mise à jour sans vider le cache du navigateur Chrome.

Answer 1

Si vous connaissez le nom du cache, vous pouvez simplement appeler caches.delete() de n'importe où dans le travailleur :

caches.delete(/*name*/);

Et si vous voulez effacer tous les caches (et ne pas les attendre, car il s'agit d'une tâche d'arrière-plan), il vous suffit de ajouter ceci :

caches.keys().then(function(names) {
    for (let name of names)
        caches.delete(name);
});

Answer 2

Utilisez cette fonction pour supprimer les caches périmés :

self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.filter(function(cacheName) {
          // Return true if you want to remove this cache,
          // but remember that caches are shared across
          // the whole origin
        }).map(function(cacheName) {
          return caches.delete(cacheName);
        })
      );
    })
  );
});

Answer 3

En général, vous mettez à jour le CACHE_NAME dans le fichier JS de vos travailleurs de service pour que votre travailleur s'installe à nouveau :

self.addEventListener('install', evt => {
  evt.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(inputs))
  )
})

Ou bien, pour clair le cache pour une PWA trouver le nom du cache :

self.caches.keys().then(keys => { keys.forEach(key => console.log(key)) })

puis exécutez ce qui suit pour le supprimer :

self.caches.delete('my-site-cache')

Ensuite, rafraîchissez la page.

Si vous voyez des erreurs liées aux travailleurs dans la console après le rafraîchissement, vous pouvez également avoir besoin de désenregistrer les travailleurs enregistrés :

navigator.serviceWorker.getRegistrations()
  .then(registrations => {
    registrations.forEach(registration => {
      registration.unregister()
    }) 
  })

Answer 4

La solution la plus élégante, avec async/await :

const cacheName = 'v2';

self.addEventListener('activate', event => {
// Remove old caches
  event.waitUntil(
    (async () => {
      const keys = await caches.keys();
      return keys.map(async (cache) => {
        if(cache !== cacheName) {
          console.log('Service Worker: Removing old cache: '+cache);
          return await caches.delete(cache);
        }
      })
    })()
  )
})

Answer 5

C'est le seul code qui a fonctionné pour moi. Il s'agit de mon adaptation de Documentation Mozilla :

//Delete all caches and keep only one
const cachNameToKeep = 'myCache';

//Deletion should only occur at the activate event
self.addEventListener('activate', event => {
    var cacheKeeplist = [cacheName];
    event.waitUntil(
        caches.keys().then( keyList => {
            return Promise.all(keyList.map( key => {
                if (cacheKeeplist.indexOf(key) === -1) {
                    return caches.delete(key);
                }
            }));
        })
.then(self.clients.claim())); //this line is important in some contexts
});