web-dev-qa-db-fra.com

Comment effacer le cache du service worker?

Donc, j'ai une page HTML avec service worker, le service worker cache les fichiers index.html et JS.

Le problème est que lorsque je change de JS, le changement n'apparaît 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 puis-je le 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/charge depuis le 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 (cache uniquement) et cela fonctionne.

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

javascripthtmlgoogle-chromeservice-worker
32
taek

Utilisez ceci pour supprimer les caches obsolètes:

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);
        })
      );
    })
  );
});
18
elf

Si vous connaissez le nom de la mémoire cache, vous pouvez simplement appeler caches.delete() de n’importe où dans le gestionnaire:

caches.delete(/*name*/);

Et si vous voulez effacer tous les caches (et ne pas les attendre, dites que c'est une tâche en arrière-plan), il vous suffit de ajoutez ceci :

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

En règle générale, vous mettez à jour le CACHE_NAME dans le fichier JS de votre personnel de service afin que votre travailleur l’installe à nouveau:

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

Alternativement, pour effacer le cache pour un PWA:

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

pour lister les noms des clés de cache, puis lancez:

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

supprimer une clé de cache par son nom (c'est-à-dire, my-site-cache). Puis actualisez la page.

Si vous voyez des erreurs liées au travailleur dans la console après l'actualisation, vous devrez peut-être également désenregistrer les travailleurs enregistrés:

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

C'est le seul code qui a fonctionné pour moi. C’est 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
});
1
Shadi Namrouti