Menu

Vue PWA

vue - September 02, 2019 por Carlos Rojas | Edita este Post.
Vue CLI3.2.1

El ecosistema de Vue es muy completo y es como una navaja suiza solo vas utilizando lo que necesitas según tu proyecto. En este post vamos a ver como utilizar el plugin oficial para PWA.

¿ Que es una Progressive Web App ?

Una Progressive Web App es una WebApp que se adapta a los moviles y entrega al usuario una experiencia similar a la que entregaria una App descargada del App Store o del Google Play Store.

También según la definicion de Google debén tener 3 caracteristicas principales.

Confiabilidad. Siempre tenemos una versión ligera de nuestra App en el dispositivo y por lo tanto no vamos a mostrar el Downsaur.

Rapido. Debemos responder rapidamente a las solicitudes del usuario con nuestro contenido base cacheado.

Atrayente. Vamos a sentir que estamos usando una App movil nativa. adicionalmente, tendremos notificaciones en segundo plano para una experiencia inmersiva.

¿ Que necesito para crear una PWA ?

Para ser detectado como una PWA necesitas 4 cosas:

  1. Una WebApp que actue correctamente en Moviles.

  2. Un Web manifesto que indicara a tu Movil que esta app puede ser instalada.

  3. Un Icono que sera utilizado como acceso a la App.

  4. Un Service Worker que permitira realizar tareas en segundo plano.

Cada uno de estos tiene un papel importante en lograr la experiencia que queremos.

¿ Como usar @vue/cli-plugin-pwa en nuestro proyecto ?

Vamos a crear un nuevo proyecto utilizando el CLI.

$vue create demo5

Luego, me ubico dentro del proyecto y agrego el plugin con:

$vue add @vue/pwa

Cuando termine de instalar vamos a encontrar algunos archivos nuevos en nuestro proyecto.

  public/img/icons/android-chrome-192x192.png
  public/img/icons/android-chrome-512x512.png
  public/img/icons/apple-touch-icon-120x120.png
  public/img/icons/apple-touch-icon-152x152.png
  public/img/icons/apple-touch-icon-180x180.png
  public/img/icons/apple-touch-icon-60x60.png
  public/img/icons/apple-touch-icon-76x76.png
  public/img/icons/apple-touch-icon.png
  public/img/icons/favicon-16x16.png
  public/img/icons/favicon-32x32.png
  public/img/icons/msapplication-icon-144x144.png
  public/img/icons/mstile-150x150.png
  public/img/icons/safari-pinned-tab.svg
  public/manifest.json
  public/robots.txt
  src/registerServiceWorker.js
  src/sw.js
  vue.config.js
  package-lock.json
  package.json
  src/main.js

Ahora vamos a crear en la raiz el archivo vue.config.js si no existe aún, es la forma en que podemos personalizar webpack en nuestro proyecto. y vamos a agregar:

module.exports = {
  // ...other vue-cli plugin options...
  pwa: {
    name: 'My App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',

    // configure the workbox plugin
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: 'src/service-worker.js',
      // ...other Workbox options...
    }
  }
}

y debemos crear el archivo src/service-worker.js en blanco. Si no existe aún. Con esta configuración podremos personalizar facilmente nuestro Service Worker en el futuro.

Ok, ahora para que vue cree todo por nosotros. Debemos ejecutar:

$npm run build

y para probar debemos ejecutar nuestra app desde la carpeta dist y desafortunadamente no podemos utilizar el npm run serve, entonces, instalaremos un paquete que nos ayudara con esto.

$npm install -g serve

y ejecutamos desde la raiz.

$serve -s dist

y desde Chrome Dev Tools puedes ver que ya tienes un Service Worker y un Manifest en tu app.

Si este contenido te parece útil y me quieres ayudar a hacer mas considera apoyarme en Patreon.

Bueno esto espero que esta info sea de ayuda y aprendas a utilizar mejor esta excelente herramienta.

Ver código

¡Compártelo!