visualizacion-powerBI
Mejora la visualización de tus informes de Power BI (Parte I)
28 enero, 2019
GSK
Kabel y GSK Consumer Healthcare desarrollan una plataforma para la apertura de los datos en la empresa
5 febrero, 2019

1. Introducción

Desde hace unos años, en desarrollo web hay una tecnología que parece ir cogiendo fuerza: las Progressive Web Apps (PWA). Estas aplicaciones no son más que una evolución de las aplicaciones web, que hacen que las barreras entre las aplicaciones móviles nativas y las aplicaciones web se difuminen, todo gracias a los navegadores web modernos.

Gracias a los nuevos estándares web y a las características de los navegadores modernos, una PWA ofrece una experiencia de usuario mucho más cercana a las aplicaciones nativas de la siguiente forma:

  • Rapidez: responde rápidamente a las interacciones del usuario.
  • Fiabilidad: nunca muestra “downasaur”, incluso cuando el dispositivo no tiene conexión.
  • Engagement: ofrece características similares a las aplicaciones nativas, como lanzarse desde la “home screen”.
  • Seguridad: no puede acceder a partes críticas del sistema.

Podéis consultar más información en https://developers.google.com/web/progressive-web-apps/.

Pero…¿Qué es una PWA? Según el diseñador Frances Berriman y el ingeniero de Google Chrome Alex Russell, creadores del término, PWA describe a aquellas aplicaciones que toman ventaja de las nuevas características soportadas por los navegadores modernos que permiten a los usuarios actualizar sus aplicaciones web a progressive web apps en su sistema operativo nativo.

Para ayudar a los equipos a crear la mejor experiencia, Google ha creado una checklist con lo que ellos creen que debe tener una PWA: https://developers.google.com/web/progressive-web-apps/checklist.

Si buscáis comenzar con buen pie en el mundo de progressive apps, recomiendo que os leáis el siguiente artículo: https://developers.google.com/web/updates/2015/12/getting-started-pwa.

También recomiendo leer el siguiente artículo si lo que buscáis es crear vuestra primera PWA: https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=es.
 

2. Principios tecnológicos

Para pasar de desarrollar aplicaciones web a desarrollar PWA, es necesario conocer los estándares y principios que permiten dotar una web con características avanzadas, tales como instalar la aplicación en el dispositivo o el trabajo desconectado.

2.1. Web App Manifest

El Web App Manifest es un archivo JSON que proporciona información de la aplicación y permite una presencia de la misma como si fuese nativa. Por ejemplo, es en el manifest donde se habilitará que la aplicación se abra en modo pantalla completa; incluso en Android Chrome se puede habilitar una splash screen.

Además, es el Manifest quien nos brinda la posibilidad de habilitar la instalación de la aplicación en la “home screen” del dispositivo. En este punto, Chrome permite la creación de banners de instalación si la aplicación se tratase de una aplicación nativa.

Existen herramientas que ayudan a trabajar con los manifest, como por ejemplo:

En el siguiente artículo podréis ver con más detalle en qué consiste el web app manifest: https://developers.google.com/web/fundamentals/web-app-manifest/.

2.2. Trabajo offline mediante Service Worker

Un Service Worker, de forma simplificada, no es más que un script web que puede correr en segundo plano. Uno de los objetivos por los que se creó fue el de la creación de experiencias desconectadas en la web.

Un Service Worker puede responder a eventos las peticiones de red. Además, permite el acceso a la Caché API para poder cachear recursos e información de la aplicación. Todo ello convierte a los Service Worker en un proxy programable.

Gracias al trabajo con Service Worker se puede conseguir una ventaja muy significativa permitiendo que, tras una primera visita de la aplicación, en el resto de ocasiones podamos cargar la aplicación casi instantáneamente. Si cacheamos los recursos esenciales se puede cargar el núcleo de la aplicación de forma offline y popular el contenido de la misma mediante Javascript.

Al igual que con el Manifest, existe mucha ayuda para el trabajo con Service Worker:

Os dejo aquí debajo unos enlaces a diferentes artículos para profundizar más sobre el tema:

2.3. Notificaciones push para re-engagement

Gracias a la Push API y a los Service Worker, las aplicaciones web disponen de la posibilidad de recibir notificaciones push, acercando aún más la experiencia de usuario a la experiencia de aplicaciones nativas.

Es importante seguir el estado de esta API puesto que su estado de implementación en los navegadores es bajo.

En el siguiente enlace podréis encontrar información acerca de las APIs de integración que hay con los diferentes dispositivos: https://whatwebcando.today/.

Y para profundizar un poco más podéis echarle un vistazo al siguiente artículo: https://developers.google.com/web/fundamentals/push-notifications/.

2.4. Progressive enhancement

El Progressive Enhancement es una estrategia para el desarrollo web que podría denominarse “Content First“. Esta estrategia agrega capas de funcionalidad avanzada por encima del contenido principal de la web y estás funcionalidades se habilitan en base al soporte de las mismas por el navegador utilizado.

Esta estrategia lo que busca es que el CORE de la web sea accedido por el máximo número de usuarios posibles y que aquellos usuarios con navegadores más avanzados puedan disfrutar de una experiencia de usuario mucho más rica.

Un ejemplo del uso de esta estrategia en una PWA sería el uso de la Payment Request API, habilitando el uso de la API en los navegadores que la soporten, dando una experiencia cercana a la nativa. Mientras que aquellos navegadores que no soportan la API utilizarán una pasarela de pago.

 
 
En la segunda parte de este post entraremos en detalle de la estructura del frontend, del panorama de las PWAs y de los beneficios que nos aportan.
 
 
 
Podéis comentarnos lo que sea en info@kabel.es.

También podéis seguirnos en Twitter, LinkedIn y Facebook.
 
 


Licencia de Creative Commons Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

Compártelo: Share on FacebookTweet about this on TwitterShare on LinkedInPin on Pinterest

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

NEWSLETTER