han pasado años desde el comienzo de la era del smartphone. Con él llegó la era de las aplicaciones nativas. Las aplicaciones siguen desempeñando un papel importante en nuestra vida diaria, y muchos propietarios de negocios se han preguntado varias veces: ¿deberíamos tener una aplicación? Por supuesto, la única respuesta a eso es-depende. Crear y mantener una aplicación nativa es engorroso y, a menudo, bastante caro. Afortunadamente, hay otra opción. Esta opción combina las ventajas de una aplicación nativa con la tecnología que utilizamos en la web: la aplicación web progresiva, también conocida como PWA.

¿Qué es un PWA?

PWA significa progresiva de la aplicación web. Esta es una aplicación creada a partir de las tecnologías web que todos conocemos y amamos, como HTML, CSS y JavaScript, pero con una sensación y funcionalidad que rivaliza con una aplicación nativa real. Gracias a un par de adiciones inteligentes, puede convertir casi cualquier sitio web en una aplicación web progresiva. Esto significa que puede crear una PWA bastante rápido, en lo que respecta a una aplicación nativa que es bastante difícil de desarrollar. Además, puedes ofrecer todas las funciones de las aplicaciones nativas, como notificaciones push, soporte sin conexión y mucho más.

Muchos sitios que encuentras en línea son en realidad una aplicación web progresiva. Toma twitter.com por ejemplo. Si visita ese sitio en su teléfono inteligente, puede instalarlo en la pantalla de inicio. Ahora, al abrir el sitio de Twitter guardado, notarás que se ve y funciona como una aplicación nativa. No hay ventana de navegador ni nada. No hay diferencia en ejecutarlo desde un iPhone o un teléfono inteligente Android. Simplemente inicie sesión y estará listo para comenzar. Ese es un beneficio importante de crear su aplicación web con una PWA en mente.

Las PWA están ganando popularidad. Muchos sitios grandes son PWA, como Starbucks.com, Pinterest.com, Washingtonpost.com y Uber.com son realmente instalables en su pantalla de inicio y ofrecen una experiencia comparable a sus aplicaciones nativas.

¿Cuál es la diferencia entre una aplicación nativa y una PWA?

Una aplicación nativa, como las que descargas de la App Store de Apple o la Play Store de Google, a menudo está construida en un lenguaje de programación específico para esa plataforma. Para las aplicaciones de iOS, eso sería Rápido y para las aplicaciones de Android, Java. Si desea crear una aplicación para esas plataformas, necesita conocer la tecnología. Sí, hay atajos, pero estos vienen con sus propias limitaciones. Si quieres tener una aplicación en todas las plataformas móviles, necesitas conocer las diferentes tecnologías. No hay una manera fácil de construir uno y publicarlo en todas las tiendas.

por supuesto, hay maneras de obtener lo mejor de ambos mundos. Una aplicación web progresiva, por ejemplo. Esto se ejecuta en el navegador y, una vez guardado en la pantalla de inicio, funciona como una aplicación nativa. Incluso obtiene acceso al hardware y software subyacente al que el navegador no puede acceder por razones de seguridad. Si el PWA funciona bien, los usuarios nunca sabrán que están utilizando una aplicación basada en la web en lugar de una nativa.

Hay algunas advertencias, por supuesto. Si bien los navegadores han adoptado rápidamente la tecnología para esto, todavía hay algunas limitaciones. En iOS, la tecnología necesaria funciona irregular en Safari. Apple no (quiere) soportar todo todavía, por lo que es un poco difícil obtener la misma experiencia en todas partes.

¿Cuáles son los beneficios de un PWA?

La razón principal por la que todo el mundo está persiguiendo aplicaciones es porque ofrecen una mayor interacción. Los usuarios que instalan tu aplicación son tus mayores fans y es más probable que conviertan su uso en ventas o suscripciones. Gracias a las notificaciones push, es mucho más fácil volver a interactuar con los usuarios. Las aplicaciones pueden ofrecer una excelente experiencia que puede funcionar bien para una marca.

Hablamos sobre algunas de las ventajas de las PWA en este artículo, pero aquí hay un breve resumen:

• No tiene que pasar por el proceso para ingresar a diferentes tiendas de aplicaciones
• Puede crear PWA con tecnologías web comunes
• A menudo son más baratos de construir
• Dado que está convirtiendo su sitio en una aplicación, tendrá menos bases de código para mantener
• Las PWA son receptivas y funcionan con muchos tamaños de pantalla diferentes
• Las PWA son suaves, rápidas y ligeras
• No es necesario entregar grandes los trozos de dinero para Google y Apple
• Funcionan sin conexión, a diferencia de su sitio normal
• Los PWA se pueden descubrir a través de los motores de búsqueda (que tienen mucho más grandes público que tiendas de aplicaciones. Además, si lo desea, puede seguir distribuyendo sus PWA a través de tiendas de aplicaciones)
• Puede usar notificaciones push para volver a interactuar con los usuarios
• La instalación de una PWA puede generar una mayor interacción

Sin embargo, las aplicaciones nativas a veces ganan. Las PWA obtienen un acceso cada vez más profundo al sistema operativo de un teléfono inteligente, pero una aplicación nativa puede profundizar aún más. Además, hay límites a lo que una PWA puede hacer. Por ejemplo, los PWA no son la mejor opción cuando quieres crear juegos de alto rendimiento.

En general, tiene mucho sentido pensar en tener una PWA en tu estrategia móvil. Pero, la pregunta principal que debes hacerte es: ¿mi audiencia quiere esto?

¿Para quién es esto?

¿Todo el mundo debería simplemente construir un PWA y terminar con él? No, considera tu negocio y, lo que es más importante, tu público objetivo. ¿Están usando aplicaciones? ¿No es esta una forma demasiado compleja de llegar a lo que quieres lograr? De nuevo, como todo, necesitas investigar las necesidades de tu audiencia. Pregúntate, ¿qué quieres que haga esta tecnología? Dónde están tus usuarios? ¿Tienen una buena conexión de datos y un hardware sólido? ¿Cómo y dónde están usando tu contenido? ¿Y crees que una aplicación puede ayudarles a hacer mejor su trabajo?

Las PWA son increíbles y implementarlas no tiene que ser tan difícil. Pero solo porque sea fácil no significa que debas hacerlo. Si tu audiencia no lo necesita, ¿por qué construirías uno?

¿Cuáles son las preocupaciones de SEO de un PWA?

El PWA está inherentemente centrado en la web. Nació de la web y se desarrolló pensando en los motores de búsqueda para facilitar el descubrimiento. Por supuesto, puede hacer una aplicación web progresiva a partir de cualquier sitio antiguo y no se necesita mucho para hacerlo. Sin embargo, muchas PWA usan JavaScript para crear funciones más complejas y, aunque los motores de búsqueda se han vuelto aptos para renderizar JavaScript, todavía puede ser motivo de preocupación.

Al configurar una PWA, debe asegurarse de que su JavaScript esté accesible. No bloquees archivos para bots y asegúrate de que los enlaces estén disponibles. Para mejorar el proceso de renderizado, puede hacer que su marco de JavaScript use renderizado del lado del servidor.

Convertir tu sitio en un PWA no significa que mejores directamente el SEO de ese sitio. Si tiene sentido convertir tu sitio en un PWA, hazlo, pero no lo hagas por cualquier beneficio percibido de SEO. Si tienes una gran PWA, estás ofreciendo a tus usuarios una experiencia de usuario fantástica, lo que podría hacer que superes a tu competencia. En este sentido, es una buena idea echarles un vistazo para tu estrategia de SEO móvil.

¿Cuáles son los tres componentes principales?

No se necesita mucho para configurar una PWA. Hay tres cosas que debe proporcionar antes de que su sitio se convierta en una PWA válida.

• Una conexión segura (HTTPS): Las PWA solo funcionan en conexiones de confianza, debe servirlas a través de una conexión segura. Esto no es solo por razones de seguridad, sino que también es un factor de confianza muy importante para los usuarios.
• Un trabajador de servicio: Un trabajador de servicio es una pieza de script que se ejecuta en segundo plano. Esto le ayuda a determinar cómo manejar las solicitudes de red para su PWA, lo que permite realizar un trabajo más complejo.
• El archivo de manifiesto: Este archivo JSON contiene información sobre cómo debe aparecer y funcionar su PWA. Aquí, determina el nombre, la descripción, los iconos, los colores, etc.

Aquí hay un manifiesto de ejemplo de Google:

No se ve demasiado duro, ¿verdad? Un par de cosas interesantes en este listado:

• start-url: esto determina dónde debe comenzar su aplicación. Es mejor dejar que los usuarios aterricen en una página específica para tu PWA.
• display : esto le ayuda a determinar qué tipo de interfaz de usuario de navegador desea mostrar. Las opciones son: fullscreenstandaloneminimal-ui y el estándar de browser interfaz.

Estas tres cosas enumeradas anteriormente son los requisitos mínimos para ejecutar una PWA. Puede ampliar la funcionalidad a través de JavaScript (frameworks).

¿Cómo configurar una PWA?

Hay muchos recursos para probar a construir una PWA sencilla. Esto le permite tener una idea del proceso. Google tiene un tutorial excelente y fácil de seguir sobre PWA en la web.dev sitio. Mozilla tiene mucha documentación sobre la creación de aplicaciones web progresivas. Microsoft también tiene documentos de desarrollo enriquecidos sobre la creación de PWA. Microsoft incluso creó una herramienta llamada PWABuilder que lo ayudará a convertir su sitio en una PWA. Por supuesto, hay complementos de WordPress que lo ayudan a hacer un PWA de su sitio. Además, Google está trabajando para llevar el soporte base para PWA al núcleo de WordPress.

Involucre a sus usuarios con una aplicación web progresiva

Las aplicaciones web progresivas pueden ser una gran adición a su kit de herramientas para dispositivos móviles. Bien hecho, son rápidos, funcionan sin conexión y funcionan como una aplicación nativa. En general, pueden ofrecer a sus usuarios una experiencia de usuario increíble. Los usuarios comprometidos son usuarios felices, ¿verdad?