Comment vider le cache du travailleur de service?
donc, j'ai une page HTML avec service worker, l'employé de service cache l'index.html et mes fichiers JS.
le problème est que lorsque je change le JS, le changement n'apparaît pas directement sur le navigateur client. Bien sûr, dans chrome dev-tools, je peux désactiver le cache. Mais dans chrome mobile, comment dois-je faire?
j'ai essayé d'accéder aux paramètres du site et j'ai appuyé sur le bouton Clear % RESET. Mais il charge toujours la vieille page / charge 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 (juste le cache) et cela fonctionne.
je suppose que ce n'est pas la façon dont il devrait fonctionner correctement? mon utilisateur ne saura pas si la page est mise à jour sans vider la mémoire cache du navigateur chrome.
3 réponses
Utilisez ceci 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);
})
);
})
);
});
Si vous connaissez le nom du cache, vous pouvez simplement appeler caches.delete() à partir de n'importe où vous le souhaitez dans le travailleur:
caches.delete(/*name*/);
et si vous vouliez effacer toutes les caches (et ne pas les attendre, dites que c'est une tâche de fond) , vous n'avez qu'à ajouter:
caches.keys().then(function(names) {
for (let name of names)
caches.delete(name);
});
généralement vous mettez à jour le CACHE_NAME à votre service des travailleurs fichier JS de sorte que votre travailleur installe de nouveau:
self.addEventListener('install', evt => {
evt.waitUntil(
caches.open(CACHE_NAME).then(cache =>
cache.addAll(inputs))
)
})
alternativement, à clear le cache pour un PWA:
self.caches.keys().then(keys => { keys.forEach(key => console.log(key)) })
pour lister les noms des clés du cache, puis exécuter:
self.caches.delete('my-site-cache')
pour supprimer une clé de cache par son nom (i.e., my-site-cache). Puis rafraîchissez la page.
si vous voyez des erreurs liées au worker dans la console après la mise à jour, vous pourriez aussi avoir besoin de désinscrire travailleurs enregistrés:
navigator.serviceWorker.getRegistrations()
.then(registrations => {
registrations.forEach(registration => {
registration.unregister()
})
})
Je ne suis pas convaincu que tout cela va se faire au spec.