Vue Cli 3 cómo usar el complemento oficial de PWA (Service Worker)

No dudes en compartir nuestros tutoriales y códigos con otro, necesitamos tu ayuda para aumentar nuestra comunidad.

Solución:

Como ya se señaló, se trata más de un problema de “trabajadores de servicios” que de “vue cli”. En primer lugar, para asegurarnos de que estamos en la misma página, este es el contenido estándar de registerServiceWorker.js debería verse así (vue cli 3, complemento oficial de pwa):

import  register  from 'register-service-worker'

if (process.env.NODE_ENV === 'production') 
  register(`$process.env.BASE_URLservice-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 no ha cambiado la variable BASE_URL en su archivo .env, entonces debería corresponder a la raíz de su aplicación vue. Tienes que crear un archivo llamado service-worker.js en el público carpeta (para que se copie en su directorio de salida en la compilación).

Ahora, es importante entender que todo el código en el registerServiceWorker.js lo que hace es registrar un trabajador de servicio y proporcionar algunos enlaces a su ciclo de vida. Por lo general, se utilizan con fines de depuración y no para programar realmente al trabajador del servicio. Puede comprenderlo si nota que el registerServiceWorker.js El archivo se incluirá en el app.js archivo y ejecutar en el hilo principal.

El complemento PWA oficial de vue-cli 3 se basa en la caja de trabajo de Google, por lo que para usar el trabajador del servicio, primero deberá crear un archivo llamado vue.config.js en la raíz de su proyecto y copiar el siguiente código en él:

// 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 ya ha creado un archivo vue.config.js, solo tiene que agregar el pwa attribute al objeto de configuración. Esas configuraciones le permitirán crear su trabajador de servicio personalizado ubicado en public/service-worker.js y hacer que workbox inyecte algo de código en él: el manifiesto precache. Es un archivo .js donde se compila una lista de referencias a su static los activos se almacenan en una variable normalmente denominada self.__precacheManifest. Debe crear su aplicación en modo de producción para asegurarse de que este sea el caso.

Como la caja de trabajo lo genera automáticamente cuando se compila en modo de producción, el manifiesto de precaché es muy importante para almacenar en caché el shell de la aplicación Vue porque static los activos generalmente se dividen en partes en tiempo de compilación y sería muy tedioso para usted hacer referencia a esas partes en el trabajador del servicio cada vez que (re) compile la aplicación.

Precargar el static activos, puede poner este código al principio de su service-worker.js archivo (también puede usar una declaración try / catch):

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

    workbox.precaching.precacheAndRoute(self.__precacheManifest);

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

Luego, puede continuar programando su trabajador de servicio normalmente en el mismo archivo, ya sea usando la API de trabajador de servicio básico o usando la API de workbox. Por supuesto, no dude en combinar los dos métodos.

Espero que ayude !

como una adición a la respuesta anterior: escribí una pequeña guía sobre cómo ir más allá y agregar alguna funcionalidad al trabajador de servicio personalizado, usando la configuración anterior. Lo puedes encontrar aquí.

Cuatro cosas principales a tener en cuenta:

1. configurar Workbox en vue.config.js a InjectManifest modo, apuntando el swSrc key a un archivo de trabajador de servicio personalizado en /src

2. En este trabajador de servicio personalizado, algunas líneas se agregarán automáticamente en el proceso de compilación para importar el precache-manifest y workbox CDN. Las siguientes líneas deben agregarse en el personalizado service-worker.js file para almacenar previamente los archivos de manifiesto:

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

3. Escuche los eventos de registro en el registerServiceWorker.js Archivo. Puede utilizar el objeto de registro que se pasa como primer argumento a los controladores de eventos para enviar mensajes al service-worker.js Archivo:

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

4. Suscríbete a los mensajes en el service-worker.js archivar y actuar en consecuencia:

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

Espero que esto ayude a alguien.

Sección de Reseñas y Valoraciones

Nos puedes respaldar nuestra función exponiendo un comentario o puntuándolo te damos la bienvenida.

---

---

Utiliza Nuestro Buscador