Introduccion a progressive web apps

Este articulo provee una introducción a las Progressive Web Apps (PWAs), discutiendo qué son, y las ventajas que brindan sobre las aplicaciones web convencionales.

¿Qué es una Progressive Web App?

El término "Aplicación Web Progresiva" no es un nombre formal u oficial. Es sólo una abreviatura usada inicialmente por Google para el concepto de crear una aplicación flexible y adaptable usando sólo tecnologías web.

Las PWA son apliaciones web que usan un número especifico de tecnologías y patrones estandars que les permiten aprovechar tanto las caracteristicas web como apps nativas. Por ejemplo, las web apps son mas visibles - es más fácil y rápido visitar una página web que instalar una aplicación, y también puedes compartir una web app mediante un link.

Del otro lado, las apps nativas son mejor integradas con el sistema operativo y por lo tanto ofrecen una experiencia más fluida a los usuarios. Puedes instalar una app nativa que funcionará offline, y los usuarios adoran presionar los íconos para acceder a sus aplicaciones favoritas, antes que navegar usando el navegador.

PWA nos dan la capacidad de crear web apps que puedan disfrutar de las mismas ventajas.

Esto no es un concepto nuevo -- estas ideas han sido revisadas muchas veces en la plataforma web con varios enfoques en el pasado.  Progressive Enhancement y el diseño responsivo ya nos permiten crear sitios web amigables con los dispositivos móviles.

PWA, además, provee todo esto y más, sin deshacerse de ninguna de las caracteristicas existentes que hacen a la web genial.

¿Qué hace a una aplicacion ser una PWA?

Como sugerimos arriba, PWA no son creadas con una sola tecnología. Representan una nueva filosofia para construir aplicaciones web, involucrando algunos patrones específicos, APIs, y otras caracteristicas. No es tan obvio si una aplicación web es una PWA o no desde un primer vistazo. Una app podría ser considerada una PWA cuando cumple ciertos requerimientos, o implementa un conjunto de caracteristicas dadas: trabaja offline, es instalable, es fácil de sincronizar, puede enviar notificaciones push, etc.

Adicionalmente, existen herramientas para medir la integridad de una aplicación en porcentajes, como Lighthouse. Implementando varias ventajas tecnológicas, podemos hacer una aplicación mas progresiva, así terminando con un mayor puntaje de Lighthouse. Pero éste es solo un indicador aproximado.

Estas son algunos principios clave de una aplicación web debe tratar de probar para ser identificad como una PWA. Debería ser:

  • Descubrible, así el contenido podrá ser encontrado por los motores de búsqueda.
  • Instalable, así podra verse en la pantalla de inicio del dispositivo.
  • Enlazable, así podrás compartirla con solo enviar la direccion URL. 
  • Independiente de la red, así podrá funcionar offline o con una conexión lenta.
  • Progresiva, así podrá ser usable en navegadores viejos, pero completamente funcional en las ultimas versiones de los navegadores.
  • Re-engageable, así se podrán enviar notificaciones cuando haya contenido nuevo disponible.
  • Responsive, así podrá ser usada en cualquier dispositivo con un navegador y una pantalla — teléfonos móviles, tablets, laptops, TVs, refrigeradores, etc.
  • Segura, así la conexón entre el usuario y la app está protegida contra terceros que intenten acceder a datos sensibles

¿Vale la pena hacer todo eso?

Absolutamente! con una cantidad relativamente pequeña de esfuerzo podrás implementar las funciones del núcleo PWA, los beneficios son grandes. Por ejemplo:

  • Una disminución en el tiempo de carga después de que la app haya sido instalada, gracias a cachear con Service Workers, mientras guardamos precioso ancho de banda y tiempo. Las PWAs tienen una carga casi instantánea (a partir de la segunda visita).
  • La habilidad de actualizar solo el contenido que ha cambiado cuando una actualizacion este disponible. En contraste, con una app nativa, incluso la más ligera modificación puede obligar al usuario a descargar la aplicación entera otra vez.
  • Se ve y se siente que está más integrada con la plataforma nativa — iconos de aplicaciones en la pantalla de inicio, aplicaciones que se ejecutan automáticamente en modo de pantalla completa, etc.
  • Re-conectar con los usuarios por medio del sistema de notificaciones y tambien mensajes push, dirijido a usuarios mas comprometidos y mejores indices de conversion.

Hay muchas historias de companias exitosas yendo por la ruta de las PWA, optando por una experiencia web mejorada, en lugar de una aplicacion nativa, y viendo significativos beneficios como resultado. El sitio web PWA Stats comparte muchos estudios de casos que muestran estos beneficios

La historia de exito mejor conocida es probablemente Flipkart Lite — El sitio de e-commerce mas grande de India fue reconstruido como una web progresiva en 2015, lo que resultó en aumentar la conversion de usuarios en un 70%. La app progresiva de AliExpress tambien ha visto mejores resultados que usando solo una web o una app nativa, con un 104% de incremento, en el indice de conversion de usuarios. Dado el aumento de sus beneficios, y la relativamente baja cantidad de trabajo requerida para la conversión de estas apps a PWAs, la ventaja es clara

Las empresas emergentes en sus primeras etapas, como Couponmoto, también han empezado a utilizar aplicaciones web progresivas para impulsar una mayor participación de los consumidores, lo que demuestra que pueden ayudar tanto a las pequeñas como a las grandes empresas a (re)comprometer a los usuarios de manera más eficaz.

Puede ver la lista en pwa.rocks para mas ejemplos. Vale la pena mencionar la página hnpwa.com --- esta lista un ejemplo de implementación del sitio web Hacker News(en lugar de la habitual aplicación TodoMVC), en la cual se puede ver el uso de varios frameworks front-end.

Incluso puedes generas PWAs en línea usuando el sitio PWABuilder.

Para información específica de Service Worker y de push, asegúrate de revisar Service Worker Cookbook, una colección de recetas que usan service workers en sitios modernos.

Vale la pena probar un enfoque PWA, para que puedas ver por tí mismo si funciona para tu aplicación.

Ventajas de las aplicaciones web

Una aplicación web progresiva totalmente capaz debería proporcionar todas las siguientes ventajas al usuario.

Descubrible

El objetivo final es que las aplicaciones web tengan una mejor representación en los motores de búsqueda, sean más fáciles de exponer, catalogar y clasificar, y tengan metadatos utilizables por los navegadores para darles capacidades especiales.

Algunas de las capacidades ya han sido habilitadas en ciertas plataformas basadas en la web por tecnologías propietarias como Open Graph, que proporciona un formato para especificar metadatos similares en el bloque HTML <head> usando etiquetas <meta>.

El estándar web relevante aquí es el Web app manifest, que define las características de una aplicación tales como nombre, ícono, pantalla de inicio y los colores del tema en un archivo de manifiesto con formato JSON. Esto es para su uso en contextos como listas de aplicaciones y pantallas de inicio de dispositivos.

Instalable

Una parte fundamental de la experiencia de las aplicaciones web es que los usuarios tengan iconos de aplicaciones en su pantalla de inicio y puedan tocar para abrir las aplicaciones en su propio contenedor nativo que se siente bien integrado con la plataforma subyacente.

Las aplicaciones web modernas pueden tener esta sensación de aplicación nativa a través de las propiedades establecidas dentro del manifiesto de la aplicación web, y a través de una característica disponible en los modernos navegadores de teléfonos inteligentes llamada instalación de aplicaciones web.

Enlazable

Una de las características más poderosas de la web es la capacidad de enlazar una aplicación en una URL específica sin necesidad de una tienda de aplicaciones o un proceso de instalación complejo. Así es como siempre ha sido.

Independiente de la red

Las aplicaciones web modernas pueden funcionar cuando la red no es fiable, o incluso no existe. Las ideas básicas detrás de la independencia de la red son ser capaz de:

  • Revisar un sitio y obtener su contenido incluso si no hay una red disponible.
  • Navegar por cualquier tipo de contenido que el usuario haya visitado previamente al menos una vez, incluso en situaciones de mala conectividad.
  • Controlar lo que se le muestra al usuario en situaciones en las que no hay conectividad.

Esto se logra mediante una combinación de tecnologías: Service Workers para controlar las solicitudes de páginas (por ejemplo, almacenándolas fuera de línea), el Cache API para almacenar las respuestas a las solicitudes de red fuera de línea (muy útil para almacenar los activos del sitio) y las tecnologías de almacenamiento de datos del lado del cliente, como al API de almacenamiento Web e IndexedDB para almacenar los datos de las aplicaciones fuera de línea.

Soporte de mejora progresiva

Las aplicaciones web modernas pueden desarrollarse para proporcionar una experiencia excelente a los navegadores totalmente capaces, y una experiencia aceptable (aunque no tan brillante) a los navegadores menos capaces. Hemos estado haciendo esto durante años con las mejores prácticas como la mejora progresiva. Al utilizar la mejora progresiva, las PWAs son multi-navegadores. Esto significa que los desarrolladores deben tener en cuenta las diferencias en la implementación de algunas características y tecnologías de los PWA entre las distintas implementaciones de los navegadores.

Reenganchables

Una de las principales ventajas de las plataformas nativas es la facilidad con la que los usuarios pueden volver a participar en las actualizaciones y los nuevos contenidos, incluso cuando no están mirando la aplicación o utilizando sus dispositivos. Las  aplicaciones web modernas ahora también pueden hacer esto, utilizando nuevas tecnologías como los Service Workers para controlar las páginas, la API de Web Push para enviar actualizaciones directamente desde el servidor a la aplicación a través de un trabajador de servicio, y la API de Notificaciones para generar notificaciones del sistema que ayuden a captar a los usuarios cuando no estén utilizando activamente su navegador web.

Responsive

Las aplicaciones web sensibles utilizan tecnologías como media queries y Viewport para asegurarse de que sus UI se ajusten a cualquier factor de forma: ordenador de sobremesa, móvil, tableta o lo que venga después.

Seguridad

Screenshot showing a huge number of results upon searching for "Messenger" when trying to find Facebook Messenger. Which is the right one?

La plataforma web proporciona un mecanismo de entrega seguro que evita que se fisgonee y al mismo tiempo garantiza que el contenido no ha sido manipulado, siempre y cuando se aproveche el HTTPS y se desarrollen las aplicaciones teniendo en cuenta la seguridad.

También es fácil para los usuarios asegurarse de que están instalando la aplicación correcta, ya que su URL coincidirá con el dominio de su sitio. Esto es muy diferente de las aplicaciones de las tiendas de aplicaciones, que pueden tener varias aplicaciones con nombres similares, algunas de las cuales pueden incluso estar basadas en tu propio sitio, lo que sólo aumenta la confusión. Las aplicaciones web eliminan esa confusión y aseguran que los usuarios tengan la mejor experiencia posible.

Soporte de navegadores

Como se mencionaba anteriormente, PWAs no dependen de una API en particular, sino que utilizan diversas tecnologías para lograr el objetivo de ofrecer la mejor experiencia web posible.

El ingrediente clave para las PWAs es el soporte de Services workers. Afortunadamente, los Services workers son compatibles con los principales navegadores de escritorio y móviles

Otras características como Web App Manifest, Push, Notifications, y la funcionalidad Add to Home Screen tienen un ampio soporte también. Actualmente, Safari tiene un soporte limitado para Web App Manifest y Add to Home Screen y no tiene soporte para notificaciones push. Sin embargo, otros navegadores importantes son compatibles con todas estas características.

Algunas de estas API son experimentales, con la documentación todavía en borrador, pero ver historias de éxito como las de Flipkart y AliExpress debería convencerte de intentar implementar algunas de las características de PWA en tu aplicación web ya.

Sobre todo deberías seguir la regla de la mejora progresiva: usa las tecnologías que proporcionan tales mejoras sólo cuando están soportadas, pero que aún ofrecen la funcionalidad básica de tu aplicación si no lo está. De esta manera todo el mundo podrá utilizarla, pero aquellos con navegadores modernos se beneficiarán aún más de las características de PWA.

Una aplicación de ejemplo

En esta serie de artículos examinaremos el código fuente de un sitio web súper sencillo que contiene información sobre los juegos presentados a la categoría A-Frame en la competición js13kGames 2017. No tienes que pensar en cuál es el contenido real del sitio web, el punto principal es aprender a utilizar las características de PWA en tus propios proyectos.

Puedes ver esta aplicación en acción en línea, y el código fuente está disponible en GitHub. Examinaremos este código cuidadosamente en el transcurso de esta serie de artículos.

Por ahora, pasemos a la segunda parte de esta serie, donde veremos la estructura de nuestra aplicación de ejemplo.