Vue Cli 3 : comment utiliser le plugin officiel PWA ( Service Worker )

Question

Sur mon premier projet Vue en essayant de lutter avec le plugin officiel PWA ( https://github.com/yyx990803/register-service-worker ). Mon problème spécifique : capturer le travailleur de service enregistré et l'utiliser pour n'importe quoi. Le readme de Github montre le fichier exact qui est produit, et il semble n'y avoir aucune documentation sur la façon de travailler avec ce travailleur de service une fois qu'il est instancié (dois-je capturer l'instance d'enregistrement ? si oui, comment ?).

J'ai trouvé ce problème : https://github.com/vuejs/vue-cli/issues/1481 et fournit un meilleur endroit pour en parler, car je n'ai pas été en mesure de trouver un code d'exemple ou une documentation claire sur la façon de travailler avec ceci.

Si quelqu'un a un exemple de code, merci de le partager. Vue et la nouvelle clique sont des outils incroyables, la documentation de ce genre de choses est un pas en avant nécessaire pour augmenter l'adoption de la plateforme.

Answer 1

Comme cela a déjà été souligné, il s'agit davantage d'un problème de "travailleurs de service" que de "vue cli". Tout d'abord, pour être sûr que nous sommes sur la même longueur d'onde, voici ce que le contenu standard de l'application registerServiceWorker.js devrait ressembler à (vue cli 3, plugin officiel pwa) :

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'
      )
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    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)
    }
  })
}

Si vous n'avez pas modifié la variable BASE_URL dans votre fichier .env, elle doit correspondre à la racine de votre application Vue. Vous devez créer un fichier nommé service-worker.js dans le public (pour qu'il soit copié dans votre répertoire de sortie lors de la construction).

Maintenant, il est important de comprendre que tout le code dans la section registerServiceWorker.js est d'enregistrer un travailleur de service et de fournir quelques points d'accès à ses services. cycle de vie . Ceux-ci sont généralement utilisés à des fins de débogage et non pour programmer réellement le service worker. Vous pouvez le comprendre en remarquant que la balise registerServiceWorker.js seront regroupés dans le fichier app.js et s'exécutent dans le fil principal.

Le plugin officiel PWA de vue-cli 3 est basé sur le workbox de Google, donc pour utiliser le service worker, vous devrez d'abord créer un fichier nommé vue.config.js à la racine de votre projet et y copier le code suivant :

// vue.config.js
module.exports = {
    // ...other vue-cli plugin options...
    pwa: {
        // configure the workbox plugin
        workboxPluginMode: 'InjectManifest',
        workboxOptions: {
            // swSrc is required in InjectManifest mode.
            swSrc: 'public/service-worker.js',
            // ...other Workbox options...
        }
    }
}

Si vous avez déjà créé un fichier vue.config.js, il vous suffit d'ajouter l'attribut pwa à l'objet config. Ces paramètres vous permettront de créer votre service personnalisé situé à l'adresse suivante public/service-worker.js et faire en sorte que workbox y injecte du code : le manifeste precache. Il s'agit d'un fichier .js dans lequel une liste de références à vos ressources statiques compilées est stockée dans une variable généralement appelée self.__precacheManifest . Vous devez construire votre application en mode production afin de vous assurer que c'est bien le cas.

Comme il est généré automatiquement par workbox lorsque vous construisez en mode production, le manifeste precache est très important pour la mise en cache du shell de votre application Vue, car les ressources statiques sont généralement décomposées en morceaux au moment de la compilation et il serait très fastidieux pour vous de référencer ces morceaux dans le service worker à chaque fois que vous (re)construisez l'application.

Pour précacher les actifs statiques, vous pouvez mettre ce code au début de votre fichier service-worker.js (vous pouvez également utiliser une instruction try/catch) :

if (workbox) {
    console.log(`Workbox is loaded`);

    workbox.precaching.precacheAndRoute(self.__precacheManifest);

} 
else {
    console.log(`Workbox didn't load`);
}

Vous pouvez ensuite continuer à programmer votre travailleur de service normalement dans le même fichier, soit en utilisant la fonction API de base du prestataire de services ou en utilisant API de la boîte à outils . Bien sûr, n'hésitez pas à combiner les deux méthodes.

J'espère que cela vous aidera !

Answer 2

En complément de la réponse ci-dessus : J'ai écrit un petit guide sur la façon d'aller plus loin et d'ajouter certaines fonctionnalités au service personnalisé, en utilisant la configuration ci-dessus. Vous pouvez le trouver aquí .

Quatre éléments principaux à garder à l'esprit :

1. configurer Workbox dans vue.config.js a InjectManifest en pointant le swSrc dans un fichier de service personnalisé en /src

2. Dans ce service-travailleur personnalisé, certaines lignes seront ajoutées automatiquement dans le processus de construction pour l'importation de l'élément precache-manifest y workbox CDN . Les lignes suivantes doivent être ajoutées dans le fichier personnalisé service-worker.js pour précacher les fichiers manifestes :

   self.__precacheManifest = [].concat(self.__precacheManifest || []);
   workbox.precaching.suppressWarnings();
   workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

3. Écoutez les événements d'enregistrement dans le registerServiceWorker.js fichier. Vous pouvez utiliser l'objet d'enregistrement qui est passé comme premier argument aux gestionnaires d'événements pour envoyer des messages à l'adresse suivante service-worker.js archivo:

   ...
   updated(registration) {
     console.log("New content is available; please refresh.");
     let worker = registration.waiting
     worker.postMessage({action: 'skipWaiting'})
   },
   ...

4. S'abonner aux messages dans le service-worker.js et agir en conséquence :

   self.addEventListener("message", (e)=>{
       if (e.data.action=='skipWaiting') self.skipWaiting()
   })

J'espère que cela aidera quelqu'un.