web-dev-qa-db-fra.com

Vue PWA ne reçoit pas de nouveau contenu après l'actualisation

Je suis nouveau sur Vue et j'ai créé un projet avec le plug-in PWA Service-worker. Après avoir déployé une nouvelle version de mon application, je reçois ces messages dans la console:

Failure

Après avoir actualisé la page (F5), ces messages apparaissent toujours de la même manière et l'application est toujours dans son ancien état. J'ai tout essayé pour vider le cache, mais il ne charge toujours pas le nouveau contenu.

Je n'ai rien changé de la configuration par défaut après avoir créé mon projet et je n'ai ajouté aucun code qui interagit avec le serviceworker. Qu'est-ce qui ne va pas? Suis-je en train de manquer quelque chose?

javascriptvue.jsvuejs2service-workerprogressive-web-apps
18
user5242820

Comme je l'ai compris, cette question n'est vraiment liée qu'aux débutants dans PWA, qui ne savent pas que vous pouvez (et devez) configurer PWA pour y parvenir. Si vous vous sentez adressé maintenant (et en utilisant VueJS), souvenez-vous:

Pour télécharger automatiquement le nouveau contenu, vous besoin pour configurer PWA. Dans mon cas (VueJS), cela se fait en créant un fichier vue.config.js Dans le répertoire racine de mon projet (au même niveau que package.json).

Dans ce fichier, vous avez besoin de ceci:

module.exports = {
    pwa: {
        workboxOptions: {
            skipWaiting: true
        }
    }
}

Qui téléchargera automatiquement votre nouveau contenu s'il est détecté. Cependant, le contenu ne sera pas encore affiché à votre client, car il doit être actualisé après avoir téléchargé le contenu. Je l'ai fait en ajoutant window.location.reload(true) à registerServiceWorker.js Dans mon répertoire src/:

updated () {
    console.log('New content is available: Please refresh.')
    window.location.reload(true)
},

Maintenant, si le Service Worker détecte du nouveau contenu, il le téléchargera automatiquement et actualisera la page par la suite.

27
user5242820