Es posible que hayas oído hablar de las PWA o Progressive Web Apps, (en español algo así como aplicaciones web progresivas). Lo de progresivas es quizá lo más raro o que puede extrañar más, porque lo otro, web apps, parece como más intuitivo, aplicaciones web. Lo explicaré un poco después, de momento, digamos que una PWA es un intermedio entre la web y una app nativa en el móvil.
Es decir, de un lado estaría la web tradicional, que si se hace bien, hoy en día se verá bien desde un móvil, pero que no puede instalarse como tal en el móvil ni puede acceder a determinadas funcionalidades del teléfono. En el lado opuesto, una app nativa, que obviamente podrá instalarse en el teléfono y usar todas las funcionalidades del mismo, pero no es accesible desde la web o desde otro tipo de dispositivo. Las Progressive Web Apps nacen justo para cubrir esa zona intermedia y con la idea de tener lo mejor de los dos mundos.
Una PWA, es una web, se programa con las mismas tecnologías que el resto de webs hoy en día, pero es instalable y puede usar gran parte de las funcionalidades propias del dispositivo, como puede verse en What can PWA do today Notificaciones, NFC, vibración, geolocalización, etc, son solo algunas de las funcionalidades del teléfono a las que una PWA tendrá acceso y, como decía anteriormente, es instalable en el dispositivo, como se puede ver en la imagen con la PWA de nuestra web.
¿Si ya teníamos webs y apps nativas, para qué hacer PWA's?
Puede que suene un poco a meter más tecnologías distintas, a veces en este mundo tecnológico parece que estamos añadiendo más tecnologías por minuto que problemas hay a resolver, pero la realidad es que las PWA's cubren una necesidad real muy importante. Para muchas empresas es muy costoso mantener a la vez dos bases de código, una para web y otra para las aplicaciones nativas de los móviles (y en este caso muchas veces varias, una para iOS y otra para Android), y no necesitan en realidad utilizar funcionalidades muy específicas del teléfono.
Hasta que nacieron las Progressive Web Apps, la web estaba muy limitada en este sentido ya que una web no se comporta bien cuando no hay conectividad, o esta se va cortando, no había nada en la forma de hacer páginas web que permitiera a estas comportarse bien cuando el usuario perdía conexión con el teléfono o, simplemente, no la tenía de primeras (estando en un avión, por ejemplo).
¿Aplicaciones progresivas?
La P en PWA, viene de progresivas, y es porque de primeras se pensó en las PWA como en aplicaciones que mejorarían progresivamente en función de la tecnología disponible en el dispositivo. Es decir, la propia PWA se presenta de un modo si no hay cobertura o conexión, o si la pierde de forma intermitente, y de otro si tiene conexión o determinados servicios a su disposición. No solo influye en esto de ser progresivas la conexión, la idea es que la PWA se comporte de un modo si tiene acceso a geolocalización, por ejemplo, y de otro si no lo tiene disponible (bien porque el dispositivo no tiene GPS o porque el usuario no lo permite).
Los tres pilares en los que se fundamentan las PWA
Las PWA's se fundamentan en ser Capaces, Fiables e Instalables. Capaces por lo que hablábamos antes de poder utilizar la mayoría de las funcionalidades del dispositivo que, hasta antes de que existieran las PWA's, solo podían usarse a través de una App Nativa, hoy en día entre WebRTC, Notificaciones Push, Geolocalización, Acceso al NFC, es posible hacer aplicaciones muy complejas como PWA. Fiables porque están pensadas para poder usarse aunque no tengas cobertura o acceso a internet. Es verdad que, en este último punto, la mayoría de las PWA's tienen una funcionalidad muy básica sin acceso a Internet, pero lo mismo pasa con muchas Apps nativas.
Llegamos al último punto, Instalables. Hasta hace poco, la forma de instalar una PWA en un móvil era accediendo a la web a través de un navegador y, una vez el navegador detectaba que se trataba de una PWA, te daba la opción de instalarla en la pantalla de inicio. Desde hace tres años y Chrome 72, las PWA's pueden ofrecerse a través de Play Store como el resto de Apps, lo que hace que sean más fáciles de encontrar por parte de los usuarios. iOS es un poco más complicado que Android, para esto, y aunque visitando la web a través de Safari podremos instalar la PWA en un iPhone, para meterla en el App Store tendremos que usar un servicio externo que paquetice la PWA en una App, como PWABuilder.
¡Me interesa! ¿Cómo se hace una PWA?
Vale, ya tenemos claro que nos gusta esto de las PWA's, ahora, cómo convertimos nuestra web, o ¿cómo hacemos una PWA de cero?
Para que una web sea reconocida como una PWA necesita, fundamentalmente, dos cosas. Por un lado un manifiesto, un fichero json, que describe cómo se comporta la web una vez instalada en un dispositivo. El Web Manifest, este manifiesto, entre otras cosas tendrá información de los iconos, nombres a mostrar en la pantalla de inicio, cosas así.
La segunda cosa que necesita una PWA es un Service Worker, un Javascript que controlará el funcionamiento de la PWA cuando no hay conexión a Internet, entre otras cosas. Para conseguir esto, el Service Worker almacena en caché local parte o la totalidad de los contenidos que va pidiendo a la página en los momentos en que tiene conexión. La definición de estos procesos es lo que permite que la PWA sea progresiva, como dijimos, que funcione mejor o peor en función de los recursos disponibles.
Por último, pero esto ya casi hoy en día se da por sentado, las PWA's necesitan que todos los accesos sean por https. Como explicamos en otro artículo del blog, hoy en día es muy fácil hacer que el acceso a nuestras páginas sea seguro.
¡Hasta aquí el post!, como siempre, cualquier pregunta, duda o sugerencia contáctanos.