Menu

Progressive Web Apps con Ionic

testingdemos - September 20, 2017 por Carlos Rojas
ionic3.6.1ionic-native3.12.1ionic-app-scripts2.1.4cordova-cli7.0.1ionic-cli3.9.2

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 :)

¡Compártelo!