Qué es PWA: características, tecnologías y ventajas
Por: FERNANDO GIRALDO NARANJO (CEO en FGN Advertising Global Boutique)
FGN ADVERTISING GLOBAL BOUTIQUE. Colombia – Cada vez es más habitual escuchar que una empresa tiene una Progressive Web App, pero… ¿realmente sabemos qué es? En este post veremos qué es, cuáles son sus características, las tecnologías que emplea, sus ventajas y desventajas y, en definitiva, todo lo que convierte una PWA en una opción muy interesante para todos los proyectos.
¿Qué es P.W.A.?
PWA (Progressive Web App) no es un término nuevo (Google lo introdujo en 2015), pero es desconocido para muchas personas. Las PWA se definen comúnmente como las Apps que reúnen lo mejor de las aplicaciones web y de las nativas, incluso llegando a ser entendidas como un punto medio o una forma evolucionada.
La base son páginas webs, pero utilizan tecnologías que hacen que su estética y funcionamiento se asemejen enormemente a una App nativa, por ejemplo, mediante la ejecución en segundo plano. Se accede a ellas a través de un navegador, pero se puede anclar un acceso directo en nuestro dispositivo (en la pantalla de inicio o en el menú de aplicaciones). No dependen de sistemas operativos (se ejecutan en el navegador) y van incorporando funcionalidades nativas del dispositivo.
Características de una PWA
Para entender en mayor profundidad qué ofrece una Progressive Web App y, por tanto, en qué se diferencia de otro tipo de aplicaciones o de las webs comunes, pasamos a señalar algunas de las características que la definen:
Responsive
En la actualidad, la mayoría de webs cuentan con diseño responsive que las permite adaptarse a diferentes dispositivos, algo imprescindible con el papel predominante de los smartphones. Estas Apps se adaptan automáticamente a cualquier formato, navegador o dispositivo.
Actualizada
Las PWA siempre mostrarán su última versión al usuario, con el empleo de actualizaciones automáticas, de manera constante e instantánea y sin necesidad de descargarlas. Esto es posible gracias al empleo de Service Workers y porque no deja de ser una web App, independiente de la publicación en los markets de aplicaciones.
Segura
Se usa siempre el protocolo seguro HTTPS que, además, es necesario para la instalación del Service Worker. Esto posibilita asegurar que el acceso sea seguro y que el contenido servido no haya sido sujeto a manipulaciones. Se emplean tecnologías como TLS para el cifrado web.
Rápida
Por lo general, una PWA tiene la velocidad, tanto de carga como de navegación, optimizada. Esto permite que los contenidos se muestren al usuario prácticamente al instante, ya que se apoyan en el almacenamiento en la caché. Las interacciones, tales como clics o scroll, también deben ser inmediatas. El menor peso de la Progressive Web App en comparación a la App nativa es un factor decisivo para ello.
Offline
Una PWA debe permitir el acceso, ya sea de manera parcial o incluso total, a pesar de que no haya conexión a Internet.
Para que se pueda servir contenido a los usuarios que estén offline, se utilizan los service workers y el almacenamiento en caché de la información esencial para iniciar la App, que se realiza desde la primera vez que esta se abre. Así, en las visitas posteriores, se puede disponer de cierto contenido independientemente de la red.
Multiplataforma
En su desarrollo, la tecnología utilizada contempla su ejecución en diversos dispositivos, sistemas operativos y navegadores. Esto, además de ser clave a la hora de ofrecer una experiencia de usuario satisfactoria y alcanzar a más público potencial, supone facilidades para los desarrolladores y permite abaratar costes, puesto que no se requieren programaciones diferenciadas (algo que sí ocurre con las Apps nativas).
Indexable y enlazable
El contenido de una PWA es rastreable e indexable, de forma que pueda aparecer como resultado en un buscador. Además, esta se puede compartir mediante una URL, con la posibilidad de que la otra persona la utilice sin necesidad de instalarlo.
Con acceso directo
Las webs a las que se acceda desde el navegador que dispongan de una versión PWA suelen informar al usuario, invitándole a “añadirla a su pantalla de inicio”. Estas aplicaciones se pueden utilizar desde el navegador, pero también se pueden instalar en el dispositivo. Esta instalación no requiere de una “descarga” tal y como la conocemos, sino que se basa en la inclusión de un acceso directo en la pantalla de inicio o escritorio de nuestro dispositivo. Este se muestra como un icono más, prácticamente idéntico al de cualquier App nativa.
Apariencia nativa
La interfaz de usuario y, en general, la apariencia de una PWA es muy similar a la de las Apps nativas, tanto en estética como en la manera de interactuar y navegar por ella. A esto contribuyen elementos como una pantalla de inicio, que se ejecute en una ventana de aplicación propia, totalmente responsive, que ocupe la pantalla por completo (sin la barra que muestra la URL), etc.
Funcionalidades propias de una App nativa
Con la evolución de las PWA, han ido adquiriendo opciones que antes se reservaban únicamente a las Apps nativas, como el acceso a distintas funciones del dispositivo.
Las Progressive Web App pueden, por ejemplo, acceder a la geolocalización del dispositivo, al Bluetooth, sincronizarse en segundo plano o enviar notificaciones push (incluso cuando no está abierta la PWA). Estas notificaciones son una potente herramienta de comunicación que permite informar al usuario e invitarle a acceder, aumentando las visitas y, en consecuencia, las conversiones. Se debe considerar que estas posibilidades no están disponibles para todos los navegadores.
¿Qué tecnologías emplea una PWA?
Para entender en mayor profundidad el funcionamiento de las PWA, es interesante mencionar las tecnologías y métodos de trabajo en los que se sustenta su desarrollo. Siguiendo a Google, los requisitos en esta materia que debería cumplir una Progressive Web App son cuatro:
Manifiesto de la aplicación
En Android y Chrome se utiliza un archivo JSON muy sencillo, conocido como Manifiesto. Este permite especificar diversas características para controlar cómo se visualizará la App tras ser instalada. Algunas de las informaciones que contiene son:
- Nombre (name y short_name)
- Icono (icons), lo que se ve en la pantalla de inicio o menú tras instalarla
- Colores (theme_color para la barra superior y background_color para la pantalla de carga de la App)
- Orientación (orientation), es decir, si la App se mostrará en horizontal o en vertical
- Descripción (description): breve descripción de la App
- URL que se iniciará al abrir la App (start_url)
- Display (display), con distintas configuraciones para la pantalla
Service workers o trabajadores de servicio
La tecnología de service workers es una especie de proxy entre el servidor o la red y el dispositivo o la aplicación. Es un JavaScript que se instala en el navegador y funciona detectando eventos. Requieren del uso de HTTPS.
HTTPS
La PWA debe servir todas las solicitudes sobre HTTPS, puesto que es necesario confirmar que funcione bajo un protocolo de seguridad. Además, para la instalación del service worker termina siendo un paso fundamental, ya que estos almacenan mucha información, por lo que se debe navegar de forma cifrada para mantener la protección.
Icono
Necesario para mostrar el acceso directo en el cajón de aplicaciones o la pantalla de inicio del dispositivo. Va estrechamente vinculado al manifiesto de la aplicación mencionado previamente.
Ventajas de las P.W.A.
Tras mencionar las principales características de una PWA, es muy sencillo entender de dónde procede su protagonismo y, con ello, cuáles son sus ventajas. Enumeramos a continuación las más destacables:
+Bajo coste: el coste que suponen el desarrollo, el mantenimiento y las actualizaciones es menor que las Apps nativas. Esto se debe a que la programación es más sencilla y no requiere diferentes versiones en función del navegador o dispositivo.
+Requieren menos recursos: las Progressive Web App ocupan menos espacio que las Apps nativas a pesar de que el funcionamiento y el aspecto pueden llegar a ser muy similares. Por este motivo, el uso de estas aplicaciones resta una barrera muy importante para muchos usuarios.
+Son seguras: se basan en protocolos de navegación web segura, como HTTPs y TLS.
+Son indexables: aparecen en los motores de búsqueda, con lo que es fácil alcanzar a numerosos usuarios y mejorar el posicionamiento SEO.
+Son enlazables: se pueden compartir de forma sencilla, con lo que existen más posibilidades de impactar a un número de usuarios más amplio.
+Siempre están actualizadas: con lo que se asegura que todos los usuarios accedan a la última versión y a los contenidos más relevantes, sin necesidad de descargar nada.
+Disponibles en la pantalla de inicio: el acceso es rápido y sencillo a través del icono que se deposita en el menú o pantalla de inicio, consiguiendo una visibilidad relevante para el usuario. Todo ello, sin necesidad de pasar por ninguna tienda de aplicaciones ni realizar procesos de instalación que puedan resultar tediosos o que ocupen más espacio del deseado o necesario.
+Acceso sin conexión: cuentan con funcionamiento offline o con poca conectividad. Con los datos guardados en la memoria caché, se puede mostrar el contenido cargado previamente. Esto mejora la experiencia del usuario.
+Similar a una App nativa: el aspecto puede asemejarse mucho a una App nativa, proporcionando una sensación de confianza al usuario, que sentirá que se trata de “algo conocido”. Además, como se ha comentado previamente, puede utilizar diversas funcionalidades propias del dispositivo, haciendo que su uso sea lo más completo posible.
+Notificaciones: derivado de la posibilidad de utilizar funcionalidades nativas, se encuentra la opción de enviar notificaciones push. Esto supone una llamada de atención al usuario, consiguiendo que recuerde la PWA y acceda de nuevo a ella. Mejoran la comunicación, el engagement, la fidelización y la conversión. Los usuarios se mantienen informados, pueden acceder inmediatamente clicando en la propia notificación y terminan por pasar más tiempo en la PWA.
+Marketing y comunicación: además de las notificaciones, el simple hecho de tener de manera constante en un teléfono móvil el acceso a una PWA, supone una presencia de la marca más notoria en la vida del usuario. A esta visibilidad contribuyen el acceso simple y la posibilidad de fidelizar a los clientes o consumidores.
+No depende de los markets de aplicaciones: no es necesario que sea publicada en ellos, con lo que se evitan los tiempos de espera causados por las revisiones y se disminuyen costes y barreras de instalación. Se accede de manera sencilla mediante la web, un enlace o un código QR, por ejemplo.
+Son rápidas: se reduce el tiempo de carga y navegación, lo que supone mayor satisfacción para el usuario.
+Son responsive: su diseño se adapta a cualquier dispositivo y navegador.
Ejemplos de las P.W.A.
+A continuación vemos algunos ejemplos de aplicaciones web progresivas:
+Mensajería: las aplicaciones de mensajeria, tales como whatsapp o telegram han creado versiones PWAs que permitan utilizar sus servicios más allá de los smartphones.
+Eccomerce: los grandes eccomerce como Aliexpress o Amazon quieren aumentar a toda costa su presencia y por ello han desarollado PWAs que les permita incrementar sus ventas.
+Redes sociales: casi todas las redes sociales, tales como Facebook, Instagram o X incorporan en la actualidad aplicaciones webs progresivas, buscando sobre todo el uso en terminales con recursos más limitados.
*Este artículo fue creado con ayuda de una inteligencia artificial que utiliza ‘machine learning’ para producir texto similar al humano, y perfeccionado por la Sala de Prensa de FGN Advertising Global Boutique.
Contacta con FGN Advertising Global Boutique y conoce las múltiples e innovadoras soluciones para potenciar tu negocio y hacerlo crecer en alcance y posicionamiento.
Cortesía: FERNANDO GIRALDO NARANJO / FGN Advertising Global Boutique.