Progressive Web Apps con Ionic

September 20, 2017

Las Progressive Web Apps son la evolución de la Web y cada vez se va viendo mas y mas su necesidad. Sabias que con Ionic puedes crear una PWA facilmente ?

Hola!

En esta oportunidad vamos a conocer que es una Progressive Web App y como crear una usando Ionic.

¿ Que es una PWA ?

Segun la definición que dan en el blog de Google.

Una Progressive Web Apps usa capacidades Web modernas para entregar una experiencia parecida a una App... - Progressive Web Apps.

¿ Que necesito para crear una PWA ?

Para ser detectado como una PWA necesitas 3 cosas:

  • Un Manifiesto.
  • Un Icono.
  • Service Worker.

Cada uno de estos tiene un papel importante en lograr la experiencia que queremos. Por ahora no voy a entrar muy a fondo con cada una y simplemente voy a confiar en Ionic.

Creando nuestra App.

  • Comenzar un Proyecto.
$ionic start myPWA
  • Selecciona uno de las plantillas que trae Ionic.
  • Ubicate en el Proyecto.
$cd myPWA
  • Abre el archivo src/index.html
   /*
    * if ('serviceWorker' in navigator) {
    *   navigator.serviceWorker.register('service-worker.js')
    *     .then(() => console.log('service worker installed'))
    *     .catch(err => console.log('Error', err));
    * }
    */
  • Descomentalo.
  • Instala la libreria sw-toolbox
npm install --save sw-toolbox
  • Prepara para publicar.
$ionic build --prod
  • Sube la carpeta www a un Servidor https:// e ingresa desde Chrome en Android a la URL. Eso es todo.

Puedes utilizar Firebase hosting facilmente.

Para probar el funcionamiento puedes utilizar esta extensión de Chrome.

Espero sea de utilidad este Post y hasta pronto :)