PWA
Junio de 2022
Una PWA le permite instalar la aplicación desde la ventana del navegador. Está disponible en su teléfono como una aplicación nativa y funciona sin conexión.
¿Qué es PWA?
PWA es la abreviatura de Progressive Web App. El término fue introducido por primera vez por Google en 2015.
Progressive web app (PWA) o aplicación web progresiva es una solución basada en la web tradicional que todos conocemos,
aunque incorpora algunas particularidades que la hacen parecerse a una app nativa para teléfonos móviles y tabletas.
Cada proyecto es independiente y el nivel de adaptación de la web al formato app es progresivo, por lo que puede que
visitemos un site con una PWA casi idéntica a una app o quizá sea una web con algunos avances.
Elementos de PWA
Google ha publicado una lista de verificación de elementos para aplicaciones web progresivas. Así, mira estos cuatro requisitos mínimos para que una aplicación sea una PWA:
• Manifiesto de la aplicación web: Este es solo un archivo json que brinda metainformación sobre la aplicación web. Tiene información como el icono de la aplicación (que un usuario ve después de instalarla), el color de fondo, el nombre de la aplicación, el nombre corto, etc. Puede escribir este archivo de manifiesto usted mismo o puede usar herramientas para generar uno.
• Trabajadores de servicio: Los Service Workers son trabajadores controlados por eventos que se ejecutan en segundo plano de una aplicación y actúan como un proxy entre la red y la aplicación. Son capaces de interceptar las solicitudes de red y la información de caché para ti en segundo plano. Esto se puede usar para cargar datos para uso sin conexión. Son un script javascript que escucha eventos como buscar e instalar, y realizan tareas.
• Icono: Esto se utiliza para proporcionar un icono de aplicación cuando un usuario instala el PWA en su cajón de aplicaciones. Una imagen jpeg estará bien. La herramienta de manifiesto que viste anteriormente ayuda a generar iconos para múltiples formatos.
• Servido sobre HTTPS: Para ser una PWA, la aplicación web debe servirse a través de una red segura. Con servicios como Cloudfare y LetsEncrypt, es realmente fácil obtener un certificado SSL. Ser un sitio seguro no es solo una práctica recomendada, sino que también establece tu aplicación web como un sitio confiable para los usuarios que demuestran confianza y evitan ataques de intermediarios.
• Manifiesto de la aplicación web: Este es solo un archivo json que brinda metainformación sobre la aplicación web. Tiene información como el icono de la aplicación (que un usuario ve después de instalarla), el color de fondo, el nombre de la aplicación, el nombre corto, etc. Puede escribir este archivo de manifiesto usted mismo o puede usar herramientas para generar uno.
• Trabajadores de servicio: Los Service Workers son trabajadores controlados por eventos que se ejecutan en segundo plano de una aplicación y actúan como un proxy entre la red y la aplicación. Son capaces de interceptar las solicitudes de red y la información de caché para ti en segundo plano. Esto se puede usar para cargar datos para uso sin conexión. Son un script javascript que escucha eventos como buscar e instalar, y realizan tareas.
• Icono: Esto se utiliza para proporcionar un icono de aplicación cuando un usuario instala el PWA en su cajón de aplicaciones. Una imagen jpeg estará bien. La herramienta de manifiesto que viste anteriormente ayuda a generar iconos para múltiples formatos.
• Servido sobre HTTPS: Para ser una PWA, la aplicación web debe servirse a través de una red segura. Con servicios como Cloudfare y LetsEncrypt, es realmente fácil obtener un certificado SSL. Ser un sitio seguro no es solo una práctica recomendada, sino que también establece tu aplicación web como un sitio confiable para los usuarios que demuestran confianza y evitan ataques de intermediarios.
Ventajas PWA
Con la progressive web app, el usuario puede seguir consultando la web, aunque haya perdido la conexión. No necesitamos
entrar a Google Play o Apple Store para descargar nada. Solo se requiere, al principio, una conexión a internet y un
navegador que puede ser Chrome, Safari o Firefox. Y Cualquier usuario puede ‘instalarla’ en la pantalla de inicio de
su dispositivo.
• 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.
• 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, 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.
• 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.
• 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, 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.
Desventajas PWA
Las desventajas son mínimas, pero se hace necesario considerarlas a la hora de plantearnos su implementación.
• No aparecen en las tiendas de aplicaciones: Que las PWA se encuentren a través de un buscador ha sido determinado como una ventaja por la amplitud de público a la que se puede llegar. Sin embargo, muchas personas solo pretenden encontrar Apps a través de los markets. En ese caso, cuando el usuario busca la aplicación, lo hace de manera totalmente consciente y con predisposición a instalarla. Es posible que al realizar una búsqueda web no tengan intención de añadir nada a su smartphone, visitando simplemente una página concreta para satisfacer una necesidad específica. De hecho, al no ser las Progressive Web App tan conocidas por el usuario, puede que lo asocien a una aplicación corriente y descarten la posible instalación.
• Consumen mucha batería: Los códigos que emplean son web, por lo que terminan por consumir más batería que una App nativa, que emplea códigos específicamente diseñado para el dispositivo. Es necesario considerar que se trata de un punto negativo destacable, que puede hacer que ciertos usuarios descarten su uso o que lo disminuyan notablemente, sobre todo al estar fuera de casa o en algún sitio sin posibilidad de carga.
• El uso de funcionalidades nativas es limitado: Que las Progressive Web App puedan utilizar determinadas funciones nativas (y evolucionen en este aspecto) es algo positivo, ya que no en todos los casos se necesitará abarcar tantas tareas. Sin embargo, esto sí limita el empleo de PWA para ciertas Apps en relación a su fin. Si esta va estrechamente asociada a una funcionalidad como el uso de NFC o de los contactos del teléfono, se deberá descartar esta opción y apostar por el desarrollo de una App nativa, que ofrecerá un margen de actuación mucho más amplio.
• El público está acostumbrado a Apps nativas: A muchas personas les cuesta aceptar cambios: no todo el mundo es dado a probar opciones que para ellos son nuevas. Si a esto le sumamos el desconocimiento general que existe sobre estas tecnologías, puede que gran parte del público tenga dudas sobre el proceso y la finalidad y, por tanto, resulte reacio a dar el paso.
• No aparecen en las tiendas de aplicaciones: Que las PWA se encuentren a través de un buscador ha sido determinado como una ventaja por la amplitud de público a la que se puede llegar. Sin embargo, muchas personas solo pretenden encontrar Apps a través de los markets. En ese caso, cuando el usuario busca la aplicación, lo hace de manera totalmente consciente y con predisposición a instalarla. Es posible que al realizar una búsqueda web no tengan intención de añadir nada a su smartphone, visitando simplemente una página concreta para satisfacer una necesidad específica. De hecho, al no ser las Progressive Web App tan conocidas por el usuario, puede que lo asocien a una aplicación corriente y descarten la posible instalación.
• Consumen mucha batería: Los códigos que emplean son web, por lo que terminan por consumir más batería que una App nativa, que emplea códigos específicamente diseñado para el dispositivo. Es necesario considerar que se trata de un punto negativo destacable, que puede hacer que ciertos usuarios descarten su uso o que lo disminuyan notablemente, sobre todo al estar fuera de casa o en algún sitio sin posibilidad de carga.
• El uso de funcionalidades nativas es limitado: Que las Progressive Web App puedan utilizar determinadas funciones nativas (y evolucionen en este aspecto) es algo positivo, ya que no en todos los casos se necesitará abarcar tantas tareas. Sin embargo, esto sí limita el empleo de PWA para ciertas Apps en relación a su fin. Si esta va estrechamente asociada a una funcionalidad como el uso de NFC o de los contactos del teléfono, se deberá descartar esta opción y apostar por el desarrollo de una App nativa, que ofrecerá un margen de actuación mucho más amplio.
• El público está acostumbrado a Apps nativas: A muchas personas les cuesta aceptar cambios: no todo el mundo es dado a probar opciones que para ellos son nuevas. Si a esto le sumamos el desconocimiento general que existe sobre estas tecnologías, puede que gran parte del público tenga dudas sobre el proceso y la finalidad y, por tanto, resulte reacio a dar el paso.
PWA es el futuro
No se puede decir que PWA terminará con aplicaciones nativas en el futuro. Pero aún existe un interés creciente por este enfoque en la comunidad.
En resumen, las aplicaciones web progresivas son una evolución natural de las aplicaciones web que difuminan la barrera entre la web y las aplicaciones, pudiendo realizar tareas que generalmente solo las aplicaciones nativas podían llevar a cabo.
En resumen, las aplicaciones web progresivas son una evolución natural de las aplicaciones web que difuminan la barrera entre la web y las aplicaciones, pudiendo realizar tareas que generalmente solo las aplicaciones nativas podían llevar a cabo.