Saltar al contenido

Las PWA convierten los sitios web en aplicaciones: así es como

octubre 16, 2021
05ULMhCB6uHHlEQdWyy5V2Z 1.1629405588.fit lim.size 1200x630

Tal vez haya encontrado un sitio web que propone algo como «instalar esto como una aplicación web», como hice recientemente en la página web de Google Meet. Ese es un ejemplo de cómo puede obtener una aplicación web progresiva (o PWA). Meet PWA estuvo disponible recientemente en algunos navegadores web, pero varios otros servicios de Google han ofrecido la opción durante años. Otros sitios similares a aplicaciones como Outlook, Spotify e Instagram son más buenos ejemplos de sitios listos para el tratamiento de PWA. Profundicemos en qué son exactamente estas PWA, cómo puede comenzar con ellas y qué beneficios ofrecen.

¿Qué es una aplicación web progresiva?

La web se ha vuelto cada vez más parecida a una aplicación. Los sitios web pueden enviar notificaciones, trabajar sin conexión, almacenar datos en cachés locales o bases de datos persistentes y ejecutarse en segundo plano. Muchos sitios web se comportan más como aplicaciones que simplemente como sitios informativos. El estándar Progressive Web App ofrece a los sitios web la oportunidad de igualar más como las aplicaciones independientes, descartando los elementos del navegador que solo abarrotan su interfaz.

Spotify funcionando como PWA.

Spotify funcionando como PWA.

Las aplicaciones web progresivas aprovechan las mismas tecnologías que impulsan los sitios web avanzados de hoy, incluidos HTML, CSS y JavaScript. Pero también utilizan algunos estándares web más nuevos y menos comunes, incluido el manifiesto de aplicación web (para definir el nombre, los iconos, la URL, los colores y las configuraciones de la aplicación) y los trabajadores de servicio, que permiten que las PWA funcionen sin conexión sin una conexión a Internet.

Quizás se pregunte por qué el término progresivo entra en juego. Surge de una estrategia de desarrollo web llamada mejora progresiva. En esta estrategia, el desarrollador se centra primero en el contenido y las funciones principales y luego agrega capacidades adicionales si el navegador y la plataforma ofrecen más adornos en los bordes. Relacionado con la mejora progresiva está el diseño web receptivo, en el que el contenido está diseñado para cambiar de tamaño para plataformas específicas, como dispositivos móviles o de escritorio.

Lamentablemente, uno de mis navegadores web favoritos, Firefox, no admite PWA en el escritorio, aunque sí en Android. (Lo mismo vale para el innovador navegador web Opera). Mozilla había estado trabajando en un proyecto para agregarlo a su excelente navegador que respeta la privacidad, pero la organización anunció el cese de ese esfuerzo. Se puede esperar que la situación cambie en el futuro.

Mientras tanto, echemos un vistazo a lo que puede ganar con el uso de PWA (junto con los inconvenientes), cómo puede instalarlos en varias plataformas y cuáles son mis favoritos.

¿Cuáles son las ventajas y desventajas de las PWA?

Como se mencionó, las PWA le permiten concentrarse en la carne de un sitio web similar a una aplicación, sin toda la interfaz del navegador y los bordes de las ventanas que normalmente tiene en el navegador. Solo ve un menú, el menú del sitio de la aplicación, en lugar de ambos y el menú del navegador, el cuadro de búsqueda y la barra de herramientas. Esos elementos del navegador a veces son distracciones innecesarias y simplemente agregan desorden.

También puede encontrar que las PWA incluyen más capacidades que las aplicaciones instaladas. «¿Como puede ser?» usted pregunta. Bueno, muchos sitios web se actualizan constantemente, mientras que una aplicación solo se actualiza cuando instala la actualización. A menudo, un servicio web lanza nuevas funciones para su sitio web primero y solo después las agrega a sus aplicaciones independientes, si es que alguna vez las agrega.

Otras ventajas de las aplicaciones web progresivas son que son más ligeras que las aplicaciones nativas y son independientes de la plataforma. En otras palabras, los desarrolladores no necesitan una aplicación diferente para dispositivos móviles y de escritorio, siempre que se ejecute en la plataforma un navegador que admita PWA. En Windows, no hay necesidad de desorden de Registro o módulos de código auxiliar. Un desarrollador señala que Twitter Lite PWA ocupa solo el 3% del almacenamiento requerido por su contraparte de la aplicación nativa de Android. Esto beneficia tanto a los usuarios finales como a los desarrolladores, como veremos en un momento.

Finalmente, las PWA eluden las tiendas de aplicaciones móviles, que pueden ser restrictivas, especialmente para los desarrolladores que tienen que rendir homenaje a los proveedores de la plataforma. Para el usuario final, significa que las instalaciones son increíblemente rápidas y sencillas.

No hay un rayo de luz sin una nube oscura

Una desventaja de una PWA es que la aplicación sigue siendo un sitio web y, aunque muchas están diseñadas para seguir funcionando sin conexión, algunas no funcionarán completamente sin una conexión. Sin embargo, este soporte web a veces puede ser una ventaja: puede presionar la tecla de acceso rápido de actualización del navegador (F5 en Windows, Command-R en macOS) para volver a cargar una aplicación de sitio molesta, mientras que un programa instalado que no responde es más complicado y a menudo requiere un reinicio.

Algunas PWA también requieren que inicie sesión con frecuencia como lo haría con un sitio web, donde la mayoría de las aplicaciones simplemente comienzan a funcionar cuando las enciende. Y hay ciertos tipos de aplicaciones para las que las PWA no son apropiadas. Las aplicaciones nativas codificadas en el metal de su sistema brindan un rendimiento más rápido: no querrá ejecutar un videojuego AAA o un editor de video como un sitio web.

Si tiene una aplicación instalada y una PWA para el mismo servicio en su dispositivo, podría generar confusión para encontrar la que desea. Mi consejo para eso: simplemente desinstale la aplicación nativa; esto probablemente le ahorrará recursos del sistema. Por último, tenga en cuenta que, al igual que con las ventanas del navegador, puede tener varias instancias de la misma aplicación web ejecutándose simultáneamente; esto se puede ver como una ventaja (si desea más de un conjunto de contenido en la aplicación) o una desventaja (si se confunde con varias ventanas que ejecutan la misma aplicación).

Otro problema con las PWA es la mera capacidad de descubrimiento. Dado que no hay una tienda de aplicaciones PWA, es difícil saber qué sitios se pueden instalar como esta clase de aplicación. La experiencia también depende de qué tan bien implementó el desarrollador la funcionalidad de PWA; algunos ofrecen una configuración clara y experiencias de uso, mientras que otros no.

¿Qué PWA debería utilizar?

Ciertos tipos de aplicaciones web tienen mucho sentido para usar como PWA: las aplicaciones de transmisión de música, comunicación y redes sociales son buenas candidatas. Dos PWA que ejecuto todo el tiempo son Spotify y la versión web de Outlook, pero por razones muy diferentes.

Primero, Spotify: ocasionalmente miraba en mi página de configuración de Aplicaciones y características en Windows 10 y veía que Spotify estaba ocupando más de un GB de espacio en el disco. Me pregunté por qué era necesario porque no necesitaba la aplicación para descargar cada canción mientras la tocaba. Después de cambiar a PWA, la aplicación ocupa menos de 5 MB.

Utilizo Outlook Web en lugar de la aplicación estándar de Windows Mail simplemente porque ofrece más confiabilidad, velocidad y funciones. Se habla de que Microsoft reemplace la aplicación Windows 10 Mail con una variación de la versión PWA, y eso no puede suceder lo suficientemente pronto en lo que a mí respecta.

Twitter es otro buen candidato para el uso de PWA, pero ya ofrece excelentes aplicaciones nativas en la mayoría de las plataformas. Comencé a usar Twitter como PWA porque la aplicación de la tienda de Windows no me permitía cambiar fácilmente entre mi cuenta personal y laboral, mientras que la versión web sí. Google Meet, Skype y Zoom también se pueden instalar como aplicaciones web progresivas.

Es posible que algún día instale una aplicación sin siquiera darse cuenta de que es una PWA, especialmente ahora que Windows se está moviendo hacia su inclusión en Microsoft Store, en la lista de programas del menú Inicio y en la sección Aplicaciones y características donde desinstala aplicaciones normales. Chrome OS ya incluye PWA en su tienda de aplicaciones.

¿Cómo se instala una aplicación web progresiva?

Una gran ventaja de los PWA es su facilidad de instalación, y el proceso sigue simplificándose para los navegadores web compatibles con PWA, como Chrome y Edge. Apple se encuentra en una posición peculiar cuando se trata de PWA: puede instalar una PWA en macOS excepto en Safari; en iOS, puede instalar PWA solamente en Safari. Esto es lo que debe hacer para instalar una PWA en cada sistema operativo principal (en orden de popularidad).

Instalación de PWA en Android

PWA en Android

Izquierda: Instale la opción de aplicación en Chrome; Centro: después de presionar Instalar aplicación; Izquierda: instalar en Firefox.

En el navegador Chrome: Para los sitios que ofrecen la funcionalidad PWA por completo, verá una opción Instalar aplicación en el menú principal de Chrome. Una vez que seleccione esa opción, el icono de la aplicación aparece en su pantalla de inicio. (Tenga en cuenta que puede elegir Agregar a la pantalla de inicio para los sitios que no ofrecen funciones de PWA). Las opciones de pulsación prolongada aún incluyen Desinstalar, pero una opción reveladora a continuación es Configuración del sitio, algo que no ve para los instalados en la tienda. aplicaciones.

En Firefox: Para los sitios que se pueden convertir en PWA, el menú de Firefox tiene una opción de instalación simple. Después de tocar esta opción, verá el cuadro de diálogo Agregar a la pantalla. Los íconos de la pantalla de inicio para las PWA creadas por Firefox tienen un pequeño logotipo naranja de Firefox en la parte inferior derecha del logotipo de la aplicación principal. Al igual que con las aplicaciones creadas por Chrome, simplemente elija Desinstalar en el menú contextual de presión prolongada para deshacerse de una. A diferencia de los creados en Chrome, no ve la opción Configuración del sitio, para una sensación de aplicación más real.

Recomendado por nuestros editores

Instalación de PWA en Windows

En Edge: El navegador web predeterminado de Windows proporciona la mejor opción para instalar PWA en el sistema operativo de escritorio de Microsoft. Esto se debe a que coloca la aplicación en el menú Inicio como cualquier otra aplicación que instale de la forma habitual (ya sea con un instalador de programas descargado o desde la aplicación Microsoft Store). Así es como funciona:

Instalar PWA en Microsoft Edge

  1. Navegue hasta el sitio web que desea instalar como PWA.

  2. Si la aplicación se puede instalar como PWA, puede hacer clic en el icono en el lado derecho de la barra de direcciones que parece tres cuadrados y un signo más (el texto flotante es “Aplicación disponible. Instalar [app name]) o puede elegir Aplicaciones en el menú de desbordamiento de tres puntos y luego hacer clic en Instalar [app name]. Para algunas PWA, el cuadro Instalar aparece automáticamente.

  3. Eso es todo. Su nueva aplicación aparece en el menú Inicio, obtiene un icono distintivo en la barra de tareas (no el icono de Edge) y se puede convertir en un acceso directo en el escritorio. Si desea desinstalar la PWA, puede hacerlo desde el menú contextual del menú Inicio, desde la página Configuración de aplicaciones y características de Windows o desde la página Administrar aplicaciones de Edge.

En el navegador Chrome: Al igual que con Edge, Chrome tiene un botón en la barra de direcciones que aparece para los sitios que ofrecen funcionalidad PWA. (Tenga en cuenta que el navegador de privacidad y cripto-ganancia Brave tiene soporte para PWA que es casi idéntico al de Chrome).

Instalación de PWA en el navegador Chrome

  1. Haga clic en el botón Instalar aplicación en la barra de direcciones o elija Instalar [app name] en el menú de desbordamiento de tres puntos en la parte superior derecha.

  2. Después de esto, verá la aplicación sin borde del navegador y un ícono para ella en su menú Inicio. Tenga en cuenta que puede desinstalar las PWA creadas por Chrome solo desde su ventana o el navegador Chrome, no desde la Configuración de Windows. Si elige Desinstalar en el menú Inicio, la PWA lo lleva sin ayuda al antiguo panel de control de Programas y características.

Instalación de PWA en iOS y iPadOS

PWA en iOS

Como se mencionó anteriormente, Apple solo permite que Safari cree PWA en iOS y iPadOS; los navegadores de terceros quedan fuera de la fiesta. Safari no usa los términos Instalar en pc y aplicación como lo hacen todos los demás navegadores que admiten PWA. Para instalar uno en iOS o iPadOS, cargue el sitio compatible con PWA, elija la flecha hacia arriba Compartir en la parte inferior de la pantalla y seleccione Agregar a la pantalla de inicio. Tenga en cuenta que puede hacer lo mismo para cualquier sitio web, pero no obtendrá la funcionalidad sin conexión de una verdadera PWA.

Cuando creé una PWA para Instagram, el icono y la aplicación se veían idénticos a la versión de la App Store, pero en lugar de una opción Eliminar aplicación en el menú de pulsación larga, vi un Eliminar …

close