2
votes

Service Worker met à jour, mais l'ancien fichier est toujours mis en cache

Lorsque je mets à jour le service worker, je ferme et rouvre la page et j'obtiens le journal de la console indiquant que le nouveau service worker a été installé et activé et que l'ancien cache a été supprimé. Cependant, les fichiers répertoriés pour être ajoutés au cache ne sont pas récupérés du serveur à nouveau, ce sont des versions obsolètes d'il y a des heures. Il n'y a aucun moyen de le faire mettre à jour les fichiers sans effacer le stockage dans les outils de développement Chrome.

Comment puis-je faire en sorte que mon service worker remplisse son cache avec de nouveaux fichiers lorsqu'une nouvelle version est installée?

Par exemple, "stylesheet.css" est toujours une ancienne version lorsque le technicien de service met à jour:

let cacheName = "abc_web_v1_15";

self.addEventListener('install', (event) => {
    console.log('[Service Worker] Install');
    event.waitUntil(
        caches.open(cacheName).then(function (cache) {
            return cache.addAll([
                "/".
                "/stylesheet.css",
                ...
            ]);
        })
    );
});
self.addEventListener('fetch', (e) => {
    e.respondWith(
        caches.match(e.request).then(function (r) {
            console.log('[Service Worker] Fetching resource: ' + cacheName + ' ' + e.request.url);
            if (r) {
                console.log(cacheName + ' returning cached  ' + e.request);
                return r;
            } else {
                console.log(cacheName + ' returning fetched  ' + e.request);
                return fetch(e.request);
            }
        })
    )
});

self.addEventListener('activate', (e) => {
    console.log('[Service Worker] Activate');
    e.waitUntil(
        caches.keys().then((keyList) => {
            return Promise.all(keyList.map((key) => {
                if (cacheName.indexOf(key) === -1) {
                    console.log(`[Service Worker] Removing Cached Files from Cach-${key}`);
                    return caches.delete(key);
                }
            }));
        })
    );
});

javascript service-worker

2 commentaires

J'ai répondu à un problème similaire ici, j'espère que cela vous aidera: stackoverflow.com/a/64880568/7626299

3 Réponses :

0
votes

Je garde ce Service Worker autodestructeur à portée de main lorsque je dois vider tous les anciens caches Service Workers et Service Worker.

Je trouve que c'est un outil vraiment utile.

self.addEventListener('install', event => self.skipWaiting());

self.addEventListener('activate', event => {

  // Delete all Service Worker Caches
  caches.keys().then(cacheNames => {for (let name of cacheNames) {caches.delete(name);}});

  // Unregister all Service Workers
  self.registration.unregister()

    .then(() => self.clients.matchAll())

    .then((clients) => clients.forEach(client => client.navigate(client.url)))

});

Lectures complémentaires:

0 commentaires

2
votes

Le problème est très simple: lorsque votre Service Worker demande les "nouveaux" fichiers, cette requête de fetch passe par le cache HTTP normal du navigateur. Si la ressource y est trouvée, le navigateur la renvoie automatiquement et ne va pas au réseau.

Si vous regardez cet extrait de votre code:

return cache.addAll([
                "/".
                "/stylesheet.css",
                ...
            ]);

vous verrez que le nom de votre feuille de style est toujours le même quel que soit le contenu. En d'autres termes, lorsque votre feuille de style est mise à jour, le nom de fichier est toujours le même. Pour cette raison, le fichier est déjà dans le cache HTTP du navigateur et donc SW l'obtient lorsqu'il le demande.

Vous devez version vos fichiers. Habituellement, le hachage du contenu du fichier est utilisé. Avec la dénomination par hachage, vous vous retrouvez avec des noms tels que stylesheet.iudfirio132.css et ce nom change à chaque fois que le fichier change même un caractère. De cette façon, la nouvelle version de votre application utilise toujours des ressources avec des noms différents. Vous devez également disposer d'outils de construction tels que la mise en cache de Workbox pour mettre à jour la liste des ressources dans votre fichier Service Worker afin que vous n'ayez pas besoin de le faire manuellement. En savoir plus: https://developers.google.com/web/tools/workbox/modules/workbox-precaching

Pour saisir complètement le sujet ici, je vous recommande de lire ce billet de blog, "Meilleures pratiques de mise en cache et max-age gotchas" https://jakearchibald.com/2016/caching-best-practices/

0 commentaires

0
votes

J'ai répondu à un problème similaire ici: https://stackoverflow.com/a/64880568/7626299

Comme pate l'a mentionné, même si vous mettez à jour votre service worker avec un nouveau code, un nouveau nom de cache, appelant self.skipWaiting() , il met toujours en cache les anciennes ressources en cache!

En fait, vous pouvez réécrire votre gestionnaire d'événements d' installation et vous débarrasser de cache.addAll . Pour résoudre ce problème, vous devez récupérer chaque ressource en définissant l'option de cache pour reload afin que le navigateur utilise le réseau pour obtenir la ressource et non le cache.

const req = new Request(url, { cache: 'reload' });

Plus de détails ici .

0 commentaires