por Amenadiel
Con este artículo pretendo empezar una serie. No una serie como Lost, claro, porque aunque Kate estaba más que bien, sería complicado convivir con un coreano celoso, un niño que se teletransporta, un rockero adicto, un pelado que se sanó como Quenita y un iraquí encabronado. Esta serie será sobre software y tendrá el prefijo LdW (no SdW). Por eso hoy, en Locademia de Software, te presentamos ¿Qué una PWA? (no PlW).
El siguiente artículo está basado en una respuesta que di en Stack Overflow que como nadie la pescó, decidí amononar con un poco de surrealismo trágico (es como el realismo mágico pero después de ser raptado por los ovnis).
Idea Millonaria: Quiero hacer una aplicación
No se imaginan cuantos clientes golpean mi puerta con una idea millonaria. Otros golpean la puerta porque les debo proyectos que ya cobré hace un mes. Ilusos. Pero los de la idea millonaria me salen con cosas como
En realidad en mi cabeza pienso:
«No sé lo suficiente de Objective-C ni Swift, me carga X-Code, me carga tener que pagar por la membresía apple developers».
Pero hablo en serio, la mitad o más de las apps que hay en Play Store y App Store no hacen nada que no se pueda hacer via web. El paradigma que hay que vencer para inclinar la balanza es que un sitio web no ofrece la experiencia de una app nativa. Y entonces, querido lector, PUM! Nacieron las PWA.
¿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:
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:
¿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:
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:
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
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).
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.
Entonces, se cobra 500 mangos por una PWA?
Depende de los requerimientos, pero en el ejemplo de arriba, sólo por escuchar la idea ya perdí más neuronas que las que se pueden comprar con esa plata.
Espero que les haya gustado el primer capítulo de Locademia de Software, en lugar en donde todos pueden Ayudar, Aprender y Enseñar. Epa! Ese era el lema de Asisteknia.
Con este artículo pretendo empezar una serie. No una serie como Lost, claro, porque aunque Kate estaba más que bien, sería complicado convivir con un coreano celoso, un niño que se teletransporta, un rockero adicto, un pelado que se sanó como Quenita y un iraquí encabronado. Esta serie será sobre software y tendrá el prefijo LdW (no SdW). Por eso hoy, en Locademia de Software, te presentamos ¿Qué una PWA? (no PlW).
El siguiente artículo está basado en una respuesta que di en Stack Overflow que como nadie la pescó, decidí amononar con un poco de surrealismo trágico (es como el realismo mágico pero después de ser raptado por los ovnis).
Idea Millonaria: Quiero hacer una aplicación
No se imaginan cuantos clientes golpean mi puerta con una idea millonaria. Otros golpean la puerta porque les debo proyectos que ya cobré hace un mes. Ilusos. Pero los de la idea millonaria me salen con cosas como
- Quiero una aplicación nativa (no React Native porque me dicen que tiene limitaciones)
- Te permite escribir mensajes como Twitter pero se navega como instagram para subir videos como youtube a través del bluetooth de la dashcam de tu manos libres
- Tengo 500 lucas
En realidad en mi cabeza pienso:
«No sé lo suficiente de Objective-C ni Swift, me carga X-Code, me carga tener que pagar por la membresía apple developers».
Pero hablo en serio, la mitad o más de las apps que hay en Play Store y App Store no hacen nada que no se pueda hacer via web. El paradigma que hay que vencer para inclinar la balanza es que un sitio web no ofrece la experiencia de una app nativa. Y entonces, querido lector, PUM! Nacieron las PWA.
¿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
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).
¿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:
HTML:
<link rel=»manifest» href=»/manifest.json»>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 fullscreen, standalone, o minimal-ui)
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:
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
- 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.
- 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).
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.
Entonces, se cobra 500 mangos por una PWA?
Depende de los requerimientos, pero en el ejemplo de arriba, sólo por escuchar la idea ya perdí más neuronas que las que se pueden comprar con esa plata.
Espero que les haya gustado el primer capítulo de Locademia de Software, en lugar en donde todos pueden Ayudar, Aprender y Enseñar. Epa! Ese era el lema de Asisteknia.
Acerca del autor:
Amenadiel, fundador de Asisteknia y Chilehardware, chw.net, también conocido como FFF
Amenadiel, fundador de Asisteknia y Chilehardware, chw.net, también conocido como FFF
