Qué son las Progressive Web Apps o PWA

Aunque lleven muchos años en el mercado, aún hay muchas dudas sobre qué son las progressive web apps y cómo funcionan. Durante los últimos años, estas se están popularizando en el mercado digital, debido a todas las ventajas que pueden llegar a ofrecer.

También son conocidas como aplicaciones web progresivas o PWA, por lo que antes de comenzar a explicar su dinámica, cabe destacar por qué se las define de esta manera.

Son progresivas porque han de funcionar en todos los dispositivos e ir incrementando su funcionalidad según se ejecuten. La palabra web surge debido a que son desarrolladas a partir de tecnologías web, como JavaScript, HTML y CSS. Finalmente, se las identifica como aplicaciones ya que su comportamiento y apariencia es similar al de las apps nativas.

Para entender mejor su funcionamiento y cómo se desempeñan, vamos a definir los siguientes puntos:

 

1. PWA: Qué son las Progressive Web Apps
2. La Progressive Web App ideal
3. Elementos principales de una Aplicación Web Progressiva
4. Qué beneficios aporta una Progressive Web App
5. Posibles dificultades que pueden surgir en una PWA
6. ¿Cómo instalar una PWA?
7. Las mejores Aplicaciones Web Progresivas
8. ¿Cómo desarrollar una PWA?

 

PWA: Qué son las Progressive Web Apps

¿Son una página web o una aplicación móvil? Aunque son accesibles a través de una url y utilizando un navegador como las páginas web, son aplicaciones que no dependen de una instalación o una tienda para su descarga. Únicamente se requiere acceso a Internet para encontrarlas y poder anclarlas al dispositivo en cuestión, aunque su funcionamiento posterior puede no depender de conexión a la red.

¿Aplicación Web, Nativa o Híbrida?

Una aplicación web progresiva es un término medio entre una aplicación web y una aplicación móvil. Utilizando tanto un navegador como otras tecnologías más complejas que le permiten comportarse como una app móvil.

 

---

Las PWA pueden comportarse y utilizar funciones de aplicaciones móviles. Por ejemplo, integrar notificaciones push o permitir el acceso de la cámara del dispositivo.

---

 

Pero también se diferencian de ellas en muchos aspectos, por ejemplo, en la actualización. Mientras que en las aplicaciones móviles es el usuario quien decide actualizarla en un momento determinado, al utilizar una progressive web app, siempre se accede a la versión más actualizada.

Así mismo, en algunos casos las PWA pueden ser más económicas porque pueden tener una programación más sencilla. Las aplicaciones móviles nativas e híbridas tienen estándares de calidad mucho más altos y requieren un desarrollo más avanzado para cumplir con ellos.

 

 

La Progressive Web App ideal

En 2007 Steve Jobs sentó las bases principales de cómo debería ser una PWA. Posteriormente, en 2015, Google las perfeccionó e hizo oficiales los requisitos esenciales que deben cumplir este tipo de aplicaciones. Definiendo las 11 buenas prácticas que deben incluir una app web progresiva:

1. Iniciarse y comportarse de forma rápida.
2. Funcionar en cualquier navegador.
3. Tener Formato Responsive, adaptable para cualquier pantalla: Tablet, escritorio y móvil.
4. Funcionar off line, aunque no se tenga Internet.
5. Se podrá «instalarlar» creando un acceso directo. Agregando al menú o al escritorio un icono que lleve a la PWA.
6. Incluir en su experiencia online diversas funcionalidades. Como utilizar conexiones HTTPS para ser seguras.
7. Ser accesible y tener disponibilidad a los usuarios.
8. Poder ser descubierta por motores de búsqueda.
9. Funcionar utilizando cualquier input: ratón, teclado, táctil, etc.
10. Pedir permiso al usuario y explicarle los motivos cuando la aplicación requiera acceder a cualquier contenido del dispositivo.
11. Seguir las buenas prácticas del código.

Elementos principales de una Aplicación Web Progresiva

Toda PWA tiene que incorporar su Manifest, donde describe los datos principales de la misma, como el nombre, icono y descripción de la app. Además de un App Shell, encargado de gestionar los datos en caché de la aplicación, mejorando su velocidad. El tercer elemento esencial y que aporta funcionalidades nativas son los Service Workers.

Service Workers: Cómo mejorar la experiencia de usuario

Un service worker es un archivo JavaScript peculiar, porque suele estar asociado a una sola vista de una url. Por lo que, cuando la url cambia, también lo hace el JavaScript. Son scripts que funcionan en un segundo plano paralelo a la aplicación, siendo la principal ventaja que ofrecen mejorar la experiencia offline del usuario. Una característica de las aplicaciones nativas que se ha implementado también en este tipo de aplicaciones.

Los service workers se registran en el navegador y se quedan ejecutando continuamente, incluso si se cierra la app, están en segundo plano. Gracias a la información que les llega del servidor, se quedan cacheado, haciendo que funcione más rápido. Además, mejoran la sincronización de datos, posibilitan las notificaciones push y la intercepción de comunicaciones.

 

 

Qué beneficios aporta desarrollar una Progressive Web App

Como ya hemos explicado al definir qué son las progressive web app, para su descarga no es necesario acceder a las tiendas de Google Play o Apple Store. Esto, proporciona beneficios tanto al propietario como al internauta. No hay que asumir los costes que supone publicar una app en estas plataformas, y el usuario accede a ellas con mayor facilidad, al contar con un menor grado de compromiso.

 

---

Trivago ha aumentado en un 97% el engagement y ha incrementado en un 150% los usuarios que incluyeron el acceso directo a la progressive web app en su pantalla de inicio.

---

 

Mejora de la visibilidad y el SEO de la empresa

¿Qué son las progressive web apps? En su esencia son páginas web, por lo que tienen una fuerte relación con el posicionamiento SEO. Al añadir mejoras progresivas a la plataforma, facilitan dicho posicionamiento, mejorando la visibilidad online de la marca.

Son una ayuda para conseguir las mejores posiciones en Google y en sus resultados de búsqueda. Lo que además de la presencia, directamente mejora la influencia del negocio, la notoriedad online y la captación de más impresiones y clientes. Este tipo de refuerzo de los canales digitales es una de las nuevas tendencias tecnológicas.

Cualquier usuario puede contar con una Web App Progresiva.

 

---

Las progressive web apps no necesitan de espacio y su funcionamiento continua sin Internet.

---

 

Crear el acceso directo es sencillo, están disponibles de forma inmediata, por lo que mientras se navega en la red se puede anclar la app a la pantalla de inicio. Una vez enlazada, el usuario puede acceder a ella, aunque no tenga conexión a Internet, gracias al caché.

Además, no ocupa espacio de almacenamiento en los dispositivos, por lo que, si no se tiene la capacidad suficiente para poder instalar una nueva aplicación nativa, siempre habrá espacio para una nueva PWA al ser un acceso directo.  Cabe destacar que mientras una nativa ocupa unos 200MB, las PWA no suelen pesar más de 0,5MB. La memoria que requieren es muy baja, a pesar de ello su rendimiento es similar a una app nativa.

PWA con los beneficios de las funcionalidades nativas

Gracias a su desarrollo, se puede combinar las mejores características de una web con las de una aplicación convencional.

Las PWA actúan como una app nativa, por ejemplo, el icono aparece en la pantalla del dispositivo junto al resto de aplicaciones. Lo que se comporta como un recordatorio continuo de la marca en el móvil del usuario, generando impresiones y quedándose en el recuerdo de este.

Además, acceden a propiedades del teléfono, por ejemplo, la cámara o la galería, permitiendo publicar fotos desde esos medios a través de la app, como hacen las aplicaciones web progresivas de Twitter o Facebook.

Otra de las características a destacar son las notificaciones push. Avisos en tiempo real que se pueden recibir y mostrar en el background como en el front. Lo que permite que sin tener la aplicación abierta, se puedan recibir al instante las notificaciones de la misma.

 

 

Aumentan el engagement: Experiencia de usuario multiplataforma

• Formato Responsive: Gracias a este elemento, el usuario puede disfrutar desde cualquier dispositivo (Tablet, móvil…) de un diseño adaptable que permita mostrar la plataforma de la mejor manera posible, disfrutando de comodidad y funcionalidad en la app.
• Rapidez de carga: La velocidad es otro factor relevante y que ya se ha mencionado anteriormente. Gracias a los datos en caché y a su forma de gestión de la información, una progressive web app se puede cargar hasta 4 veces antes que una página web óptima. La inmediatez está muy bien valorada en Internet, fidelizando con los consumidores y aumentando la probabilidad de conversión.
• Acceso a última versión: Además de su fácil acceso a través del navegador, es el proveedor quien se encarga de actualizar la aplicación. Al realizar modificaciones en el código del servidor, estas se ven reflejadas en las PWA de todos los usuarios.

Posibles dificultades que pueden surgir con una PWA

En cualquier elemento donde se aporten beneficios, siempre existen una serie de contras a evaluar si se decide apostar por él. Por este motivo, creemos necesario mencionar algunos inconvenientes de las aplicaciones web progresivas.

Conocimiento previo de la marca

Únicamente se puede encontrar una progressive web app si el usuario ya conoce a la empresa y se decide a buscarla a través de Internet. Por lo que estas aplicaciones son útiles para grandes empresas que ya tengan un cierto nivel de reconocimiento, como Booking o Nike, pero no para pymes.

Al fin y al cabo, al no haber un repositorio o una tienda de PWA en la actualidad, será imposible que los consumidores interactúen con la aplicación web progresiva de un negocio desconocido o que tiene poca visibilidad en el mercado.

Posibles problemas de seguridad

Al igual que el anterior, este inconveniente surge al carecer de una tienda online. Como se encuentran navegando por la red y se descargan desde el propio dominio de la compañía, las PWA no pasan el filtro de seguridad necesario que existe, por ejemplo, en Apple Store o Google Play.

Por lo que, una vez más, si se trata de una marca poco relevante, el usuario puede no contar con la confianza pertinente en la misma para descargar la aplicación en sus dispositivos o para introducir sus datos y realizar transacciones en ella.

Uso limitado de las funcionalidades nativas

Al no haberse desarrollado con las tecnologías necesarias de una app nativa, no pueden incorporar todas las utilizaciones de las mismas. Si se pretende enfocar la aplicación para el uso de NFC o al acceso de los contactos del teléfono, no ofrecen el marco necesario para aportar una buena accesibilidad a estos campos.

Además, las PWA dependen de cómo de bien estén desarrolladas para poder contar con un mayor número de funcionalidades nativas de forma óptima.

Dependencia del navegador

Sólo son compatibles con las versiones más actuales de los navegadores principales, como Chrome, Safari, Opera o Firefox. Por lo que existe un rango de usuarios que no puede acceder a las progressive web apps, ya que la tecnología que utilizan no es admitida por su buscador.

Si se tiene en mente los navegadores antiguos, también destacamos que debido a la configuración de los dispositivos iOS y a sus permisos, hay apps web progresivas a las que no pueden acceder desde Apple.

Alto consumo de batería

Al utilizar tecnologías web y no códigos específicos para dispositivos móviles que se ajustan mejor a ellos como las aplicaciones nativas o híbridas, se gasta más energía y el porcentaje de batería desciende más rápido.

Es un punto relevante a tener en cuenta, ya que empeora la usabilidad de la aplicación hasta el punto que algunos usuarios pueden descartar su uso o descienda con creces el tiempo que empleen en la progressive web app.

Las Mejores aplicaciones Web Progresivas

Existen PWA cuyo diseño y funcionalidades son iguales o bastante similares a los de su propia aplicación nativa. Al cuidar cada detalle, se les ofrece una alternativa a los usuarios para poder acceder a la plataforma de la empresa desde el navegador y sin tener que gastar el espacio de sus dispositivos.

• Twitter
• Google Maps
• Google Drive
• Facebook
• Telegram

Por ejemplo, la progressive app de Twitter tiene la flexibilidad y comodidad de una web, permitiendo personalizarla y configurar su barra de navegación y contar con todas las funcionalidades de su app nativa.

 

 

¿Cómo “instalar” una PWA?

Una vez se abre el navegador, el cual tiene que ser compatible con las progressive web apps y los Service Workers, se accede al sitio web que se desea convertir en una PWA. Chrome, Firefox o Safari son los principales.

En el caso de que al visitar la página web esta no sugiera crear el acceso directo de la misma desde el dispositivo, únicamente hay que visitar el menú del navegador y enlazar la web al inicio como acceso directo, anclar al escritorio.

¿Cuándo desarrollar una PWA?

Para decantarse por una aplicación web progresiva hay que hacer una evaluación de la marca y contrastar todos los pros y contras que acompañan a este tipo de apps.

Si se es una marca con una alta notoriedad y reconocimiento, los usuarios la seguirán buscando aunque no aparezca en las tiendas, por lo que una PWA puede ser una opción que añada funcionalidad y usabilidad a la plataforma de la compañía.

Además, las progressive web apps son una inversión para mejorar el posicionamiento SEO, enfocar la estrategia de la empresa hacia ellas, facilitará que los usuarios las encuentren con facilidad en los buscadores.

No hay que olvidar, que se descarta a un gran porcentaje de usuarios que utilizan iOS, por lo que hay que valorar si el público objetivo de la empresa mayoritariamente proviene de Android y se puede permitir sacrificar a algunos usuarios con dispositivos de Apple.

Escoger una progressive web app depende de las necesidades de la empresa en cuestión. Por lo que lo más conveniente es contar con un equipo de expertos que ayuden en la orientación del proyecto y determinar cuándo es buena opción desarrollar un tipo de aplicación u otro.