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

Qué es una Progressive Web App?

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. Tu puedes instalar una app nativa que funcionara offline, y los usuarios adoran presionar los iconos de su pantalla de inicio para acceder a sus aplicaciones favoritas, en lugar de estar navegando en un navegador.

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

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. Trabajar offline e instalar aplicaciones fue posible en el ecosistema Firefox OS hace algunos años.

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

Qué hace ser una aplicacion a PWA?

Como sugerimos arriba, PWA no son creadas con una sola tecnología. Ellas representan una nueva filosofia para construir aplicaciones web, involucrando algunos patrones especificos, 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 esta conoce 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. (Lighthouse es la más popular actualmente.) Implementando varias ventajas tecnologicas, podemos hacer una aplicación mas progresiva, así terminando con un alto puntaje de Lighthouse. Pero este 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ían ser:

  • Descubrible, asi el contenido podra se encontrado por los motores de buqueda.
  • Instalable, asi podra verse en la pantalla de inicio del dispositivo.
  • Enlazable, asi podras compartirla con solo enviar la direccion URL. 
  • Independiente de la red, asi podra funcionar sin internet o en una conexion lenta.
  • Progresiva, asi podra ser usable en navegadores viejos, pero completamente funcional en las ultimas versiones de los navegadores.
  • Re-engageable, asi se podran enviar notificaciones cuando sea que haya contenido nuevo disponible.
  • Responsive, asi podra ser usada en cualquier dispositivo con un navegador y una pantalla — telefonos moviles, tabletas, laptops, TVs, un refrigerador, etc.
  • Segura, asi la conexion entre tu y la app esta protegida contra terceros que intenten acceder a tus datos sensibles

Vale la pena hacer todo eso?

Absolutamente! con una cantidad relativamente pequeña de esfuerso podras implementar las funciones del nuclo PWA, los beneficios son grandes. Por ejemplo:

  • Una disminucion en el tiempo de carga despues que la app ha sido instalada, gracias a cachear con Service Workers, mientras guardamos precioso ancho de banda y tiempo.
  • La habilidad de actualizar solo el contenido que ha cambiado cuando una actualizacion este disponible. En contraste, con una app nativa, incluso con la mas lijera moficicacion puede obligar al usuario a descargar la entera aplicacion otra vez.
  • Se ve y se siente como que esta mas integrada como una app nativa — se ven los iconos en la pantalla de inicio, las apps pueden estar en 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. Given their profit increase, and the relatively low amount of work required for the conversion to PWAs, the advantage is clear.

Early stage emerging startups like couponmoto have also started using progressive web apps to drive more consumer engagement, showing that they can help small as well as big companies to (re-)engage users more effectively.

You can check the list at pwa.rocks for more examples. Particularly worth mentioning is the hnpwa.com page — this lists an example implementation of the Hacker News website (instead of the usual TodoMVC app), in which you can see the use of various front-end frameworks.

You can even generate PWAs online using the PWABuilder website.

For service worker- and push- specific information, be sure to check The Service Worker Cookbook, a collection of recipes using service workers in modern sites.

It's well worth trying out a PWA approach, so you can see for yourself if it works for your app.

Browser support

As mentioned before, PWAs don't depend on a single API, but rather using various technologies to achieve the goal of delivering the best web experience possible.

The key ingredient required for PWAs is service worker support. Thankfully service workers are now supported on all major browsers on desktop and mobile.

Other features such as Web App Manifest, Push, Notifications, and Add to Home Screen functionality have wide support too. Currently Safari has limited support for Web App Manifest and Add to Home Screen and no support for web push notifications. However, other major browsers support all these features.

Some of these APIs are experimental, with the documentation still in draft, but seeing success stories like those of Flipkart and AliExpress should convince you to try and implement some of the PWA features in your web app already.

Above all you should follow the progressive enhancement rule — use the technologies that provide such enhancements only where they are supported, but still offer the basic functionality of your app if it isn't. This way everybody will be able to use it, but those with modern browsers will benefit from PWA features even more.

An example application

In this series of articles we will examine the source code of a super simple website that lists information about games submitted to the A-Frame category in the js13kGames 2017 competition. You don't have to think about what the actual content on the website is — the main point is to learn how to use PWA features in your own projects.

You can find the online version at mdn.github.io/pwa-examples/js13kpwa (also see the source code), which we will be carefully explaining in the next few articles.

Now, let's move to the second part of this series, where we’ll be looking at the structure of our example app.

Etiquetas y colaboradores del documento

Colaboradores en esta página: santi324, mdnwebdocs-bot, chrisdavidmills, tw1ttt3r
Última actualización por: santi324,