Auto update PWA #vue #vuecli3 #pwa #update #autoupdate

vue-auto-update-pwa.md

Configuración para el servidor:

Es necesario poner max-age a 0 en el cache-control para deshabilitar la caché del servidor. En http-server sería:

# http-server /path/to/my/dist/files -p [my-port] -c-1

---

Configuración para el cliente:

// vue.config.js
module.exports = {
    lintOnSave: false,
    pwa       : {
        workboxPluginMode: 'GenerateSW',
        workboxOptions   : {
            skipWaiting: true
        }
    }
};

// registerServiceWorker.js
/* eslint-disable no-console */

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/AFskqB'
            )
        },
        cached() {
            console.log('Content has been cached for offline use.')
        },
        updated() {
            console.log('New content is available; please refresh.');
            window.location.reload(true)  // <----- reload the page to obtain new changes
        },
        offline() {
            console.log('No internet connection found. App is running in offline mode.')
        },
        error(error) {
            console.error('Error during service worker registration:', error)
        }
    })
}