workbox-webpack-plugin no caching chunk en React PWA

Actualmente estoy creando un PWA con la caja de trabajo-webpack-plugin que estaba funcionando bien hasta que añadí algunos módulos como Sentry o reaccion-data-grid. Cuando estos dos módulos están instalados, el cache solo contiene 15Mb en lugar de 22Mb, lo que resulta en una página en blanco cuando intento volver a cargar la página sin conexión. El archivo que no está grabado es '/static/js/****.chunk.js'.

Aquí está mi archivo config-override.js :

const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
module.exports = function override(config, env) {
    config.plugins = config.plugins.map(plugin => {
        if (plugin.constructor.name === 'GenerateSW') {
            return new WorkboxWebpackPlugin.InjectManifest({
                swSrc: './src/custom-service-worker.js',
                swDest: 'service-worker.js'
            })
        }
        return plugin
    })
    return config;
}

Y aquí está mi trabajadora personalizada.js :

/* eslint-disable */
import { precacheAndRoute } from 'workbox-precaching';
...

precacheAndRoute(self.__WB_MANIFEST);

...

self.addEventListener('install', e => {
    const preCache = async () => {
        caches.open(STATIC_CACHE_NAME).then(cache => {
            cache.addAll(STATIC_CONTENT);
        });
        self.skipWaiting();
    }
    e.waitUntil(preCache());
});

self.addEventListener('activate', e => {
    const deleteOldCaches = async () => {
        caches.keys().then(keys => {
            return Promise.all(keys
                .filter(key => key !== STATIC_CACHE_NAME && key !== DYNAMIC_CACHE_NAME && !key.includes("workbox-precache")) // Si la cache ne correspond pas aux nom des caches actuelles
                .map(key => caches.delete(key))
            );
        });
        self.clients.claim();
    }
    e.waitUntil(deleteOldCaches());
});

Si tienes alguna idea de cómo podría arreglar ese problema, ¡realmente apreciaría tu ayuda!

Pregunta hecha hace 3 años, 4 meses, 29 días - Por binarybuilder

2 Respuestas:

  • El problema que estás experimentando puede estar relacionado con el tamaño de la caché gestionada por Workbox y cómo se están incluyendo y gestionando los archivos en el proceso de precarga y en la configuración del servicio trabajador personalizado.

    Una posible solución sería revisar los archivos que no se están guardando en la caché correctamente y asegurarse de que se están incluyendo adecuadamente en la precarga y en la configuración del servicio trabajador personalizado.

    Te recomendaría hacer lo siguiente:

    • Verifica que los archivos que no se están guardando en la caché estén siendo precargados correctamente en tu servicio trabajador personalizado. Asegúrate de incluir adecuadamente estos archivos en la función "precacheAndRoute" en tu servicio trabajador personalizado.
    • Revisa la configuración de Workbox en tu archivo config-override.js para asegurarte de que estás configurando correctamente el plugin WorkboxWebpackPlugin.InjectManifest. Asegúrate de que estés apuntando al archivo correcto de tu servicio trabajador personalizado.
    • Verifica la configuración de las rutas en tu service-worker.js para asegurarte de que los archivos se estén almacenando correctamente en la caché y que se estén recuperando correctamente cuando la aplicación se utiliza en modo offline.

    Además, te recomendaría revisar la documentación de Workbox y las guías de referencia para asegurarte de que estás utilizando la librería de manera adecuada y tener en cuenta posibles problemas de compatibilidad entre los módulos agregados a tu proyecto.

    Espero que esta información te sea útil para resolver el problema que estás experimentando. Si necesitas más ayuda, no dudes en preguntar.

    Respondida el Dec 17, 2020 a las 09:43 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El problema que describes es muy probablemente causado por un problema con la configuración del complemento workbox-webpack-plugin. Para solucionar este problema, debes asegurarte de que el complemento está configurado correctamente para almacenar en caché todos los archivos necesarios para tu aplicación.

    Aquí tienes algunos pasos que puedes seguir para depurar y solucionar el problema:

    • Verifica tu configuración de workbox-webpack-plugin:
      <ul><li>Asegúrate de que la opción `globDirectory` en la configuración del complemento esté establecida en el directorio raíz de tu proyecto de React.</li></ul>      <ul><li>Verifica que la opción `globPatterns` incluya todos los archivos necesarios para tu aplicación, incluidos los archivos JavaScript, CSS y otros archivos estáticos.</li></ul>
    • Examina los archivos de registro:
      <ul><li>Habilita el registro en el complemento `workbox-webpack-plugin` configurando la opción `logging.level` en `debug`.</li></ul>      <ul><li>Busca en los archivos de registro cualquier error o advertencia que pueda indicar por qué no se están almacenando en caché los archivos necesarios.</li></ul>
    • Verifica tu servicio personalizado:
      <ul><li>Asegúrate de que tu servicio personalizado esté registrado correctamente en el archivo `serviceWorker.js`.</li></ul>      <ul><li>Verifica que el servicio personalizado esté llamando correctamente a las funciones `precacheAndRoute` y `routes`.</li></ul>
    • Intenta depurar el servicio personalizado:
      <ul><li>Agrega declaraciones de registro al servicio personalizado para registrar los archivos que se están almacenando en caché.</li></ul>      <ul><li>Utiliza herramientas de depuración como `console.log()` o `debugger` para inspeccionar el comportamiento del servicio personalizado.</li></ul>
    • Verifica los encabezados de respuesta:
      <ul><li>Asegúrate de que los encabezados de respuesta de tus archivos estáticos estén configurados para permitir el almacenamiento en caché. Los encabezados deben incluir `Cache-Control: max-age=31536000`.</li></ul>

    Si sigues estos pasos, deberías poder identificar y solucionar el problema que impide que se almacenen en caché los archivos necesarios en tu PWA.

    Respondida el Dec 17, 2020 a las 09:48 - por Gemini

    Votos positivos: 0 | Votos negativos: 0