¿Qué son las aplicaciones web progresivas y cómo instalo una?

¿Qué son las aplicaciones web progresivas y cómo instalo una?

Las aplicaciones dominan tu teléfono. Durante mucho tiempo, las aplicaciones no influyeron en su escritorio o navegador de la misma manera. Eso ha cambiado en los últimos años. Las aplicaciones web progresivas (PWA) están creciendo en importancia y alterando nuestras interacciones con todo tipo de sitios web.





Pero, ¿qué es exactamente una aplicación web progresiva? ¿Qué hace una PWA que no hace un sitio web? Esto es lo que necesita saber sobre las aplicaciones web progresivas.



¿Qué es una aplicación web progresiva?

Las aplicaciones web progresivas son aplicaciones web que ofrecen un sitio regular a los usuarios, pero aparecen como una aplicación móvil nativa. Las PWA intentan llevar la usabilidad de una aplicación móvil nativa al conjunto de funciones del navegador moderno, aprovechando al máximo los avances en ambas áreas de desarrollo.





Entonces, ¿qué define a una PWA?

  • Universal : una PWA debe funcionar sin problemas (bueno, casi) para todos los usuarios, independientemente de su navegador.
  • Sensible : Las PWA deberían funcionar con cualquier dispositivo, como su computadora portátil, tableta, teléfono inteligente, etc.
  • Diseño : el diseño debe imitar las aplicaciones móviles nativas, es decir, menús simplificados y fáciles de encontrar, con interactividad simple para funciones avanzadas.
  • A salvo : Las PWA deben usar HTTPS para mantener seguros los datos del usuario.
  • Descubrible: los usuarios pueden encontrar PWA y son fácilmente identificables como una aplicación (en lugar de un 'sitio').
  • Compromiso: una PWA debe tener acceso a funciones de participación nativas como notificaciones push.
  • Actualizaciones: Las PWA permanecen actualizadas y ofrecen las últimas versiones de un servicio o sitio.
  • Instalación: permite a los usuarios 'instalar' fácilmente la PWA en su pantalla de inicio sin necesidad de una tienda de aplicaciones.
  • Intercambio: Las PWA solo requieren una única URL para compartir, sin ninguna instalación.

Como puede ver, las PWA tienen como objetivo proporcionar a los usuarios una experiencia de sitio web completa con las funciones optimizadas y el diseño de interfaz de una aplicación nativa.



¿Cómo funciona una aplicación web progresiva?

La clave de las aplicaciones web progresivas son los trabajadores de servicios de navegador.

Un trabajador de servicio es un script que se ejecuta en segundo plano en su navegador, 'separado de una página web, lo que abre la puerta a funciones que no necesitan una página web o la interacción del usuario'. Puede utilizar trabajadores de servicios como notificaciones push y sincronización en segundo plano por el momento, pero el futuro inmediato de PWA le da a estos scripts un mayor poder.



Como tal, los trabajadores del servicio forman la base del estándar PWA, utilizando la caché web para obtener resultados casi instantáneos.

Antes de los trabajadores de servicios, el script de caché del navegador al que acudir era Application Cache (o App Cache). App Cache se presenta en una amplia gama de servicios sin conexión primero, pero era algo propenso a errores. Además, App Cache tiene varias limitaciones bien conocidas, como Una lista aparte explica.



Pero el principal problema para los desarrolladores es la falta de interacción directa con exactamente cómo funciona AppCache, lo que impide que los desarrolladores solucionen los problemas con precisión a medida que surgen. A su vez, los sitios web y los servicios con funcionalidad completa fuera de línea eran una elección arriesgada.

Los trabajadores de servicios, sin embargo, solo duran el tiempo que se requiere su acción. En una PWA, cuando hace clic en algo o usa una función, un trabajador del servicio entra en acción. El trabajador del servicio (recuerde, es un script) procesa el evento y decide si la caché fuera de línea puede completar la solicitud. La idea es que existen múltiples cachés sin conexión para que la PWA elija, lo que brinda una gama mucho más amplia de funciones sin conexión.

Además, la caché no es solo para aumentar la velocidad sin conexión. Por ejemplo, se dirige a una PWA, pero su conexión es extremadamente irregular. El trabajador del servicio sirve un caché anterior, en pleno funcionamiento, sin interrumpir su experiencia.

Compatibilidad con navegadores de aplicaciones web progresivas

Hay dos requisitos para usar una aplicación web progresiva: un navegador compatible y un servicio habilitado para PWA.

Primero, veamos los navegadores. Tiene dos opciones para comprobar la compatibilidad con el navegador PWA. El primero es el de Jake Archibald. ¿Está listo el trabajador de servicio? ? que muestra cómodamente el estado de compatibilidad con PWA de los principales navegadores, además de Internet de Samsung.

Para obtener una descripción más detallada de la compatibilidad con el navegador PWA, debe consultar Puedo usar , un sitio web que se especializa en enumerar la implementación de diversas tecnologías web y de navegador por versión del navegador. Por ejemplo, si ingresa 'trabajadores del servicio' en la barra de búsqueda, encontrará una tabla que muestra el número de versión con el que cada navegador implementó los trabajadores del servicio PWA.

La tabla Can I Use Service Workers confirma que todos los navegadores principales admiten PWA. También ilustra el soporte de PWA para varios navegadores de escritorio alternativos y navegadores móviles.

Desglosándolo un poco más:

  • Navegador de escritorio (soporte completo): Chrome, Firefox, Opera, Edge, Safari
  • Navegador de escritorio (soporte parcial / versión desactualizada): Navegador QQ, Navegador Baidu
  • Navegador móvil (soporte completo): Chrome, Firefox, Safari, UC Browser, Internet de Samsung, Mint Browser, Wechat
  • Navegador móvil (soporte parcial / versión desactualizada): Navegador QQ, navegador Android, Opera Mobile

Por lo tanto, los principales navegadores admiten PWA. Microsoft Edge y Safari son las adiciones más recientes a la lista de soporte completo. Por el contrario, tanto QQ Browser como Baidu Browser ahora usan versiones desactualizadas y, como tales, han caído en el segundo nivel.

Cómo encontrar e instalar una aplicación web progresiva

Ahora que sabe qué navegador utilizar, puede pensar en buscar e instalar una PWA. Para este ejemplo, usaré un Samsung Galaxy S8 con Google Chrome.

Las aplicaciones web progresivas están en todas partes. Muchas empresas han adaptado sus sitios y servicios para ofrecer una versión de aplicación web progresiva. En muchos casos, encontrará una PWA por primera vez cuando se dirija a la página de inicio o al sitio móvil de servicio, lo que activa la Añadir a la pantalla principal caja de diálogo.

Vea el video a continuación para ver qué sucede cuando visita el Sitio móvil de Twitter .

Por supuesto, visitar innumerables sitios y esperar ver el disparador de la pantalla de inicio no es útil. De hecho, lleva mucho tiempo. Afortunadamente, no tiene que hacer eso, ya que hay un par de sitios dedicados a catalogar PWA.

Primer intento salir de la red . Enumera una gama bastante decente de PWA, con nuevas opciones que aparecen con frecuencia. A continuación, pruebe pwa.rocks. Tiene una selección más pequeña, pero algunas PWA útiles que querrá agregar a su dispositivo.

Además, en enero de 2019, Chrome 72 para Android se envió con Trusted Web Activity (TWA). TWA permite que las pestañas de Chrome se abran en modo independiente. A su vez, esto permite que las PWA aparezcan en la tienda de aplicaciones de Google Play. Las primeras PWA que aparecieron en Google Play fueron Twitter Lite , Instagram Lite y Google Maps Go , y aparecerán más con el tiempo.

Galería de imágenes (2 imágenes) Expandir Expandir Cerrar

¿Las aplicaciones web progresivas reemplazarán a las aplicaciones nativas?

Las aplicaciones web progresivas son un excelente paso híbrido entre su navegador y una aplicación móvil nativa. ¿Las PWA reemplazarán por completo a las aplicaciones nativas? Eso es un duro no de mi parte. Las PWA son excelentes como una oferta liviana, pero dado que actualmente se enfocan predominantemente en replicar sitios y servicios existentes, no reemplazarán a las aplicaciones nativas.

Al menos, no por el momento.

juegos para jugar en tv con telefono

Sin embargo, las PWA funcionan. Los datos disponibles en PWA Stats también respaldan esto. Aquí hay algunos números interesantes que ilustran cómo las PWA están alterando nuestras interacciones con los sitios web de uso común:

  • Trivago vio un aumento del 150 por ciento en la participación de los usuarios que agregaron su PWA a una pantalla de inicio.
  • La página de inicio de Forbes 'PWA' se carga completamente en solo 0,8 segundos, mientras que las impresiones por visita aumentaron un 10 por ciento. La PWA de Forbes también vio el doble de la duración de las sesiones de los usuarios.
  • Twitter Lite experimentó un aumento del 65 por ciento en las páginas por sesión, con un aumento masivo del 75 por ciento en los tweets. También es interactivo 'en menos de 5 segundos a través de 3G'.
  • Alibaba experimentó un aumento del 76 por ciento en las conversiones móviles.

Las PWA aún no son convencionales. Pero con la amplia gama de beneficios que brindan, como ahorrar espacio en su dispositivo, escuchará más sobre ellos en el futuro.

Cuota Cuota Pío Correo electrónico Una guía para principiantes para animar el habla

Animar el habla puede ser un desafío. Si está listo para comenzar a agregar diálogos a su proyecto, analizaremos el proceso por usted.

Leer siguiente Temas relacionados Sobre el Autor Gavin Phillips(945 Artículos publicados)

Gavin es el editor junior de Windows and Technology Explained, colaborador habitual del Really Useful Podcast y crítico de productos habitual. Tiene una licenciatura (con honores) en escritura contemporánea con prácticas de arte digital saqueadas de las colinas de Devon, así como más de una década de experiencia profesional en escritura. Disfruta de grandes cantidades de té, juegos de mesa y fútbol.

Más de Gavin Phillips

Suscríbete a nuestro boletín

¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!

Haga clic aquí para suscribirse