Обновление служебных сил новыми активами

Я читал статью html5rocks Introduction to service worker и создал базового сотрудника службы, который кэширует страницу, JS и CSS, которая работает так, как ожидалось:

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

Когда я вношу изменения в CSS, это изменение не подбирается, так как рабочий-сервис правильно возвращает CSS из кэша.

Где я застрял, если бы я изменил HTML, JS или CSS, как бы я удостоверился, что сервис-работник загружает более новую версию с сервера, если это возможно, а не из кеша? Я пробовал использовать штампы версий для импорта CSS, но это, похоже, не работает.

Ответы

Ответ 1

Один из вариантов заключается в том, чтобы использовать кеш сервис-работника в качестве резервной копии и всегда пытаться выполнить в сети в первую очередь через fetch(). Однако вы теряете прирост производительности, который предлагает стратегия, ориентированная на кеш.

Альтернативным подходом было бы использовать sw-precache для создания рабочего-сервиса script как часть процесса сборки сайта.

Служащий службы, который он создает, будет использовать хэш содержимого файла для обнаружения изменений и автоматически обновлять кеш при развертывании новой версии. Он также будет использовать параметр запроса URL-адреса для кэширования, чтобы убедиться, что вы случайно не заполнили кеш сервис-работника устаревшей версией из кеша HTTP.

На практике вы получите работника службы, который использует стратегию кэширования, ориентированную на производительность, но кеш будет обновляться "в фоновом режиме" после загрузки страницы, чтобы в следующий раз, когда он посетил, все является свежим. Если вы хотите, можно показать сообщение пользователю, сообщив им, что имеется обновленный контент и запрос на перезагрузку.

Ответ 2

Один из способов недействительности кеша - обнулить версию CACHE_NAME всякий раз, когда вы меняете что-либо в кэшированных файлах. Поскольку это изменение изменится, браузер service-worker.js загрузит более новую версию, и у вас будет возможность удалить старые кеши и создать новые. И вы можете удалить старый кеш в обработчике activate. Это стратегия, описанная в примере предварительной выборки. Если вы уже используете какие-либо штампы версий в файлах CSS, убедитесь, что они нашли свой путь в обслуживающий рабочий script.

Это, конечно, не изменяет тот факт, что заголовки кеша в файле CSS должны быть установлены правильно. В противном случае сервисный работник просто загрузит файл, который уже кэшируется в кеше браузера.