Blog / Progressive Web Apps: ¿Qué son las PWA?

En 2024, las Progressive Web Apps (PWA) han revolucionado el mundo digital, ofreciendo experiencias web más rápidas y eficientes que nunca. Desde grandes corporaciones hasta pequeñas empresas, las PWA están transformando cómo interactuamos con la tecnología en la vida diaria. En este artículo exploraremos y analizaremos las PWA: ¿Qué son las Progressive Web Apps? ¡Te lo cuento!

¿Qué son las Progressive Web Apps?

Las Progressive Web Apps son un tipo de aplicación web que opera tanto como página web, como de aplicación móvil en cualquier dispositivo. Estas aplicaciones se comportan como una página web normal, pero nos ofrecen características propias de las apps móviles como su velocidad, capacidad de funcionar sin conexión, lanzar notificaciones push, o usar elementos del propio dispositivo.

Características de las PWA

Actualmente, la mayoría de webs tienen diseño responsive, es decir, un diseño que les permite adaptarse a diferentes dispositivos. Lo mismo pasa con las PWAs, estas se adaptan a cualquier dispositivo. Si quieres saber más sobre esto, aquí te dejo un artículo sobre el diseño responsive.

Las PWA se actualizan automáticamente y de manera constante. No hay necesidad de descargar las nuevas versiones.

Una de las características más importantes es su rapidez. Al apoyarse en el almacenamiento en caché, es capaz de mostrar los contenidos al usuario casi al instante. Este almacenamiento en caché permite también el acceso offline, ya que la PWA es capaz de cargar la estructura básica de la app, o la App Shell, aunque no pueda recoger contenido nuevo de la red.

Además se pueden subir a la AppStore y Google Play como si fuesen aplicaciones nativas.

Elementos necesarios para una Progressive Web App

Manifiesto de la aplicación

El Manifiesto es un archivo JSON que usan Android y Chrome. Aquí, se especifican las características de la app. Algunas de estas características son el nombre, el icono, los colores, la orientación, descripción, URL o display. Aquí te dejo un ejemplo de un manifiesto.

{
  "short_name": "MiPWA",
  "name": "Mi Aplicación Web Progresiva",
  "icons": [
    {
      "src": "/images/logo.svg",
      "type": "image/svg+xml",
      "sizes": "512x512"
    },
    {
      "src": "/images/logo-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/logo-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "id": "/?source=pwa",
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6", 
  "description": "Este es un ejemplo de manifiesto",  
}

Service Workers

Service Workers es una API de JavaScript capaz de instalar un script en el cliente. Este script hace las funciones de un proxy entre el navegador y el servidor. Una Service Worker puede mandar información a ciertas direcciones, recibir notificaciones push, interceptar peticiones de cliente, almacenar datos en caché o actualizar la página, entre otras cosas.

HTTPS

Estas aplicaciones emplean el protocolo HTTPS, que posibilita el acceso seguro y cifrado. Además, se usan tecnologías como TLS para cifrar las PWA.

Icono

Para poder instalarse en los dispositivos, las PWA necesitan de un icono para su acceso directo. Este icono debe estar disponible en varios tamaños para los diferentes tipos de pantallas en los que se vaya a ver. Este estará declarado en el manifiesto.

Ventajas de las Progressive Web Apps

Estas son las principales ventajas que ofrecen las Aplicaciones Web Progresivas.

• Pueden lanzar notificaciones push en el dispositivo.
• Los tiempos de carga son menores.
• Mejor experiencia de usuario que las Web Apps.
• Menor tasa de rebote.
• Indexables y enlazables.
• Desarrollo multiplataforma.
• Facilidad de instalación.
• Posibilidad de acceso offline.
• Mejor SEO que las Web Apps.

Desventajas de las PWA

No todo va a ser positivo, las Aplicaciones Web Progresivas también tienen desventajas. Estas son algunas de ellas:

• El desarrollo de estas aplicaciones, puede ser más costoso.
• Consumen datos, tiempo y espacio en el dispositivo.
• Las PWA, no pueden acceder a todas las funcionalidades del dispositivo, como por ejemplo la huella dactilar o el Bluetooth.

Ejemplos de Progressive Web Apps

Aquí te dejo unos ejemplos de Aplicaciones Web Progresivas populares.

Pinterest: Las primeras aplicaciones nativas de Pinterest fueron un fracaso, la experiencia de usuario era muy mala, ya que los contenidos tardaban mucho en cargar. El equipo de Pinterest decidió empezar el desarrollo de cero con una PWA de tan solo 150 KB. Esta app usa image lazy loading, lo que permite al usuario seguir navegando mientras se cargan las imágenes. Esto resulto en un %843 de nuevos usuarios.

---

Spotify: El objetivo de la PWA de Spotify, era captar nuevos usuarios en su versión gratuita y ofrecerles una calidad de producto increíble, y conseguir que adquiriesen la versión de pago. Este objetivo lo superaron pasando de un %26,6 de usuarios que pasan al plan premium, a un %46 tras el lanzamiento de la PWA.

---

Uber: El equipo de Uber desarrolló Fusion.js para su PWA, un Framework para agilizar la aplicación, aumentar las interacciones y hacer la aplicación más amigable para el usuario. Esto resultó en una PWA increíblemente rápida, con una velocidad de carga de 3 segundos, incluso en una conexión 2G.

Si quieres ver más casos de éxito, puedes visitar la página de estadísticas de PWA.

---

Conclusión

Como habrás podido ver, las Progressive Web Apps nos ofrecen muchas ventajas para mejorar nuestros datos. Muchas empresas han optado ya por desarrollar PWAs, y tú, ¿Te animas a crear tu primera Aplicación Web Progresiva? ¡Cuéntanos en comentarios!