Como ya hemos comentado en esta serie de artículos sobre las PWA, estas aplicaciones móviles utilizan las últimas tecnologías de los navegadores para ofrecer una experiencia de usuario similar a la de una aplicación nativa. Google, que ha sido uno de los mayores impulsores de las aplicaciones web progresivas, afirma que las PWA combinan lo mejor de las aplicaciones web y de las nativas.

Las principales ventajas de las PWA para el usuario son:

• No requieren instalación
• Están disponibles offline
• Consumen menos recursos que las nativas
• Se abren mediante un acceso directo en la pantalla de inicio del móvil, un enlace o un código QR
• Permite notificaciones push gracias a la geolocalización
• Se muestran a pantalla completa
• Pueden funcionar en segundo plano

La clave del éxito de las PWA reside en las tecnologías empleadas en su desarrollo. Con una combinación de lenguajes propios de los navegadores, por un lado, y de las páginas web, por otro, se obtiene mayor rendimiento, carga instantánea, interfaz amigable y funcionalidades offline.

Con todo ello se consigue una experiencia de usuario (UX) que busca generar mayor engagement y satisfacción que con las aplicaciones nativas. Al mismo tiempo, los costes de desarrollo y mantenimiento son menores para las empresas que las quieren implantar.

Tecnología al servicio de las PWA

Como híbrido entre aplicación nativa y aplicación web, en la tecnología de las PWA se puede diferenciar entre desarrollo app y desarrollo web.

Gracias a lo anterior, las PWA se pueden diseñar con un elevado grado de personalización, a medida de las necesidades de cada empresa. Por ejemplo, un negocio local puede tener como principal objetivo enviar notificaciones push a los clientes que se encuentren por la zona.
En otros casos, las empresas buscan una experiencia más completa en cuanto a funcionalidades o poder exportar a Google Play o App Store.

Offline first

Uno de los aspectos clave en el desarrollo de una PWA es el diseño de una estrategia offline first que consiga una experiencia de usuario lo más satisfactoria posible cuando no existe conexión a Internet o esta es de mala calidad.

El objetivo es que la primera vez que el usuario acceda a la aplicación, esta se guarde en el dispositivo móvil. De esta forma, cuando vuelva a abrir la app, ya sea en el navegador o mediante un acceso directo en su pantalla, esta se inicia como si realmente estuviese instalada.

Más adelante se destaca la función del Service Worker a la hora de mantener la aplicación funcional en caso de no tener conexión.

Desde el punto de vista técnico, esto se logra con una caché capaz de actualizarse cuando haya una nueva versión en Internet (y se tenga conexión), manteniendo guardada una versión actualizada de la app.

Service Worker

Otro aspecto clave es el trabajo en segundo plano, lo que se consigue con la tecnología Service Worker. Con el Service Worker, las aplicaciones pueden funcionar sin abrir el navegador y realizar operaciones avanzadas como en una aplicación nativa.

El service worker comienza a almacenar datos en la cache desde la primera vez que se instala en el navegador, al abrir la PWA. El registro del Service Worker se resume en añadir un simple ‘listener’ (componente que intercepta eventos) :


window.addEventListener('load', async () => {
if ('serviceWorker' in navigator) {
try {
await navigator.serviceWorker.register('./sw.js');
} catch (err) {
console.log('ServiceWorker registration failed', err);
}
}
});


Además, siempre que se tiene conexión se comprueban las posibles actualizaciones del Service Worker para mantenerlo a punto.

El Service Worker puede, haciendo uso de la cache, mantener en funcionamiento toda la aplicación o partes de la misma en caso de no tener conexión, dependiendo de la app.

En este tipo de diseños se debe implementar un “progressive enhancement” que compruebe las funcionalidades del dispositivo móvil en cada momento para sumar más características a la PWA. Algunos de los puntos de verificación son la conexión a Internet, el Bluetooth y el soporte para notificaciones push.

App Shell

Otro de los pilares de las PWA es el App Shell, gracias al cual se consigue que el usuario vea al instante el layout y la interfaz de la aplicación, sin tiempos de espera.

Esto se puede conseguir de dos maneras. La primera es con la caché mencionada anteriormente, donde se guardaría lo necesario para mostrar este App Shell. También existen algunas PWA que permiten una pequeña descarga inicial, que contiene el App Shell y otras posibles funcionalidades de la app para ser usadas sin conexión(como los mapas de Google Maps).

                         APP SHELL

Esta técnica de diseño, combinada con el desarrollo “offline first” y el Service Worker, mejora notablemente la experiencia de usuario y permite implementar tecnologías más avanzadas a medida que la PWA “aprende” de los dispositivos.

Sin duda, el futuro del marketing es móvil y, gracias al desarrollo de nuevas tecnologías, las Progressive Web Apps tienen ante sí un panorama más que prometedor.