Hacer de Menéame una PWA

Cada vez, más los navegadores van incorporando funcionalidades que abren un abanico de posibilidades a la hora de dar servicio a los usuarios. En esta sugerencia, intentaré explicar en qué consiste una PWA y qué ventajas tiene que no tenga una web normal.

Desde hace un tiempo, se habla de una característica que están añadiendo los navegadores llamada Service Workers. Estos SW son procesos ejecutados en paralelo que hacen de proxy entre el servidor de la aplicación web y el navegador del ususario. Esto quiere decir que toda petición http hecha desde el navegador es interceptada por el SW antes de que llegue al servidor. Esto permite que se pueda gestionar la respuesta recibida. Por ejemplo, una petición intercepatada podría provocar que el SW recogiese la respuesta del servidor y la cachease para que la siguiente vez que se hiciese la misma petición se respondiese con lo cacheado anteriormente. Claramente hoy en día los navegadores ya cachean contenido, pero no se tiene control total sobre lo cacheado. En el caso de los SW el control es total y se podría, por ejemplo dar respuestas incluso cuando el navegador no tiene conexión.

Además, los navegadores tienen numerosos recursos para almacenar datos, como IndexedDB, una pequeña base de datos no relacional donde se podría, por ejemplo alamcenar los datos de un usuario para entregarle contenido específico a medida de sus intereses y gustos (tener en cuenta que esto no es epsecífico de los SW).

Otro punto fuerte de los SW son las notificaiones PUSH, que pueden enviarse incluso si el navegador no está en primer plano, ya que el SW segue funcionando incluso en ese escenario.

Una vez introducido lo que es un Service Worker y describir alguna de las posibilidades que ofrece, la pregunta siguiente es en qué consite una PWA.

Una PWA es una aplicación web que utiliza un SW para poder entregar el contenido al usuario de una manera mucho más rápida. El primer paso en este tipo de aplicaciones es crear una app shell, consistente en una carcasa estática que pueda valer para cualquier url de un site (suele ser el conjunto de cabecera más pie y todo lo que a vista de usuario es igual en todo el site). La idea es que dicha carcasa esté cacheada en el navegador gracias al SW y que cada vez que se haga una petición http a una url, el Service Worker tome dicha carcasa de su almacén de contenido cacheado y sólo tenga que hacer una petición de datos al servidor para crear el contenido en el interior de la app shell y así generar la página entera que se entregará al navegador. Por supuesto, la respuesta a esta petición de datos también puede ser cacheada para tenerla disponible en el dispositivo cliente y no tener que volver a pedirla si esta no ha cambiado.

En este caso, la respuesta que daría el servidor ya no sería una página en html completa, podría ser un json con los datos justos y necesarios para construir el contenido, que sería mucho más ligero, y por tanto más efectivo a la hora de transportarlo por la red.

Hay un debate donde se discute si las PWAs pueden sustituir a las APPs nativas, ya que los navegadores y todo el ecosistema que forma el mundo web es cada vez más completo, versátil y accesible. En el caso de las PWA, si pudiesen hacer todo lo que puede hacer una aplicación nativa, tendría bastantes ventajas, pero de momento se me ocurren 2 esenciales. La primera es que no necesitan instalarse, solo se instala el SW y lo hace de manera transparente para el usuario, además, gracias a un fichero manifest.json, se puede añadir un icono en el escritorio del dispositivo cliente que al pulsar abriría la PWA sobre un navegador, pero se vería como una app (sin barra de navegación, sin menu desplegable de navegador, en definitiva, sin nada que perteneza a la interfaz de la app que es el navegador). La segunda ventaja, es que como los SW deberían funcionar igual en todos los dispositivos sea cual sea el SO, ya que se ejecutan sobre un navegador web, no habria que dar soporte a las 2 versiones necesarias para dar servicio a los 2 sistemas operativos más usados (Android e IOS), ya que la misma PWA funcionaría igual.

Puede dar la sensación que esto de las PWAs está destinado sólo a los dispositivos móviles, pero no es así, los SW se pueden implementar en versiones Desktop de las webs. Por tanto pueden cubrir todo el espectro de posibles dispositivos.

Ejemplos de PWA pueden ser los siguientes:

mobile.twitter.com

pwa.elmundo.es/

Muchas gracias por vuestra atención.

Un saludo a todos.