Actualmente estoy usando el módulo de compilación de la caja de trabajo, específicamente el modo de generar SW, para generar mis scripts de trabajadores de servicio para implementar mi aplicación web en Netlify. Mi sitio es un sitio estático.
Aquí está mi trabajador-config.js:
module.exports = { globDirectory: '_site/', globPatterns: [ '**/*.{html,iml,css,xml,eot,svg,ttf,woff,woff2,jpg,webp,png,ico,xcf,js,json,txt}' ], swDest: 'sw.js', ignoreURLParametersMatching: [ /^utm_/, /^fbclid$/ ], offlineGoogleAnalytics: true, mode: 'production', navigateFallback: '/index.html' };Esta configuración funciona bien para uso en línea. Sin embargo, las solicitudes de terceros a ciertos activos (es decir, imágenes, Javascript, etc.) no se almacenan previamente en caché para su uso sin conexión. Netlify implementa activos que pasan por su proceso de optimización y minificación en su CDN de CloudFront. No tengo otra opción viable que usar el proceso de optimización y minificación de Netlify para Javascript, HTML y activos de imagen. Desafortunadamente, estos activos de CDN no están precaché. En consecuencia, un usuario que use mi aplicación web sin acceso a la red no encontrará estos activos de CDN precaché y no se cargarán en el caché como los otros activos que no son de CDN.
¿Qué debo hacer para asegurarme de que los activos de CDN de terceros se almacenen correctamente en la memoria caché al usar el módulo de compilación de la caja de trabajo? Definitivamente quiero simplificar las cosas y espero que la solución sea hacer cambios simples en el archivo work-config.js.
Dado que no conoce las URL de antemano, en el momento de la compilación, su única opción es emplear el almacenamiento en caché en tiempo de ejecución para hacer coincidir las solicitudes de las URL y aplicar una estrategia de almacenamiento en caché específica para generar respuestas.
Hay algunas trampas/mejores prácticas sobre las que puede leer en "Almacenamiento en caché más inteligente en tiempo de ejecución de activos hash ", pero el resumen es que deberá emplear algún tipo de política de caducidad para su almacenamiento en caché en tiempo de ejecución para evitar que se llenen sus cachés. indefinidamente cuando se agregan nuevas URL.
Así es como puede configurar generateSW para agregar runtimeCaching , utilizando el método ExpirationPlugin más básico para controlar los tamaños de caché:
module.exports = { // ...other options... runtimeCaching: [{ urlPattern: ({url}) => url.origin === 'https://d33wubrfki0l68.cloudfront.net', handler: 'CacheFirst', options: { cacheName: 'cdn-assets', expiration: { // Adjust the number of entries to keep as needed. maxEntries: 50, }, } }], clientsClaim: true, }; Debe tener en cuenta que con el almacenamiento en caché en tiempo de ejecución, los activos no comenzarán a agregarse al caché hasta la visita posterior, después de la hora inicial en que se registra un trabajador del servicio, ya que la mayoría de ellos ya se habrán cargado cuando el trabajador del servicio tarde control. El uso de clientsClaim: true hará que un trabajador de servicio que se registre por primera vez tome el control de la página que lo registró de inmediato, lo que aumenta las posibilidades de que algunos activos cargados en tiempo de ejecución se almacenen en caché, pero en términos generales, es solo la siguiente navegación que terminará llenando el caché.