Ionic PWA, desarrollando nuestra primera progressive web app
Ionic PWA, desarrollando nuestra primera progressive web app
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!


Seguramente ya has oído hablar de PWA, es decir, Aplicaciones progresivas, y seguro que también has escuchado que son el futuro de la web, yo personalmente estoy seguro de ello.

Una PWA es una aplicación web que debe ofrecer una experiencia de usuario similar a la de una aplicación nativa.

Algunas de las cosas que deben poder hacer es trabajar sin conexión (aplicaciones offline), envío de notificaciones automáticas y tener la apariencia y usabilidad de una app nativa.

Gracias a la API que tenemos disponibles en la web podemos hacer muchas de las cosas que hace una aplicación nativa, la idea es utilizarlas.

Por lo tanto, nos referimos a aplicaciones móviles que trabajen en el navegador de una forma muy parecida casi igual.

En este tutorial vamos a aprender a desarrollar aplicaciones progresivas con Ionic PWA desde 0.

Service Workers

Los Service Workers juegan un papel imprescindible en una PWA, agrega las funcionalidades clave para que la app se comporte como se espera, servicio offline, actualización en segundo plano y almacenamiento de caché, Web Push, entre otras cosas, aquí tienes muchas recetas preparadas listas para utilizar con Service Workers.

Aplicación Shell

Es la versión simplificada de nuestra app, html, css y js mínimos, lo mínimo que debemos cargar de inicio, pero mostrando de forma correcta la interfaz de nuestra app.

Una vez el usuario ha visitado por primera vez la app, ésta se almacenará en caché y podrá servirse de forma más eficiente, incluso offline el resto de las veces.

¿Por qué progresiva?

Se le llama Progressive Web Apps o Aplicaciones web progresivas porque a medida que el usuario genera una relación con la app, ésta se comporta mejor, carga rápida, icono de acceso rápido o trabajo eficiente con redes de mala calidad son algunas de las ventajas.

Por lo tanto la app progresa eficientemente con el uso que le damos, a más uso y más tiempo, mejor comportamiento, aquí tienes una explicación más clara de la Wikipedia.

  • Progresiva: funciona para todos los usuarios, independientemente de la opción del navegador, ya que están diseñados con mejoras progresivas como principio básico.
  • Receptivo: ajuste cualquier factor de forma: escritorio, dispositivo móvil, tableta o formularios que aún no se hayan creado.
  • Conectividad independiente: los Service Workers permiten el trabajo fuera de línea o en redes de baja calidad.
  • Similar a una app nativa: se siente como una aplicación para el usuario con interacciones y navegación de estilo de aplicación nativa.
  • Fresca: siempre actualizado gracias al proceso de actualización del trabajador de servicio.
  • Segura: se sirve a través de HTTPS para evitar problemas de seguridad y garantizar que el contenido no haya sido alterado.
  • Identificativa: son identificables como “aplicaciones” gracias a los manifiestos del W3C y al alcance del registro del Service Worker que permite que los motores de búsqueda los encuentren.
  • Siempre disponible: haga que el nuevo compromiso sea fácil a través de funciones como notificaciones automáticas.
  • Instalable: permite a los usuarios “conservar” las aplicaciones que les parecen más útiles en su pantalla de inicio sin la molestia de una tienda de aplicaciones.
  • Vinculable: se comparte fácilmente a través de una URL y no requiere una instalación compleja.

Archivo de Manifiesto

El manifiesto de la aplicación web es una especificación W3C que define un manifiesto basado en JSON (archivo manifest.json) para proporcionar a los desarrolladores un lugar centralizado para colocar los metadatos asociados a una aplicación web, que incluyen lo siguiente:

  • El nombre de la aplicación web.
  • Enlaces a los íconos de la aplicación web u objetos de imagen.
  • La URL preferida para iniciar o abrir la aplicación web.
  • Los datos de configuración de la aplicación web para varias características.
  • Declaración de orientación predeterminada de la aplicación web.
  • Permite establecer el modo de visualización, por ejemplo a pantalla completa.
  • Al configurar y manipular los metadatos para el archivo de manifiesto web, los desarrolladores permiten a los agentes de usuario crear experiencias móviles sin problemas nativos a través de la aplicación web progresiva.

A continuación tienes un ejemplo completo de un archivo de manifiesto con las configuraciones básicas y necesarias para cualquier PWA.

Aplicaciones progresivas con Ionic PWA

Hace 3 días (16-01-2018) el equipo de Ionic publicó la versión beta de Ionic PWA Toolkit, este es el camino que ellos recomiendan y el que nosotros vamos a utilizar, verás que es muy simple.

Lo primero que debemos hacer es crear nuestro proyecto utilizando los siguientes comandos.

Una vez hayamos clonado el repositorio de Ionic PWA Toolkit simplemente debemos acceder al proyecto, instalar las dependencias y lanzar la aplicación.

El último comando habrá abierto en nuestro navegador la app y ya será completamente funcional.

Ionic PWA en Producción con Firebase

El servicio de hosting recomendado para aplicaciones progresivas con Ionic PWA es Firebase, en muy pocos clicks podemos tener una aplicación disponible completamente configurada.

Si no conoces este servicio, aquí tienes un completo ejemplo de puesta en marcha una aplicación con Angular en Producción con Firebase.

Para poder poner nuestra aplicación en modo producción debemos ejecutar el siguiente comando.

Esto habrá generado todo lo necesario dentro del directorio www.

Subir nuestra App a Firebase

Primero de todo debes tener instalado firebase-tools, para ello ejecuta el siguiente comando.

Ahora debemos iniciar sesión en nuestra cuenta de firebase desde la terminal con el siguiente comando.

Para generar los archivos firebase.json y .firebaserc, que son los que entenderá Firebase, vamos a ejecutar otro comando.

Ahora debemos modificar el archivo firebase.json para explicarle a Firebase nuestra aplicación.

Finalmente sólo nos queda hacer el deploy de nuestra app y tendremos todo listo, recuerda seleccionar la opción de hosting cuando te pregunte Firebase.

Si accedes ahora a la url que te ofrece Firebase verás que todo está funcionando perfectamente y hace lo que hemos explicado en esta entrada.

Espero que te haya parecido interesante la entrada y te resulte útil, cualquier comentario para mejorar esta entrada será muy bienvenido.