Por qué las aplicaciones web progresivas son el futuro del desarrollo web

“La clave es aceptar la disrupción y el cambio temprano. No reaccione a esto décadas después. No se puede luchar contra la innovación ". - Ryan Kavanaugh

Últimamente, ha habido muchos rumores en torno a las PWA y muchos afirman que es el futuro del desarrollo web, especialmente en términos de dispositivos móviles. En esencia, una aplicación web progresiva (PWA) es simplemente una aplicación web que utiliza técnicas web modernas para ofrecer a los usuarios una experiencia similar a una aplicación nativa. Estas son aplicaciones web con mejoras progresivas para implementar funciones como almacenamiento en caché, sincronización en segundo plano y notificaciones push.

Aunque las PWA existen desde hace más de dos años, la respuesta es bastante decepcionante. Pocos grandes jugadores han adoptado esta filosofía, pero la mayoría no la ha adoptado mucho. Chrome y Mozilla son quizás los mejores navegadores para probar sus PWA, ya que Apple aún no se ha involucrado en esto.

PWA - ¿Es realmente bueno?

Por un lado, tenemos aplicaciones nativas que sin duda son rápidas y eficientes en la mayoría de los casos. Por otro lado, hay sitios web que son un poco lentos y con los problemas de conectividad, solo empeora.

El Proyecto de páginas móviles aceleradas (AMP) encabezado por Twitter y Google se lanzó en 2016 para resolver solo esos problemas de conexión lenta. Las PWA funcionan perfectamente en todos los escenarios posibles. Con una buena conexión, nunca hay problema. El problema es cuando no tenemos conexión y nos recibe con la página de error.

Pero esto puede volverse más molesto si tenemos una conexión lenta. La página parece estar cargando y todo lo que vemos es una pantalla en blanco. Solo esperamos, esperamos y esperamos, pero la página parece no cargarse nunca. Aquí es donde PWA viene a nuestro rescate. La mejor parte de las PWA: obtienes la mejor experiencia de usuario posible con conectividad lenta y sin conectividad (sí, lo leíste bien ...).

Por qué tiene sentido usar PWA

Según un estudio, un usuario promedio pasa el 80% de su tiempo total en aplicaciones en solo tres de sus aplicaciones (para mí es Chrome, Quora y Medium).

Las otras aplicaciones simplemente permanecen inactivas durante la mayor parte de este tiempo, lo que consume una parte preciosa de la memoria. Además, cuesta alrededor de diez veces desarrollar una aplicación en lugar de crear un sitio web para la misma. El costo puede ser mucho más alto si planea desarrollar y mantener bases de código separadas para diferentes plataformas como Android, iOS y la web.

Funciones de la aplicación nativa que las PWA pueden usar

  • Notificaciones push
  • Pantalla completa
  • Trabajo sin conexión
  • La pantalla de bienvenida es compatible, lo que le da una sensación más similar a la de una aplicación.

Las PWA pueden hacer uso de muchas más funciones de este tipo. Los puntos anteriores son solo para darle una pista de lo que las PWA son capaces de hacer. Sin embargo, hay algunas características tradicionales que solo disfrutan las aplicaciones nativas a partir de ahora.

Funciones de aplicaciones nativas que las PWA no pueden usar a partir de ahora

  • Acceso nulo o muy restrictivo a diferentes sensores de hardware
  • Alarmas
  • Acceso a la agenda telefónica
  • Modificación de la configuración del sistema

Las PWA están evolucionando bastante rápido y podemos esperar que estas funciones entren en acción muy pronto.

Dos componentes principales de una PWA

Manifiesto de la aplicación

Es un archivo JSON que define el ícono de una aplicación, cómo iniciar la aplicación (independiente, en pantalla completa, en el navegador, etc.) y cualquier información relacionada. Está ubicado en la raíz de su aplicación. Se requiere un enlace a este archivo en cada página que se deba procesar.

Se agrega en la sección de cabecera de la página HTML:

Service Worker

Service worker is where most of the magic of happens. Its nothing but JavaScript code that acts as programmable proxies solely responsible for intercepting and responding to network requests. Since it acts as a proxy and can be easily programmable, the application must be served over HTTPS to keep the data secure.

Its worth noting that the service worker caches the actual response, including all HTTP headers, rather than just the response data. This means that your application can simply make network requests and process the response without any specific code to handle the cache.

How do I get started?

The best thing about getting started is that it’s quite easier than it seems. In fact, it’s very much possible to take an existing site and convert into a PWA. I highly suggest you watch this if you intend to develop a PWA.

Thanks for reading! If you liked it, please support by clapping and sharing the post.