J'ai le registerServiceWorker.ts suivant dans mon application
/* 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'
)
},
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.')
//@ts-ignore
self.skipWaiting();
},
offline() {
console.log('No internet connection found. App is running in offline mode.')
},
error(error) {
console.error('Error during service worker registration:', error)
}
})
}
Comment déclencher le saut de code dans l'événement mis à jour?
p>
3 Réponses :
Le problème ici est que vous essayez d'appeler skipWaiting depuis le contexte du navigateur du code, pas depuis le contexte du Service Worker.
Le code que vous avez collé dans votre question est exécuté par le thread d'exécution du navigateur , c'est ce qu'on appelle une "exécution JS normale". Cependant, skipWaiting n'existe PAS dans ce contexte d'exécution. skipWaiting fait partie du contexte d'exécution de Service Worker. Vous pouvez appeler skipWaiting à partir du fichier de script de Service Worker lui-même que le JS de contexte de votre navigateur enregistre.
Cette ligne
register(`${process.env.BASE_URL}service-worker.js`, {
enregistre un nouveau Service Worker qui vit à l'intérieur un fichier appelé "service-worker.js". Dans THERE (ce fichier!), Vous pouvez appeler self.skipWaiting ().
Consultez la documentation MDN ici. Il y a un exemple d'appel de la méthode. https://developer.mozilla.org/en-US/ docs / Web / API / ServiceWorkerGlobalScope / skipWaiting
Merci, il m'a fallu un peu de recherche sur Google pour comprendre que vue utilise google workbox et qu'il pourrait être configuré avec le fichier vue.config.js pour sauter en attente. Je n'ai pas été en mesure de trouver un moyen de publier un message dans la boîte de travail et de le faire sauter en attente du code. mais ce n'est pas nécessaire maintenant.
J'ai trouvé comment configurer le service worker pour sauter automatiquement l'attente dans mon application vue, en utilisant vue.config.js.
const webpack = require('webpack');
module.exports = {
lintOnSave: false,
chainWebpack: (config) => {
...
},
configureWebpack: {
...
},
pwa: {
...
workboxPluginMode: 'GenerateSW',
workboxOptions: {
skipWaiting: true
}
},
pluginOptions: {
...
},
css: {
// Enable CSS source maps.
sourceMap: process.env.NODE_ENV !== 'production'
},
devServer: {
...
}
};