Requisitos imprescindibles para implementar Progressive Web Apps

Una aplicación web progresiva (PWA por sus siglas en inglés Progressive Web App) permite que los usuarios continúen navegando una vez que están desconectados. Para ello se sirve de las páginas que ya ha visitado y de otra serie de requisitos que detallamos en este artículo.
3 min lectura
Desarrolladores / 09 enero 2020
Requisitos imprescindibles para implementar Progressive Web Apps
Requisitos imprescindibles para implementar Progressive Web Apps

BBVA API Market

Una aplicación web progresiva (PWA por sus siglas en inglés Progressive Web App) permite que los usuarios continúen navegando una vez que están desconectados. Para ello se sirve de las páginas que ya ha visitado y de otra serie de requisitos que detallamos en este artículo.

Las aplicaciones web progresivas combinan lo mejor de la web y las aplicaciones nativas. No requieren instalación, como los últimas, y cada vez son más potentes, ya que cargan más rápido y envían notificaciones relevantes. Por eso, es un terreno en el que medios de comunicación y empresas de diferentes sectores están cada día más interesados.

Una PWA, actualmente compatible con Google Chrome pero no con iOS, técnicamente debe reunir cuatro requisitos:

1.-Un sitio debe ser visitado dos veces con un intervalo de 5 minutos para calificar

En Google Chrome es necesario que los usuarios hayan visitado el sitio que aloja el PWA dos veces antes de que el navegador muestre el mensaje para instalar el PWA.

No es la forma más fiable de verificación, pero sí es una manera simple de determinar el interés del usuario. Es probable que este parámetro se sustituya por otro más acertado en el futuro, pero por ahora los desarrolladores de Google están contentos con esta medida.

2.- Conexión HTTPS segura válida

Al tener una conexión segura a la aplicación web progresiva, los usuarios pueden sentirse relativamente seguros permitiendo permisos al PWA. Dado que las solicitudes de red se enrutan a través de un script service worker, añadir https al servidor ayuda a mitigar ciertas vulnerabilidades. Este permite ejecutar código pesado en segundo plano y comunicarnos con ellos, de modo que una o varias tareas largas no bloqueen la interfaz de usuario.

Si bien este requisito podría centrarse principalmente en agregar seguridad, tener una conexión segura también ayuda a crear confianza con los usuarios. Además, puesto que los PWA son indexables por los motores de búsqueda, también tiene sentido servir a través de TLS,  protocolos criptográficos que proporcionan comunicaciones seguras por internet, ya que añaden una pequeña cantidad de beneficio SEO.

3.- JSON Manifest instalado válido

Al proporcionar un extracto de datos en formato JSON, es posible almacenar esta información en caché con la ayuda del service worker. Luego se usa la app shell (un modelo o patrón a la hora de crear las aplicaciones) para cargar las reglas CSS y así poder entregar una versión sin conexión con capacidades de interfaz de usuario completas.

Cada vez que un visitante carga una nueva página, el service worker ‘cacheará’ el extracto JSON y lo almacenará físicamente en la app shell. Este shell es un contenedor autónomo que tiene todas las hojas de estilo, scripts, imágenes, fuentes y salidas HTML necesarias para que un usuario pueda representar una página completa sin cargar nada más.

4.- Service Worker instalado

Como decíamos, el service worker es responsable de almacenar en caché todos los archivos, notificaciones push, actualización de contenido, manipulación de datos y mucho más.

Es importante entender que este script funciona independientemente de cualquier aplicación o sitio web que ya exista en el servidor web, trabajando con oyentes de eventos y comandos como “fetch”, que se asemeja a los comandos HTTP “Get / Post / Set”.

Al escuchar las solicitudes de red en el servidor, pero al estar ubicado como un archivo .js en el dispositivo del usuario, el service worker manipulará esas peticiones con respuestas apropiadas, dependiendo de si hay internet o no, permitiendo páginas sin conexión personalizadas.

Una vez que estos cuatro requisitos se implementen correctamente, se le pedirá a los usuarios de teléfonos Android y otros dispositivos compatibles que agregue el PWA a su pantalla de inicio, donde aparecerá un icono similar al de una aplicación regular, y se abrirá en un navegador.

En desarrollo constante

Los desarrolladores deben tener en cuenta que deben asegurarse de que la interfaz de usuario se asemeja a la existente en el site o aplicación, aunque tal vez prefieran desarrollar por completo una nueva interfaz de usuario para los usuarios de PWA. Esta libertad de elección es lo que ha llamado la atención a algunos desarrolladores interesados ​​en esta tendencia.

De momento las PWAs no están disponibles para iOs y solo son compatibles con Chrome sobre Android (además, sólo en versiones recientes del navegador). Sin duda, este es uno de sus grandes handicaps, pero teniendo en cuenta que Android representa el 85% del mercado de móviles se seguirán desarrollando y llegando a más gente.

En la página de Google destinada a las Progressive Web Apps aparecen varios ejemplos de aplicaciones reales y ofrecen abundante documentación.

¿Te interesan las APIs financieras? Descubre todas las que te ofrece BBVA

También podría interesarte