Qué son la PWA y para qué sirven?

Las PWA o Progressive Web Applications son aplicaciones web (en buenas cuentas un sitio web) pensadas (originalmente) para ofrecer a un visitante/usuario de dispositivos móviles una experiencia cercana a la que obtendría con una app nativa, sin tener que pasar por Android Studio ni XCode, o publicar en las tiendas de aplicaciones.
Suena bien? Es porque son una muy buena idea y vale la pena conocerlas un poco más.

Por ejemplo, una PWA:

  • Preserva gran parte de su funcionalidad (o toda) incluso offline
  • Los recursos estáticos se cargan instantáneamente
  • Se puede quitar el marco y barra de direcciones del browser para disponer de toda la pantalla
  • Se accede desde un ícono en el escritorio
  • Preserva el estado entre ejecuciones
  • Establecen (pero se puede revocar) afinidad de links, de manera que cuando pinches links a ese sitio se abran en la PWA
  • Mediante tecnologías como web-push notifications y el acceso a recursos locales como ubicación y cámara, proveen un nivel de interacción que trasciende al sitio web propiamente tal

Todo lo anterior utilizando el browser y evitando así instalar un seudobrowser propio que es peso muerto.

 


Qué ventajas tienen

Si bien tienen limitaciones con respecto a aplicaciones nativas instaladas via Play Store (por ejemplo el uso de bluetooth, por nombrar uno), tienen algunas ventajas:

  • Abordan la resistencia en aumento que la gente siente a la hora de instalar otra aplicación más
  • Utilizan la GUI del browser, luego no necesitas almacenar, en el teléfono, más que los datos en caché.
  • Tienen un ámbito de permisos mucho más limitado que las apps nativas, muchas de las cuales no hacen nada que no puedas hacer en el browser pero al instalarse en el teléfono pueden tener acceso a tus contactos, llamadas y archivos (la gente suele aceptar los permisos sin mirarlos siquiera)
  • Es trivial convertir un sitio web en una PWA, vs la curva de aprendizaje necesaria para desarrollar apps nativas o generarlas con React Native o Nativescript (u otros generadores/frameworks)
  • No hace falta pasar por un proceso de revisión y postulación via Play Store, justamente porque el ámbito de permisos limitado acota los posibles vectores de ataque de apps maliciosas (acota, no elimina)

Puedes probar PWAs que ha sustituido exitosamente a sus versiones nativas por ejemplo en Twitter Mobile, o Instagram (pero sólo lo ofrece con user agents móviles)


Qué browsers las soportan?

El diálogo de “agregar al escritorio” a.k.a. beforeinstallprompt tiene soporte de navegadores móviles –en Android– como Chrome, Firefox, Opera, Samsung Browser (gran browser, lo recomiendo)

Además, si bien partieron como una solución enfocada a la experiencia móvil, en Chrome 70 se lanzó para Windows 10 el soporte para instalar PWAs en escritorio. Esto fue paulatinamente incorporado en otros sistemas operativos hasta alcanzar cobertura completa en Chrome 73. De la misma manera, en Windows 10 Microsoft Edge las soporta y hasta lista PWA en el Microsoft Store.


Cómo se hace una PWA?

Cuando se cumplen ciertos requisitos, un sitio web ofrece el diálogo para ser instalado (o bien aparece la opción en la barra de direcciones, como viste en escritorio). Esos requisitos son:

1.- incluir un manifiesto (manifest.json) en el HTML:

En el cual deben existir al menos las entradas:

  • name o short_name (basta con una, se puede poner ambas)
  • icons (al menos los íconos de 192px y 512px. Se puede añadir más)
  • start_url (e.g. /index.html)
  • display (debe ser fullscreenstandalone, o minimal-ui)

2.- Debe ser ofrecida via https

3.- Específicamente en Chrome, también está el requisito de registrar un ServiceWorker que maneje el evento Fetch.

Esto es lo que permite cachear el sitio mediante reglas explícitas (en vez de headers de expiración) y ofrecer instantaneidad y funcionalidad offline en visitas posteriores. Para esto, si bien los serviceworkers requieren sintonía fina, hay herramientas como Workbox que facilitan su configuración y te dejan más que bien encaminado

Puedes seguir este tutorial para hacer tu primera PWA


Desafíos en UX/UI

Para que la aplicación -que corre en un browser- se sienta nativa, no es elegante preservar los controles del browser:

Resultado de imagen para pwa fullscreen vs standalone vs minimal

Fuente de la Imagen en Stack Overflow

 

Cuando los quitamos (via display: fullscreen) perdemos por ejemplo el botón de retroceder, con el riesgo de dejar al usuario atrapado en una pantalla. En ese escenario es importante -por ejemplo- que la PWA tenga un buen menú de navegación.

Otra consideración: para que la App se sienta nativa es bueno adoptar un lenguaje visual asimilable a una app móvil, cosa que viéndola el usuario sepa de entrada qué hace cada cosa: el menú sandwich abre un sidebar, el botón redondo añade/crea algo, y así.

Google ha cultivado un lenguaje visual en sus distintas apps, por lo que acercándonos a éste con Materialize CSS, o frameworks visuales que lo implementan, como Vuetify, se puede ahorrar mucho camino y no arruinar todo con una PWA que parezca Geocities.

Otros paradigmas a tener en cuenta son por ejemplo

  1. la estructura App Shell para que tu página cargue lo mínimo al comienzo y luego vaya completando el contenido, cosa de no quedar en blanco esperando que descargue el banner animado de 2MB.
  2. el diseño responsivo para modificar la diagramación acorde a la resolución. La app no se verá igual en escritorio, tablet o teléfono pero gracias a CSS3 media queries puedes reestructurar el contenido aprovechando el espacio disponible sin que los párrafos se salgan hacia los costados.

Soporte en iOS: su principal desventaja

Lamentablemente, en iOS Safari no existe el diálogo de “agregar al escritorio” (pero se puede hacer igual, si abres el menú, pero teniendo en cuenta que la función está en lugares distintos si es iPad vs iPhone).

07fig18.jpg

 

Fuente de la imagen: Informit.com

 

Tampoco hay soporte para notificaciones push, más que nada porque Apple maneja todo con Apple Push Notification Service (APNS) y en cambio el estándar webpush implica permitir que otro proveedor (Firebase, Onesignal o el mismo dueño del sitio web que instales) las maneje.

Hay otros problemas (algunos manejables, todos frustrantes) en PWAs en iOS en general. Esperemos que en el mediano plazo mejoren ese enfoque, por el bien de todos.

¿No sirve usar Chrome en iOS? No. Los third party browsers de iOS no son, como en Android, apps independientes, sino cáscaras que delegan en Safari con los mismos impedimentos.


Alguna Otra Desventaja?

Hay muchas cosas que una PWA no puede hacer, o bien es ineficiente ofrecerlas en un browser.

Hoy en día en entornos de escritorio se puede hacer casi de todo en el browser pero ¿Es eficiente? Por poner un ejemplo las aplicaciones de dibujo vectorial, que en browsers de escritorio son utilizables dentro de lo posible (Vector Paint, SVG Editor), ofrecen una funcionalidad limitada si las comparamos con Inkscape o Illustrator.

Editores de código online como GitPod o Cloud9 tampoco pueden ofrecer lo que ofrece Visual Studio Code, Atom o los productos de Jetbrains.

Animaciones web 3D avanzadas via WebGL (como las que se pueden hacer en ThreeJS) tienen que hacer algunos malabares para que el browser se vea tan fluido como una app nativa que accede a los shaders de la tarjeta de video.

Si llevamos todos esos casos al entorno móvil, en donde además tienes que manejarte con menos pantalla, teclado pequeño (con autocorrector entrometido a veces) y reemplazando el mouse con los dedos… en realidad no hay cómo competir con una app nativa.

Lo importante es que usando para cada propósito la herramienta correcta no es necesario hacerlo todo. Para leer noticias, compartir fotos y darle like a los posts de tu ex novia una PWA está muy bien.

 


Webviews

Dado que el caché via Service Workers, y el look & feel en pantalla completa funcionan transversalmente en Android e iOS , una posible salida a las limitaciones de PWA en este último es combinar aplicaciones nativas con PWA.

En este enfoque la app nativa es una cáscara que contiene un webview (lo cual es, como quien dice, un iframe). Con esto la cáscara puede encargarse de las notificaciones via APNS y delegar todo o casi todo lo demás a la PWA que se está mostrando en el webview.

No es la panacea. Los webviews en iOS tienen comportamientos distintos a Safari en cuanto a uso de memoria, acceso a la cámara via WebRTC, y más.