vue.config.js
pwa: { workboxPluginMode: 'GenerateSW', workboxOptions: { importWorkboxFrom: 'cdn', skipWaiting: true, clientsClaim: true, navigateFallback: '/index.html', include: [ ], runtimeCaching: [ { urlPattern: /.*\.js.*/i, handler: 'CacheFirst', options: { cacheName: 'seed-js', expiration: { maxEntries: 20, maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days }, }, }, { urlPattern: /.*css.*/, handler: 'CacheFirst', options: { cacheName: 'seed-css', expiration: { maxEntries: 30, maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days }, }, }, { urlPattern: /.*(png|svga).*/, handler: 'CacheFirst', options: { cacheName: 'seed-image', expiration: { maxEntries: 30, maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days }, }, } ] }Cuando deshabilito el trabajador de servicio solo de producción y ejecuto 'npm run serve'
import { register } from 'register-service-worker' // if (process.env.NODE_ENV === 'production') { register(`${process.env.BASE_URL}service-worker.js`, { ready() { console.log( 'App is being served from cache by a service worker.\n' + 'For more details, visit https://goo.gl/' ) }, registered() { console.log('Service worker has been registered.') }, cached() { console.log('Content has been cached for offline use.') }, updatefound() { console.log('New content is downloading.') }, updated() { console.log('New content is available; please refresh.') }, offline() { console.log('No internet connection found. App is running in offline mode.') }, error(error) { console.error('Error during service worker registration:', error) } }) // }Finalmente, no obtuve nada en cacheStorage, que se puede recuperar en condiciones fuera de línea, pero con un trabajador de servicio registrado con éxito, . Tan sencillo que no obtuve nada mientras estaba fuera de línea. ¿Por qué? Seguro que obtuve la cadena de patrón de URL correcta.
