web-dev-qa-db-fra.com

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

sur mon premier vue projet essayant de lutter avec le plugin officiel PWA ( https://github.com/yyx990803/register-service-worker ). Mon problème spécifique : capturer le prestataire de services inscrit et l'utiliser pour quoi que ce soit.Le fichier Lisezmoi de github indique le fichier exact généré et il semble n'y avoir aucune documentation sur la manière de travailler avec ce prestataire de services une fois qu'il est instancié (dois-je capturer l'instance d'enregistrement? si c'est le cas, comment? )

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

Si quelqu'un a un exemple de code, merci de le partager. Vue et le nouveau CLI sont des outils incroyables. Documenter de telles choses est un pas en avant nécessaire pour accroître l'adoption de la plateforme.

vue.jsservice-workervue-clipwa
24
Erik White

Comme nous l’avons déjà souligné, il s’agit davantage d’une question de "travailleurs des services" que de "vue cli". Tout d’abord, pour être sûr d’être sur la même page, voici à quoi devrait ressembler le contenu habituel de registerServiceWorker.js (vue cli 3, plugin officiel de 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 alors correspondre à la racine de votre application vue. Vous devez créer un fichier nommé service-worker.js dans le répertoire public (afin qu’il soit copié dans votre répertoire de sortie lors de la construction).

Maintenant, il est important de comprendre que tout le code contenu dans le fichier register registerServiceWorker.js enregistre un travailleur de service et fournit quelques points d'ancrage dans son - cycle de vie . Celles-ci sont généralement utilisées à des fins de débogage et non pour programmer le service worker. Vous pouvez le comprendre en remarquant que le fichier registerServiceWorker.js sera regroupé dans le app.js fichier et exécuté dans le fil principal.

Le plug-in PWA officiel de vue-cli 3 est basé sur la boîte de travail de Google. Par conséquent, pour utiliser le service worker, vous devez 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 agent de service personnalisé situé dans public/service-worker.js Et de faire en sorte que Workbox y injecte du code: le manifeste de précache. C'est un fichier .js où une liste de références à vos actifs statiques compilés est stockée dans une variable généralement nommée self.__precacheManifest. Vous devez créer votre application en mode de production pour vous assurer que c'est bien le cas.

Comme il est généré automatiquement par Workbox lors de la création en mode de production, le manifeste de pré-cache est très important pour la mise en cache de votre shell Vue, car les actifs statiques sont généralement décomposés en fragments au moment de la compilation et sont donc fastidieux. pour que vous puissiez référencer ces morceaux dans le service worker à chaque fois que vous (re) construisez l'application.

Pour mettre en cache 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 prestataire de services normalement dans le même fichier, soit à l'aide de API de base de maintenance , soit à l'aide de API de la boîte de travail . Bien sûr, n'hésitez pas à combiner les deux méthodes.

J'espère que ça aide!

44
Landry BETE

en complément de la réponse ci-dessus: j’ai écrit un petit guide sur la manière d’aller plus loin et d’ajouter des fonctionnalités à l’agent de service personnalisé, en utilisant la configuration ci-dessus. Vous pouvez le trouver ici .

Quatre points principaux à garder à l’esprit:

  1. configurer Workbox dans vue.config.js to InjectManifest mode, en pointant la clé swSrc vers un fichier de service worker personnalisé dans /src

  2. Dans cet opérateur de service personnalisé, certaines lignes seront ajoutées automatiquement dans le processus de construction pour importer le fichier precache-manifest et workbox CDN. Les lignes suivantes doivent être ajoutées dans la personnalisation service-worker.js fichier pour précacheter les fichiers manifestes:

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

  3. Écoutez les inscriptions dans le registerServiceWorker.js fichier. Vous pouvez utiliser l’objet d’enregistrement transmis en tant que premier argument aux gestionnaires d’événements pour publier des messages sur le service-worker.js fichier:

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

  4. Abonnez-vous aux messages dans le service-worker.js déposer et agir en conséquence:

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

J'espère que ça aide quelqu'un.

29
kdd