si uso,
registerRoute( new RegExp('.*'), new CacheFirst({ cacheName: 'all', }) );funcionará y almacenará en caché todas las páginas con todos los activos. Entonces, si actualizo la página en modo sin conexión, funciona.
¡Pero aparentemente no es una buena idea almacenar en caché TODO! Así que quiero almacenar en caché js|css|eot|ttf|otf|woff|woff2 y, por supuesto, también el html .
Entonces si uso
registerRoute( new RegExp('(\.(js|css|eot|ttf|otf|woff|woff2)$)'), // <<== how to add html type here to be cached? new CacheFirst({ cacheName: 'all', }) );y actualice la página mientras está en modo sin conexión, no puede ver la página porque no se ha almacenado en caché.
Estoy usando Vuejs , Mix , Workbox .
Hay varias opciones diferentes para configurar el almacenamiento en caché y el enrutamiento en tiempo de ejecución ; también puedes crear múltiples rutas con diferentes estrategias para cada tipo de recurso. El enrutamiento basado en el valor request.destination es un enfoque bastante sólido.
CacheFirst usar una estrategia de CacheFirst para cualquier URL que no esté versionada, ya que no tiene una buena manera de asegurarse de que se actualice después de implementar los cambios. StaleWhileRevalidate o NetworkFirst es una estrategia más segura para las direcciones URL que no contienen hashes.
import {registerRoute} from 'workbox-routing'; import {StaleWhileRevalidate, NetworkFirst} from 'workbox-strategies'; registerRoute( // Match HTML document requests. ({request}) => request.destination === 'document', new NetworkFirst({ cacheName: 'html', }) ); registerRoute( // Match JS, CSS, and font requests. ({request}) => ['font', 'script', 'style'].includes(request.destination), new StaleWhileRevalidate({ cacheName: 'resources', }) );