Pro­gre­s­si­ve web apps: ¿promesa o hype?

Las apli­ca­cio­nes web pro­gre­si­vas o pro­gre­s­si­ve web apps (PWA) son el nuevo fenómeno en el paisaje de las apli­ca­cio­nes móviles. Una PWA aúna ca­ra­c­te­rí­s­ti­cas de una página web con las pre­s­ta­cio­nes de una apli­ca­ción nativa, lo que permite que funcione en la misma medida como página web y como apli­ca­ción móvil sin depender del sistema operativo.

Ahora bien, ¿pueden las apli­ca­cio­nes pro­gre­si­vas rivalizar realmente con las co­n­so­li­da­das apli­ca­cio­nes nativas? Y, ¿qué es lo que hace que estas apli­ca­cio­nes web sean pro­gre­si­vas a, di­fe­re­n­ciá­n­do­las del resto? Sigue leyendo para conocer cómo funcionan las PWA y qué las desmarca de otros formatos, además de enterarte de sus ventajas e in­co­n­ve­nie­n­tes.

El término hace re­fe­re­n­cia a un novedoso método de de­sa­rro­llo de apli­ca­cio­nes que alberga pro­me­te­do­ras po­si­bi­li­da­des y que continúa el de­sa­rro­llo del formato de apli­ca­ción web ya existente. El padre co­n­ce­p­tual de este nuevo concepto es, sobre todo, Google, por lo que no extraña que, hasta ahora, el diseño de las PWA solo haya tenido en cuenta el propio sistema operativo Android, mientras que en los di­s­po­si­ti­vos con iOS de la rival Apple aún no funcionan del todo bien. Aunque se encuentra aún en una fase temprana de su de­sa­rro­llo, lo que impide que esta te­c­no­lo­gía pueda desplegar todo su potencial, cabe prever que Google invierta en su futuro de­sa­rro­llo. Esto hace probable que las pro­gre­s­si­ve web apps puedan seguir op­ti­mi­zá­n­do­se. A co­n­ti­nua­ción ana­li­za­mos los cuatro aspectos que definen ese­n­cia­l­me­n­te a una apli­ca­ción web pro­gre­si­va.

Al en­co­n­trar­se aún en pleno de­sa­rro­llo, hoy solo se puede aclarar el término de una forma apro­xi­ma­da. No obstante, se puede co­n­si­de­rar la es­tru­c­tu­ra fu­n­da­me­n­tal como asentada. Una PWA es accesible en Internet con un URL y se ejecuta en el navegador, lo que hace posible que funcione en di­fe­re­n­tes sistemas ope­ra­ti­vos y no dependa de la tienda de apli­ca­cio­nes ni requiera una in­s­ta­la­ción.

A di­fe­re­n­cia de una apli­ca­ción web al uso, sin embargo, también se puede ejecutar sin conexión. Para ello solo hay que anclar un vínculo al URL co­rre­s­po­n­die­n­te en la pantalla de inicio del di­s­po­si­ti­vo móvil, a través del cual puede accederse có­mo­da­me­n­te a la apli­ca­ción, incluso con una débil o nula conexión a Internet (sería necesario, en este caso, disponer de una memoria caché offline en el navegador). Cuando se abre, la apli­ca­ción pro­gre­si­va se parece más a una apli­ca­ción nativa que a una apli­ca­ción web y, gracias a su diseño re­s­po­n­si­vo, se adapta sin problemas al tamaño de la pantalla en la cual se ejecuta.

Podemos ima­gi­nar­nos una PWA como una apli­ca­ción web re­s­po­n­si­va con el aspecto de una apli­ca­ción nativa. Esta apli­ca­ción pro­gre­si­va puede utilizar funciones nativas del terminal, como la cámara, el micrófono, la geo­lo­ca­li­za­ción o las no­ti­fi­ca­cio­nes push e in­te­grar­las en el programa. Para ello, la apli­ca­ción comprueba la co­m­pa­ti­bi­li­dad tanto del navegador que se utiliza como del terminal mismo. También el look and feel de una pro­gre­s­si­ve web app (respuesta ágil al deslizar el dedo por la pantalla, etc.) es similar al de una apli­ca­ción nativa en cualquier tablet o sma­r­t­pho­ne. Por otro lado, abrir una PWA online conlleva la ventaja de acceder siempre a la versión más ac­tua­li­za­da de la apli­ca­ción, lo que la di­fe­re­n­cia de las apli­ca­cio­nes nativas, que han de ser ac­tua­li­za­das por el usuario. Tan pronto como una PWA se conecta a su servidor, se comprueba si es necesario ac­tua­li­zar­la. Otra ventaja de las apli­ca­cio­nes pro­gre­si­vas frente a las nativas es el menor trabajo de pro­gra­ma­ción que requiere su de­sa­rro­llo por ser al mismo tiempo una página web y una apli­ca­ción in­de­pe­n­die­n­te de pla­ta­fo­r­ma. Esto reduce los costes de de­sa­rro­llo en gran medida, aun para una PWA que muestra un re­n­di­mie­n­to equi­pa­ra­ble­me­n­te sa­ti­s­fa­c­to­rio en muchos es­ce­na­rios. A esto se añaden las escasas ne­ce­si­da­des de memoria en el di­s­po­si­ti­vo de una pro­gre­s­si­ve web app, aunque esto depende, en última instancia, del tamaño de la caché offline del terminal. Dicho esto, cabe mencionar que las apli­ca­cio­nes web y las páginas web móviles y re­s­po­n­si­vas, estas últimas con algunos límites, ya ofrecen algunas de estas funciones. Entonces, ¿qué tienen las apli­ca­cio­nes web pro­gre­si­vas que no tengan las web apps clásicas?

Las apli­ca­cio­nes web ya funcionan sin in­s­ta­la­ción di­re­c­ta­me­n­te en el navegador en di­fe­re­n­tes sistemas ope­ra­ti­vos móviles como Android, iOS y Windows Phone. Así que, el principio de las pro­gre­s­si­ve web apps no se puede decir que sea nuevo, aunque sí ese­n­cia­l­me­n­te más madurado que en el caso de las web apps tra­di­cio­na­les. Así, el abanico de funciones de una PWA se ajusta al marco en que se ejecuta. Esto significa que, aun en el caso que los usuarios, sus te­r­mi­na­les y/o na­ve­ga­do­res no sean co­m­pa­ti­bles con todas las pre­s­ta­cio­nes, pueden usarlas, si bien de forma reducida.

Veámoslo con este ejemplo: una apli­ca­ción pro­gre­si­va para subir fotos a una pla­ta­fo­r­ma online autoriza el uso de una cámara, de forma que los usuarios puedan crear y cargar las fotos di­re­c­ta­me­n­te en la apli­ca­ción. Sin embargo, no todos los na­ve­ga­do­res y te­r­mi­na­les soportan té­c­ni­ca­me­n­te esta función, lo que lleva a la apli­ca­ción a comprobar, tan pronto como se inicia en un navegador, si hay una cámara conectada y si esta cuenta con el soporte de la apli­ca­ción pro­gre­si­va y del navegador. Si no es así, la función de cámara no se puede utilizar, pero sí todas las que sean co­m­pa­ti­bles. En este caso, si la cámara no es co­m­pa­ti­ble con la PWA, la función de carga de la PWA pe­r­mi­ti­ría subir las fotos que se deseen desde el sma­r­t­pho­ne.

En de­fi­ni­ti­va, estas apli­ca­cio­nes son pro­gre­si­vas en la medida en que son eje­cu­ta­bles en cualquier navegador, ajustando sus funciones al hardware di­s­po­ni­ble y a las ca­ra­c­te­rí­s­ti­cas de cada navegador, lo que lleva a concluir que el mejor o menor re­n­di­mie­n­to de una PWA depende del mayor o menor potencial del navegador y el terminal uti­li­za­dos.

Además de la apli­ca­ción web, con la ya veterana apli­ca­ción híbrida se cuenta con un formato adicional que se apropia de algunas ca­ra­c­te­rí­s­ti­cas de las apli­ca­cio­nes nativas y supera algunas de sus carencias. Una apli­ca­ción híbrida, de forma similar a una PWA, puede ser de­sa­rro­lla­da para di­fe­re­n­tes sistemas ope­ra­ti­vos móviles con un equi­pa­ra­ble escaso esfuerzo, pero las híbridas parten de un concepto diferente, ya que se integran en sistemas Android y iOs mediante in­s­ta­la­ción, imitando de esta forma el fu­n­cio­na­mie­n­to de las nativas, lo que conlleva tanto ventajas como in­co­n­ve­nie­n­tes. Además de su sencillo de­sa­rro­llo, la in­te­gra­ción de las apli­ca­cio­nes híbridas en el sistema operativo mediante in­s­ta­la­ción re­pre­se­n­ta un aspecto positivo esencial, pues de esta forma pueden recurrir a más funciones nativas del terminal que las apli­ca­cio­nes web (pro­gre­si­vas), aunque en menor grado que las apli­ca­cio­nes nativas. No obstante, la in­s­ta­la­ción también conlleva de­s­ve­n­ta­jas, y es que, además de depender de cada pla­ta­fo­r­ma, las apli­ca­cio­nes híbridas no pueden probarse tan fá­ci­l­me­n­te como permite el formato web app. E incluso cuando el de­sa­rro­llo para un solo sistema operativo es mucho más sencillo que en las apli­ca­cio­nes nativas, en última instancia conlleva mucho más trabajo de pro­gra­ma­ción que en el caso de las apli­ca­cio­nes pro­gre­si­vas, pues en el de­sa­rro­llo de una PWA no se tienen que llevar a cabo mo­di­fi­ca­cio­nes para Android y iOS. En su lugar, es el estudio de la co­m­pa­ti­bi­li­dad del hardware y el navegador el que tiene la última palabra.

Las apli­ca­cio­nes pro­gre­si­vas se basan en es­tá­n­da­res web abiertos y están escritas pri­n­ci­pa­l­me­n­te, como una apli­ca­ción web co­n­ve­n­cio­nal, en HTML, CSS y Ja­va­S­cri­pt. Además, son ex­tre­ma­da­me­n­te flexibles y adaptan sus funciones al marco de su ejecución. La capacidad exacta de una PWA depende siempre del navegador y del terminal en los que se ejecute, aunque en parte también del sistema operativo. Ahora bien, ¿qué te­c­no­lo­gías utiliza una pro­gre­s­si­ve web app?

Service worker

Una novedad de las apli­ca­cio­nes pro­gre­si­vas es la uti­li­za­ción del service worker, fruto del de­sa­rro­llo del web worker, y que se ejecuta como Ja­va­S­cri­pt en un segundo plano en el navegador (como un thread in­de­pe­n­die­n­te de la página web). La primera vez que se abre la in­s­ta­la­ción, el servidor de la PWA carga e instala el service worker. Una vez hecho esto, el service worker está listo para funcionar cada vez que se vuelve a iniciar la apli­ca­ción y se le informa de cada petición de red en el dominio co­rre­s­po­n­die­n­te. Esto solo funciona, eso sí, si se utiliza HTTPS. De lo contrario, se está arrie­s­ga­n­do la seguridad en sumo grado.   El service worker y su caché se guardan en el navegador utilizado, siempre y cuando este soporte esta función (por ahora, Google Chrome, Mozilla Firefox y Opera). ¿Qué tiene esto de especial? Un service worker permite utilizar una PWA incluso sin conexión, ya que carga el contenido desde la memoria caché. Este proceso puede ace­le­rar­se eno­r­me­me­n­te si se “cachea” la es­tru­c­tu­ra de la apli­ca­ción, de forma que solo se tiene que descargar el contenido (los datos) actual.

Se­pa­ra­ción del app shell y del contenido

En la rea­li­za­ción de apli­ca­cio­nes web pro­gre­si­vas, además de los service workers, también la “Ap­pli­ca­tion Shell Ar­chi­te­c­tu­re” tiene un papel im­po­r­ta­n­te. Con ella, el software de la apli­ca­ción puede di­fe­re­n­ciar el ap­pli­ca­tion shell (la es­tru­c­tu­ra base de la apli­ca­ción) del contenido. La interfaz de usuario de una pro­gre­s­si­ve web app se basa, así, en el app shell, que es lo primero que se carga y se visualiza. El contenido que se muestra es de tipo dinámico y se carga desde Internet.

El app shell se guarda en la caché del service worker desde la primera vez que se abre la apli­ca­ción. Esto tiene la ventaja de que la es­tru­c­tu­ra se carga mucho más rápido, lo que aumenta, en de­fi­ni­ti­va, el re­n­di­mie­n­to de la PWA. El contenido se puede asegurar, además, en la caché o mediante IndexedDB. Para ello, este co­m­po­ne­n­te se ha de instalar en la apli­ca­ción pro­gre­si­va ac­ce­die­n­do a la apli­ca­ción, de la misma forma que se guarda el app shell. Esto permite poder acceder al contenido ya de­s­ca­r­ga­do de una apli­ca­ción pro­gre­si­va sin conexión.

WebAPK

Los de­no­mi­na­dos WebAPK son se­r­vi­do­res capaces de convertir una pro­gre­s­si­ve web app en el formato de archivo APK (Android Package), de tal modo que se integra mejor en el sistema operativo, al menos en te­r­mi­na­les Android.

Una PWA em­pa­que­ta­da en el formato APK se puede guardar en el cajón de apli­ca­cio­nes e instalar en el terminal de forma parecida a como se haría con una apli­ca­ción nativa. Con ello, la PWA puede utilizar más funciones nativas, permisos de acceso y otras apli­ca­cio­nes, así como recursos del terminal. Android, por ejemplo, ejecuta una apli­ca­ción pro­gre­si­va, una vez instalada, como una apli­ca­ción propia y ya no como una pestaña abierta en el navegador.

Sin embargo, hasta ahora solo unas pocas versiones beta de na­ve­ga­do­res Android han soportado la función y la co­n­ve­r­sión al formato APK no acaba de ir sobre ruedas, lo que excluye la po­si­bi­li­dad de co­n­si­de­rar a la in­s­ta­la­ción de WebAPK ple­na­me­n­te co­m­pa­ti­ble en su forma actual. Ahora bien, sí cabe esperar una expansión de esta función a todos los na­ve­ga­do­res ha­bi­tua­les, pues hoy las apli­ca­cio­nes web pro­gre­si­vas, aun sin poderse instalar, ya convencen por su gran capacidad de re­n­di­mie­n­to.

Los avances en la te­c­no­lo­gía de los na­ve­ga­do­res, en general, y la im­ple­me­n­ta­ción del service worker ligada a ella, en pa­r­ti­cu­lar, han sido decisivos a la hora de poder de­sa­rro­llar las nuevas apli­ca­cio­nes web. Con las me­n­cio­na­das te­c­no­lo­gías propias de la PWA hoy ya es posible hacer realidad apli­ca­cio­nes muy diversas y de gran calidad, aunque solo puedan desplegar todo su potencial con ex­plo­ra­do­res que soporten service workers. En este listado de Google y en la página web pwa.rocks se en­cue­n­tran buenos ejemplos de apli­ca­cio­nes web pro­gre­si­vas. A día de hoy, las apli­ca­cio­nes pro­gre­si­vas no son capaces aún de sustituir a las apli­ca­cio­nes nativas en todos los aspectos y así será en el futuro, puesto que las apli­ca­cio­nes de­sa­rro­lla­das para un sistema operativo tienen siempre más opciones a la hora de acceder a te­r­mi­na­les, recursos del sistema, etc. No obstante, la mayoría de apli­ca­cio­nes no requieren una in­te­gra­ción así de profunda del hardware y el software, lo que convierte al formato PWA en uno to­ta­l­me­n­te idóneo para la mayor parte de proyectos. Muchas de las ventajas de las apli­ca­cio­nes web pro­gre­si­vas saltan a la vista, lo que genera grandes ex­pe­c­ta­ti­vas en este formato tanto en pro­vee­do­res como en usuarios. No tan visibles son los pocos pero decisivos factores que di­fi­cu­l­tan la fa­bri­ca­ción y co­me­r­cia­li­za­ción masiva de las PWA.

Ventajas y de­s­ve­n­ta­jas de las pro­gre­s­si­ve web apps

En la siguiente tabla hemos si­n­te­ti­za­do los puntos a favor y en contra de las PWA frente a otros formatos, co­n­te­m­pla­n­do aspectos de pro­gra­ma­ción tanto como de uti­li­za­ción de las apli­ca­cio­nes.

Estas ca­ra­c­te­rí­s­ti­cas re­pre­se­n­tan el statu quo de la capacidad de las apli­ca­cio­nes pro­gre­si­vas en la ac­tua­li­dad, al menos en relación con las po­si­bi­li­da­des que, a día de hoy, ofrecen las versiones más actuales de los na­ve­ga­do­res ha­bi­tua­les (Google Chrome, Mozilla Firefox y Opera). Hay indicios que apuntan a una expansión del soporte de PWA en el futuro, como es la in­te­gra­ción de los service workers en el navegador Edge en la que está tra­ba­ja­n­do Microsoft. En lo relativo a Apple, el soporte de Safari es muy limitado y las PWA no se pueden utilizar aún offline ni pueden guardarse en el cajón de apli­ca­cio­nes de los di­s­po­si­ti­vos iOS.

¿Pueden imponerse las PWA a las apli­ca­cio­nes nativas?

Hasta ahora, los nuevos formatos de apli­ca­cio­nes no lo han tenido fácil. Ni las apli­ca­cio­nes web al uso ni las híbridas han logrado obtener una expansión semejante a la de las nativas en te­r­mi­na­les móviles. Las pro­gre­si­vas, en cambio, podrían ser las primeras en co­n­se­gui­r­lo, gracias a una so­fi­s­ti­ca­da te­c­no­lo­gía su­b­ya­ce­n­te y al gran apoyo por parte de muchos sectores. La pregunta sigue siendo hoy si Apple aceptará el formato PWA, lo que tendría como co­n­se­cue­n­cia que las pro­gre­s­si­ve web apps re­pre­se­n­ta­ran a corto plazo un rival que las apli­ca­cio­nes nativas deberían tomarse en serio.

Apple tiene, por su parte, buenos motivos para seguir centrando sus esfuerzos en el formato nativo e in­te­r­po­ner ob­s­tácu­los en la carrera de las PWA. No olvidemos que la App Store supone para Apple una fuente nada de­s­de­ña­ble de ingresos que, además, co­m­pro­me­te a los usuarios con sus servicios, sin contar el papel de los datos que se recopilan con las apli­ca­cio­nes nativas y la tienda de apli­ca­cio­nes. Si Apple soportara las pro­gre­s­si­ve web apps de tal forma que muchas apli­ca­cio­nes se pudieran im­ple­me­n­tar en iOS y macOs como pro­gre­si­vas en lugar de como nativas, si­g­ni­fi­ca­ría que tanto los de­sa­rro­lla­do­res de Apple como sus usuarios ya no de­pe­n­de­rían de su tienda. A esta simbiosis solo re­nu­n­cia­ría Apple, si llegara a hacerlo, si las PWA superaran en uso y expansión a las nativas.

No obstante, aun sin el pleno apoyo de Apple, parece que el mercado para las apli­ca­cio­nes pro­gre­si­vas es lo su­fi­cie­n­te­me­n­te grande y rentable, si bien el éxito del formato depende de un soporte más amplio por parte de los na­ve­ga­do­res más uti­li­za­dos. Es razonable suponer que en el de­sa­rro­llo de Chrome habrá sitio para una mejor co­m­pa­ti­bi­li­dad con las PWA, así como para una in­te­gra­ción para Android mucho más fácil. Mozilla y Opera acompañan a Google en la defensa de este formato, así que la plena co­m­pa­ti­bi­li­dad de sus na­ve­ga­do­res con las apli­ca­cio­nes pro­gre­si­vas, hoy ya pa­r­cia­l­me­n­te efectiva, será pró­xi­ma­me­n­te una de sus mayores prio­ri­da­des. No hay que olvidar que la mayor parte de pa­r­ti­da­rios del formato PWA son grandes actores de la industria del software y de Internet que se be­ne­fi­cian de la pro­gra­ma­ción y la in­fo­r­má­ti­ca libres.

Pro­gre­s­si­ve web apps no solo es una palabra de moda, sino que con ellas, los de­sa­rro­lla­do­res se adentran en un te­rri­to­rio técnico in­e­x­plo­ra­do. Continuar de­sa­rro­lla­n­do las apli­ca­cio­nes web “normales” trae consigo un potencial co­m­ple­ta­me­n­te re­vo­lu­cio­na­rio, donde el co­m­po­ne­n­te pro­gre­si­vo hace re­fe­re­n­cia a la habilidad de las apli­ca­cio­nes de adaptarse al contexto en que se utilizan, lo que significa, en última instancia, que cuanta más capacidad aporten el terminal y el navegador empleados, más capacidad puede desplegar una PWA.

Si se abre en un ordenador de es­cri­to­rio o en un portátil, una apli­ca­ción pro­gre­si­va se comporta como una apli­ca­ción web habitual, pero si se abre con un sma­r­t­pho­ne o una tablet, se presenta como una nativa. En función de las pre­s­ta­cio­nes del terminal es posible, entonces, que la apli­ca­ción utilice funciones nativas, como son la cámara, el micrófono, las no­ti­fi­ca­cio­nes push o el GPS.

Las ventajas de las pro­gre­s­si­ve web apps son obvias y pro­me­te­do­ras, pues no requieren de­s­ca­r­gar­se e in­s­ta­lar­se, se ac­tua­li­zan au­to­má­ti­ca­me­n­te cada vez que se abren, suponen un ahorro de recursos, no dependen ne­ce­sa­ria­me­n­te de la conexión a Internet y su carácter mu­l­ti­pla­ta­fo­r­ma permite probarlas online antes de en­rai­zar­las en el di­s­po­si­ti­vo. Sin duda, el tiempo de respuesta de la apli­ca­ción también co­n­s­ti­tu­ye un factor relevante pues, si hasta el momento eran las apli­ca­cio­nes nativas las más ve­n­ta­jo­sas en look and feel, hoy las PWA ya están pre­pa­ra­das para mostrar un re­n­di­mie­n­to equi­pa­ra­ble.

Desde la pe­r­s­pe­c­ti­va del de­sa­rro­llo y dado que solo hay que programar una apli­ca­ción que puede actuar de sitio web y apli­ca­ción mu­l­ti­pla­ta­fo­r­ma, el ahorro de trabajo y coste que supone la creación de una PWA es otro co­m­po­ne­n­te a favor que beneficia tanto a pro­vee­do­res como a usuarios. Sin embargo, lo que aún falla es el soporte de todas las funciones nativas de los di­s­po­si­ti­vos móviles. A nivel de fu­n­cio­na­li­dad, las PWA solo pueden hacer la seria co­m­pe­te­n­cia a las apli­ca­cio­nes nativas si pueden utilizar las po­si­bi­li­da­des de un di­s­po­si­ti­vo de una forma parecida, incluso aunque no puedan equi­pa­rar­se con las nativas en cuanto a sus opciones de empleo.

Lo que sigue siendo ese­n­cia­l­me­n­te pro­ble­má­ti­co es la carente di­s­po­si­ción por parte de Apple de apoyar este formato. Los na­ve­ga­do­res de los mayores pro­vee­do­res (Google, Mozilla, Microsoft, Opera) van a apostar in­te­n­sa­me­n­te por una mayor co­m­pa­ti­bi­li­dad del formato abierto PWA con sus productos. Apple, en cambio, al sacar provecho del aislado sistema de apli­ca­cio­nes para las pla­ta­fo­r­mas iOS y macOs y su App Store, muestra co­m­pre­n­si­ble­me­n­te menos interés en el proyecto.

El futuro dirá si las apli­ca­cio­nes pro­gre­si­vas podrán competir realmente con las nativas, aunque las opciones se prevén buenas a la vista de los re­no­m­bra­dos apoyos con los que cuenta. Sin embargo, la cuestión de la plena co­m­pa­ti­bi­li­dad del formato PWA en los sistemas ope­ra­ti­vos y na­ve­ga­do­res de Apple queda abierta. Si bien también es cierto que, en caso de que el novedoso formato obtuviera atención y apoyo por parte de de­sa­rro­lla­do­res y usuarios en el futuro, podría ocurrir que la re­ti­ce­n­cia de Apple re­tro­ce­die­ra pau­la­ti­na­me­n­te, pues, por lo general, ningún global player puede pe­r­mi­ti­r­se el lujo de cerrarse las puertas de una te­c­no­lo­gía avanzada y co­se­cha­do­ra de éxitos.