service worker - example - Servicio de actualización de la fuerza de trabajo de nuevos activos.

service worker offline

Question

He estado leyendo a través del artículo de html5rocks Introduction to service worker y he creado un trabajador de servicio básico que almacena en caché la página, JS y CSS, que funciona como se esperaba:

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

Cuando realizo un cambio en el CSS, este cambio no se está detectando ya que el trabajador del servicio está devolviendo correctamente el CSS del caché.

Donde estoy atascado es si tuviera que cambiar el HTML, JS o CSS, ¿cómo me aseguraría de que el trabajador del servicio cargue la versión más nueva del servidor si puede en lugar de hacerlo desde la caché? He intentado usar sellos de versión en la importación de CSS pero eso no parece funcionar.

Answer 1

Una forma de invalidar el caché sería CACHE_NAME la versión de CACHE_NAME cada vez que cambie algo en los archivos almacenados en caché. Dado que ese cambio cambiaría, el navegador service-worker.js cargaría una versión más nueva y tendría la oportunidad de eliminar los cachés antiguos y crear nuevos. Y puede eliminar el caché antiguo en el controlador de activate . Esta es la estrategia descrita en la muestra de captación previa . Si ya está utilizando algún tipo de sellos de versión en los archivos CSS, asegúrese de que encuentren su camino en el script del trabajador de servicio.

Eso, por supuesto, no cambia el hecho de que los encabezados de caché en el archivo CSS deben configurarse correctamente. De lo contrario, el trabajador del servicio solo cargará el archivo que ya está en caché en el caché del navegador.

Answer 2

Una opción es usar la memoria caché del trabajador del servicio como un recurso alternativo, y siempre intentar ir a la network-first través de fetch() . Sin embargo, se pierden algunas mejoras de rendimiento que ofrece una estrategia de caché primero.

Un enfoque alternativo sería usar sw-precache para generar su script de trabajador de servicio como parte del proceso de construcción de su sitio.

El trabajador de servicio que genera utilizará un hash del contenido del archivo para detectar cambios y actualizará automáticamente la memoria caché cuando se implemente una nueva versión. También utilizará un parámetro de consulta de URL que destruye la memoria caché para asegurarse de que no se rellene accidentalmente la memoria caché del trabajador de servicios con una versión desactualizada de la memoria caché HTTP.

En la práctica, terminará con un trabajador de servicios que utiliza una estrategia de caché que es amigable con el rendimiento, pero la caché se actualizará "en segundo plano" después de que la página se cargue para que la próxima vez que la visite, todo esté fresco. Si lo desea, es posible mostrar un mensaje al usuario para informarle que hay contenido actualizado disponible y pedirle que se vuelva a cargar.