web-dev-qa-db-fra.com

Mise à jour des nouveaux actifs par le personnel de service

J'ai lu l'article html5rocks Introduction to service worker et j'ai créé un travailleur de service de base qui met en cache la page, JS et CSS qui fonctionne comme prévu:

var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
  '/'
];

// Set the callback for the install step
self.addEventListener('install', function (event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function (event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }

        // IMPORTANT: Clone the request. A request is a stream and
        // can only be consumed once. Since we are consuming this
        // once by cache and once by the browser for fetch, we need
        // to clone the response
        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).then(
          function(response) {
            // Check if we received a valid response
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // IMPORTANT: Clone the response. A response is a stream
            // and because we want the browser to consume the response
            // as well as the cache consuming the response, we need
            // to clone it so we have 2 stream.
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );
});

Lorsque j'apporte une modification au CSS, cette modification n'est pas récupérée car le technicien de service renvoie correctement le CSS à partir du cache.

Où je suis coincé si je devais changer le HTML, JS ou CSS, comment pourrais-je m'assurer que le service-worker charge la version la plus récente à partir du serveur s'il le peut plutôt qu'à partir du cache? J'ai essayé d'utiliser des tampons de version sur l'importation CSS, mais cela ne semble pas fonctionner.

service-worker
35
Ben Thomas

Une option consiste simplement à utiliser le cache de l'agent de service comme solution de repli et à toujours essayer d'aller en premier par le résea via une fetch(). Cependant, vous perdez certains gains de performances qu'offre une stratégie de mise en cache en premier.

Une autre approche consisterait à utiliser sw-precache pour générer votre script de service worker dans le cadre du processus de construction de votre site.

L'agent de service qu'il génère utilisera un hachage du contenu du fichier pour détecter les modifications et mettra automatiquement à jour le cache lorsqu'une nouvelle version est déployée. Il utilisera également un paramètre de requête d'URL de contournement du cache pour vous assurer que vous ne remplissez pas accidentellement votre cache de service worker avec une version obsolète du cache HTTP.

Dans la pratique, vous vous retrouverez avec un technicien de service qui utilise une stratégie de mise en cache en priorité, mais le cache sera mis à jour "en arrière-plan" après le chargement de la page afin que la prochaine fois qu'il soit visité, tout soit frais. Si vous le souhaitez, c'est possible d'afficher un message à l'utilisateur pour lui faire savoir qu'il y a du contenu mis à jour et l'inviter à se recharger.

41
Jeff Posnick

Une façon d'invalider le cache serait de bump la version du CACHE_NAME chaque fois que vous modifiez quelque chose dans les fichiers mis en cache. Étant donné que ce changement changerait le service-worker.js le navigateur chargerait une version plus récente et vous auriez la possibilité de supprimer les anciens caches et d'en créer de nouveaux. Et vous pouvez supprimer l'ancien cache dans le gestionnaire activate. Il s'agit de la stratégie décrite dans échantillon de prélecture . Si vous utilisez déjà une sorte de tampon de version sur les fichiers CSS, assurez-vous qu'ils trouvent leur chemin dans le script de service worker.

Bien sûr, cela ne change pas le fait que les en-têtes de cache du fichier CSS doivent être définis correctement. Sinon, le technicien de service chargera simplement le fichier déjà mis en cache dans le cache du navigateur.

19
pirxpilot