La caché de Workbox no se sirve sin conexión.

01 Aug, 2023 Programación 0

Estoy intentando precargar todos los bloques para que si hay una nueva compilación, el usuario pueda obtener los bloques antiguos (hasta que actualice la página).

Entonces, configuré el GenerateSW() en la configuración de webpack (sin configuración).

new WorkboxPlugin.GenerateSW()

También intenté con esta configuración:

new WorkboxPlugin.GenerateSW({
      skipWaiting: true,
      swDest: 'sw.js',
      runtimeCaching: [
        {
          urlPattern: /^http:\/\/localhost:3000\/static\/.*$/,
          handler: 'NetworkFirst'
        }
      ]
    })

Y registré el service worker de esta manera:

  if ("serviceWorker" in navigator){
    window.addEventListener("load", () => {
      navigator.serviceWorker.register("/sw.js");
    })

Puedo ver que el service worker realmente está funcionando y almacenando en caché todos los bloques, pero cuando React está cargando de forma diferida uno de ellos, obtengo un error del servidor (intenté simplemente apagarlo), en lugar de obtener el bloque almacenado en caché.

¿Qué estoy haciendo mal? Gracias.

davy.ai

August 1, 2023 at 12:35 pm

Parece que estás experimentando un problema con la carga perezosa de React y el almacenamiento en caché del service worker. Una posible solución podría ser utilizar el método importScripts() en tu archivo de service worker para asegurarte de que se sirva la versión correcta del fragmento cargado de forma perezosa desde la caché.

Puedes modificar tu archivo de service worker para incluir el siguiente fragmento de código:

self.addEventListener('fetch', (event) => {
  const requestURL = new URL(event.request.url);

  // Manejar solamente las solicitudes fetch para los fragmentos cargados de forma perezosa
  if (requestURL.origin === location.origin && requestURL.pathname.endsWith('.chunk.js')) {
    event.respondWith(
      caches.match(event.request).then(cachedResponse => {
        // Si el fragmento ya está en la caché, devolverlo
        if (cachedResponse) {
          return cachedResponse;
        }

        // De lo contrario, buscar el fragmento y agregarlo a la caché
        return fetch(event.request).then(networkResponse => {
          caches.open('lazy-loaded-chunks').then(cache => {
            cache.put(event.request, networkResponse.clone());
          });

          return networkResponse;
        }).catch(error => {
          // Devolver una respuesta de reemplazo si el fragmento no está disponible
          const fallbackResponse = new Response('Respuesta de reemplazo');
          return fallbackResponse;
        });
      })
    );
  }
});

Este código interceptará las solicitudes fetch de los fragmentos cargados de forma perezosa y comprobará si el fragmento solicitado ya está en la caché. Si lo está, se devolverá el fragmento desde la caché. De lo contrario, se buscará el fragmento en el servidor y se agregará a la caché para su uso futuro.

También puedes ajustar la configuración de almacenamiento en caché para utilizar una estrategia de almacenamiento en caché que se adapte a tus necesidades. Por ejemplo, puedes utilizar una estrategia de caché en primer lugar para siempre servir los fragmentos en caché, o una estrategia de red en primer lugar para buscar la versión más reciente del fragmento en el servidor si está disponible.

No olvides cancelar el registro del service worker al probar tus cambios, para asegurarte de que la nueva versión del service worker se instale correctamente.

¡Espero que esto te ayude!

Answer

davy.ai

August 1, 2023 at 12:35 pm
Parece que estás experimentando un problema con la carga perezosa de React y el almacenamiento en caché del service worker. Una posible solución podría ser utilizar el método importScripts() en tu archivo de service worker para asegurarte de que se sirva la versión correcta del fragmento cargado de forma perezosa desde la caché.

Puedes modificar tu archivo de service worker para incluir el siguiente fragmento de código:
```
self.addEventListener('fetch', (event) => {
  const requestURL = new URL(event.request.url);

  // Manejar solamente las solicitudes fetch para los fragmentos cargados de forma perezosa
  if (requestURL.origin === location.origin && requestURL.pathname.endsWith('.chunk.js')) {
    event.respondWith(
      caches.match(event.request).then(cachedResponse => {
        // Si el fragmento ya está en la caché, devolverlo
        if (cachedResponse) {
          return cachedResponse;
        }

        // De lo contrario, buscar el fragmento y agregarlo a la caché
        return fetch(event.request).then(networkResponse => {
          caches.open('lazy-loaded-chunks').then(cache => {
            cache.put(event.request, networkResponse.clone());
          });

          return networkResponse;
        }).catch(error => {
          // Devolver una respuesta de reemplazo si el fragmento no está disponible
          const fallbackResponse = new Response('Respuesta de reemplazo');
          return fallbackResponse;
        });
      })
    );
  }
});
```
Este código interceptará las solicitudes fetch de los fragmentos cargados de forma perezosa y comprobará si el fragmento solicitado ya está en la caché. Si lo está, se devolverá el fragmento desde la caché. De lo contrario, se buscará el fragmento en el servidor y se agregará a la caché para su uso futuro.

También puedes ajustar la configuración de almacenamiento en caché para utilizar una estrategia de almacenamiento en caché que se adapte a tus necesidades. Por ejemplo, puedes utilizar una estrategia de caché en primer lugar para siempre servir los fragmentos en caché, o una estrategia de red en primer lugar para buscar la versión más reciente del fragmento en el servidor si está disponible.

No olvides cancelar el registro del service worker al probar tus cambios, para asegurarte de que la nueva versión del service worker se instale correctamente.

¡Espero que esto te ayude!

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

La caché de Workbox no se sirve sin conexión.

Answer

davy.ai