Tengo un pwa que está diseñado para usarse en áreas con poca conectividad. Cuando guardo en caché menos de 100 páginas/activos, el SW se registra y las páginas se almacenan en caché y todo funciona.
Cuando excedo las 100 páginas/activos, el SW no se registra. (Cerrar en 2000 páginas)
El tamaño total de los archivos que estoy tratando de almacenar en caché es de 20 mb, por lo que no es un problema de espacio en disco.
Ninguna de la literatura que encuentro indica que existe un límite de activos como tal.
¿Hay un límite de páginas?
Aquí está mi código de trabajo:
const app_version = '2'; const staticCacheName = 'site-static-v2'; const dynamicCacheName = 'site-dynamic-v1'; const assets = [ '/', '/index.html', '/library.html', '/view_offline.html', '/player.html', '/json.js', '/content.js', '/js/app.js', '/js/ui.js', '/js/materialize.min.js', '/css/styles.css', '/css/h5p.css', '/css/materialize.min.css', '/img/dish.png', 'https://fonts.googleapis.com/icon?family=Material+Icons', 'https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2', '/pages/fallback.html', //HERE IS WHERE I WANT TO ADD THE OTHER 1990 odd pages in the same method ]; // install event self.addEventListener('install', evt => { console.log('service worker installed'); evt.waitUntil( caches.open(staticCacheName).then((cache) => { console.log('caching shell assets'); cache.addAll(assets); }) ); });
Brindar una experiencia sin conexión no equivale necesariamente a asegurarse de que todo el sitio web o la aplicación estén disponibles sin conexión. No. En su lugar, debemos esforzarnos por preservar las interacciones más comunes y la funcionalidad central (Application Shell). Si el usuario realiza una solicitud fuera del contenido de nuestro caché existente (mientras está fuera de línea), muestra un mensaje apropiado.
Pero, si insiste en tener contenido de más de 2k páginas disponibles sin conexión, entonces debería considerar crear una página agregada que se actualice previamente (en el lado del servidor) con información de un alcance predeterminado de páginas. Con este método, solo necesitará almacenar en caché una sola página en lugar de miles.
Alternativamente, puede almacenar el contenido de texto de muchas páginas en una base de datos fuera de línea como IndexedDB . Vea un tutorial de Google aquí: https://www.youtube.com/watch?v=VNFDoawcmNc
Tener un caché de tamaño ridículo también puede sufrir pérdidas de rendimiento en dispositivos más lentos. Se recomienda utilizar la carga diferida para mantener la aplicación de carga rápida. Recuerde, no necesitamos cargar todo el sitio la primera vez que un usuario visita su página de inicio.
Información Adicional
El límite de almacenamiento para PWA: https://stackoverflow.com/questions/58591353/how-much-can-a-pwa-store#:~:text=The%20global%20limit%20is%20calculated,a%20maximum%20of %202%20GB .
Mejores prácticas para mejorar el rendimiento del lado del cliente de su PWA: https://dev.mobify.com/v1.x/how-to-guides/categories/performance/client-side-performance