¿Qué son y cómo funcionan las Progressive Web Apps?

La ultima actualizacion de 24 de noviembre de 2021

Aunque por el nombre de Progressive Web Apps, o por su abreviación de PWA, no te suenen demasiado, lo cierto es que has estado en muchas ocasiones en este tipo páginas o aplicaciones. De hecho, son tan interesantes que se consideran una tendencia predominante.

Están caracterizadas por su capacidad de adaptación a lo que busca el usuario del momento, además de su adaptación a cualquier tipo de sitio web actual.

Si, como nosotros, siempre estás en sintonía sobre lo último de lo último en páginas web, en este artículo te amos a desvelar todo lo que debes saber sobre las PWA para que tu también seas consciente de su importancia.

¿Qué son las PWA?

Las Progressive Web Apps (traducidas al español como aplicaciones web progresivas) es un concepto que incluye mucho más de lo que parece. Es un concepto que alude a un tipo de web con unas características muy definidas, capaces de mejorar la experiencia de uso por parte del usuario, en comparación con las páginas de toda la vida.

  • Progresivas: reciben este apelativo porque adaptan sus funcionalidades en base a la capacidad que tiene el dispositivo en el que son visitadas.
  • Tecnología actual: se diseñan basándose en lo último de lo último en tecnologías. Por lo general, son el resultado de la combinación de HTML + CSS + JavaScript, además de usar el propio API de JavaScript.
  • Adaptación: tal como se explica en el concepto de WPA, también pueden ser aplicaciones dinámicas. Esto quiere decir que dichas páginas se pueden ejecutar en múltiples dispositivos, ya sea un PC de sobremesa, portátil, teléfono móvil, tablet, etc.

Digamos que son páginas multiusos: se pueden comportar como una página convencional, pero también podrían usarse como apps. Dependerá de cada situación.

¿Por qué son tan interesante las PWA?

Hasta aquí nos queda claro el concepto, pero lo cierto es que es muy probable que aun no entiendas la razón de ser de las Progressive Web Apps. En las siguientes líneas podrás conocer mucho mejor todas sus ventajas para saber porque deberías usarlas:

1.     Adaptación

No importa en que sistema operativo tengamos que desarrollar la aplicación, y es que las PWA se pueden adaptar a cualquier S.O. Lo cierto es que las primeras WPA aparecieron el primer iPhone y con el sistema operativo IOS, por lo que se las relaciona directamente con Safari.

Pero no quera relegado a este sistema, ni mucho menos. También se pueden adaptar a la perfección a Android junto con el navegador Google Chrome.

Su ámbito no se limita únicamente a los sistemas para dispositivos móviles, sino que es posible encontrarlas también para Windows y para Linux.

2.     Son más económicas

Si tenemos en cuenta lo que cuesta programar una WPA, en comparación con las webs convencionales, nos daremos cuenta de que estas primeras son mucho más rápidas de crear, lo que supone un ahorro importante.

Hay que tener claro que estamos hablando de una web y app que, como se desarrollan de forma independiente de su plataforma, tendrá asociados unos gastos de desarrollo muchos más económicos.

3.     Mejor rendimiento

La tecnología ha evolucionado mucho y ahora podemos ver en aplicaciones y páginas algunas funcionalidades que no habríamos creído posible hace unos años. Ahora bien, esto no quiere decir que podamos hacer cosa, y es que es posible que ciertas funcionalidades podrían agotar con rapidez los recursos de un teléfono móvil.

Algunos dispositivos tienen problemas de permisos o para gestionar la memoria RAM.

Aquí nos encontramos una de las ventajas de las progressive web apps más destacadas, y es que tienen mayor capacidad para gestionar la memoria, además de requerir menos. Esto permite crear un ecosistema mucho más seguro, algo clave para mejorar la experiencia del usuario.

4.     Notificaciones push

Son aquellas notificaciones que aparecerán en la parte superior del dispositivo móvil, y que sirven para indicar que ha habido un cambio en la aplicación (podríamos informar de una actualización, de una oferta promocional, de que se han regenerado todas las vidas si se trata de un juego, etc.).

Las PWA no solo permiten notificaciones push, sino que estas son más intuitivas y fáciles de controlar.

Funcionamiento de las PWA

Ya conocemos lo básico. Si quieres implantar las progressive web apps, entonces tendrás que conocer su funcionamiento. En resumidas cuentas, así funcionan:

Antes de nada, es importante que tengas claro que es el concepto del service worker, ya que las WPA se basan sobre ellos para funcionar. Lo podemos definir como un script, un trozo de código que permite controlar el proxy que se ejecuta entre el navegador y el servidor. A través de dicho pedazo de programación podremos agregar algunas funcionalidades extra que no vienen establecidas en el navegador.

Un service worker se nutre de la información que extra del rastro que deja el usuario al navegar por Internet: tienen en cuenta tanto la información almacenada en el historial web, como en el caché web. Esto permite agilizar los resultados que se solicitan.

Además, son scripts completamente seguros, ya que tan solo funcionarán cuando estén activos. Una vez que no los necesitemos, serán desactivados.

Imaginemos que pulsamos un link determinado en una PWA. Al hacerlo, se ejecutará un script de forma invisible al usuario que hará una búsqueda en la caché del navegador, de tal forma que busque coincidencia con los resultados que se necesitan. Y todo esto se hará sin conexi´n a la red.

Por ello, los services workes necesitan de la mayor cantidad de caches fuera de línea que puedan conseguir ya que, así, lograrán funcionar mucho mejor y ser más efectivos.

Si el usuario se conecta a la red en un lugar en donde la calidad de Internet no es demasiado buena, o si hay cortes frecuentes, gracias a la PWA se conseguirá una buena navegabilidad. Y es que esta tecnología cargará cualquier web basándose en las caches descargadas con anterioridad, y no en la actualizada en la web en ese momento.

¿Cuáles son las características que identifican a una PWA?

¿Todavía no sabes como diferenciar entre una PWA y una página convencional? Existen algunas claves que nos ayudarán a ver las diferencias de una forma más sencilla. Te las desvelamos en las siguientes líneas:

  • Son universales: las PWA den poder ser ejecutadas en cualquier navegador, para teléfono móvil, o para PC. El usuario debe poder acceder a las mismas sin que exista ningún tipo de problema.
  • Interfaz: la PWA debe parecer una web o una aplicación de móvil, dependiendo desde donde se visite. Su interfaz debe haber sido diseñada para ser lo más sencilla posible, intuitiva, para que el usuario pueda encontrar la información que necesita sin tener que complicarse. Sin embargo, también admitirá la implementación de funcionalidades más complejas.
  • Responsive: estas aplicaciones web deben adaptarse a la perfección a cualquier resolución del dispositivo en el que se ejecuten. No importará las características del aparato, ni la marca o cualquier otro detalle.
  • Máxima seguridad: una PWA debe garantizar siempre una navegación segura al usuario. Utilizarán un sistema de encriptación tipo SSL y basarán su navegación en el protocolo HTTPS para evitar cualquier intento de intromisión externa.
  • Actualización: cuando creamos una aplicación web PWA debemos asegurarnos de que están siempre actualizadas con un sistema automático. Así, el usuario no tendrá que esperar a que apliquemos la actualización, sino que esta se presentará sin más.
  • Sin instalación: a pesar de que tengan el mismo aspecto que una app nativa, el usuario no tendrá que acceder a ningún market para instalarse nada. La idea es que estos recursos funcionen como una página web convencional, aunque cambie la resolución.
  • Concepción: lo realmente innovador con las WPA es que el usuario se dará cuenta de que está dentro de una aplicación, aunque no haya tenido que cambiar nada. Si se decide a visitar la web desde un dispositivo de sobremesa, verá la web como una página convencional.
  • Comparte sin instalaciones: como ya hemos visto, estas páginas se basan en analizar el cache del usuario, por lo que se almacenan y descargan en el propio dispositivo. Esto permite que se puedan compartir con facilidad. Lo único que habrá que hacer es indicar la URL para empezar a usarlas de forma inmediata, sin que se requiera de ninguna instalación.

¿Qué se necesita para que funcione una WPA?

Existen un par de requisitos que habrá que tener en cuenta para que una WPA funcione correctamente:

  • Compatibilidad: se requiere de un navegador que sea compatible con las WPA y que tenga las características adecuadas para aguantar su ritmo.
  • Servidor: el servidor también debe estar preparado para ejecutarlas. Tendremos que buscar en nuestro proveedor de servicios si admite los services workers. De lo contrario, no nos quedará otra que migrar a un nuevo servidor.

No estaría de más que echases un vistazo a la versión de cada navegador para que sepas a partir de que punto son compatibles con los services workers. Esto te puede ayudar a saber si existe algún problema de compatibilidad con un navegador que pueda afectar a la experiencia de tu usuario.

  • Por ejemplo, no tendremos ningún problema si el usuario entra a la web a través de Chrome, Firefox, Edge o Safari en la versión de PC, pero sí que puede haber problemas de compatibilidad con QQ y Baidu.
  • En cuanto a los navegadores para el teléfono móvil, hay compatibilidad total para Chrome, Firefox, UC Browser, Safari, Samsung Internet, Wechat y Mint Browser. Pueden existir problemas de compatibilidad con Opera Mobile, Android Browser y QQ.

¿Dónde puedo encontrar PWA?

Es bastante probable que estés utilizando una progressive web app y que ni tan siquiera supieses que se llamaban así. Lo cierto es que ya son muchas las empresas las que han modificado sus páginas para convertirlas en una PWA, y otras tantas tienen planes para llevar a cabo la transformación en los próximos meses.

Un buen ejemplo lo tenemos en Twitter: si intentas acceder a la versión web a través del teléfono móvil, sin descargar la aplicación, entrarás en una PWA.

Por lo general, las compañías reservan esta tecnología para crear versiones Lite sobre sus aplicaciones. Por ejemplo, podemos encontrar PWA tanto en Facebook Lite, en Google Maps Go, en Instagram Lite, entre otras tantas herramientas.

¿Las PWA son el futuro?

Está claro que las PWA suponen una evolución sobre el concepto de página web, tal y como la conocíamos… ¿pero hasta que punto es una tecnología tan interesante).

Su capacidad de adaptarse a la navegación que busca el usuario, y la forma de optimizar los recursos en base a lo último de lo último en cuanto a tecnología se refiere, las convierten en todo un must para nuestra web.

La idea es que, si el usuario abre la web desde un ordenador de sobremesa o portátil, esta se mostrará como una página convencional. Pero si se decide a abrirla desde su teléfono móvil o tablet, el aspecto que mostrará será el de una aplicación.

Y no necesitaremos descargar ningún tipo de aplicación, plugin o funcionalidad adicional. Tampoco se deben actualizar manualmente, y es que las actualizaciones se aplicarán de una forma 100% automática. No requieren de conexión a la red, ya que acceden a la última versión disponible.

Además, tienen acceso a los principales recursos de cada dispositivo. Por ejemplo, si se utilizan en el teléfono móvil, podremos acceder a los recursos del micrófono, GPS, cámara, así como a las notificaciones Push.

Pero también existen algunos inconvenientes que deben ser sopesados.

Inconvenientes de las PWA

El gran problema de las PWA es que no están pensadas para adaptarse a dispositivos de tamaño reducido y con pantalla táctil, a diferencia de las aplicaciones convencionales.

Pero como son más sencillas de crear, requieren de menos tiempo de programación y de menos inversión económica, son cada vez más los desarrolladores web los que se decantan por ellas.

Además, son cada vez más las marcas las que adaptan sus navegadores para que puedan utilizar las WPA con mayor eficiencia, por lo que pensamos que son el futuro.

Ahora que ya las conoces en detalle, podrás tomar la decisión de si es lo que estabas buscando para crear tu nuevo proyecto web.