By Bruchentko
Las PWA o Progressive Web App, para los amigos, son un modelo de desarrollo de software que transforma un sitio web en aplicación. Pero es mucho más qué una chuchería.
Las PWA son la última tendencia para los sitios web, y se han vuelto un pilar interesante en toda estrategia SEO. Pues, generan buenos resultados de tráfico orgánico, y más aún para las acciones de Marketing Digital.
El producir aplicaciones es costoso y no es para todo el mundo. Pues, requiere desarrolladores de software, los cuales no son baratos. Pero, según las estadísticas, el 80% de los usuarios usan hasta 6 aplicaciones, en conclusión, no tiene sentido producirlas.
Otra estadística establece qué, el 60% de las aplicaciones de las tiendas oficiales, nunca llega a descargarse.
Pero, aunque los datos nos digan esto, las aplicaciones son eficientes. — ¿Cuáles?. Bueno, justamente, las Progressive Web App. Estas “son, y no son” aplicaciones, ¿usted me entiende?, ¿verdad?.
¿Qué es una PWA?
Bueno, para definir las Progressive Web App vamos a hacer una pequeña clasificación primero.
Hay un tipo de aplicaciones qué son dependientes de sistemas operativos, llámese Windows, iOS, Mac o Android. Pero, también hay otro tipo, qué son pedacitos de código, qué no dependen de un sistema operativo. Estas últimas son las Progressive Web App, y se pueden ver y ejecutar desde cualquier navegador.
Este tipo de aplicaciones tiene una ventaja competitiva muy relevante, y esa es qué no requiere una acción extra del usuario. Pues, no requiere instalación.
¿Cómo funcionan las Progresive Web App?
Para entender esto, primero debemos entender qué su objetivo principal es ofrecer la misma experiencia al usuario qué una aplicación nativa. Entonces, para ello se requiere una API externa, qué nos permita convertir un sitio web en PWA.
Entonces cuando el usuario ingrese en la URL de dicho sitio web con la PWA, este se encontrará con la aplicación.
¿Por qué son populares las PWA?
— PWA, su campaña parece llevar la velocidad de tren fuera de control ¿por qué es tan popular?. Buena pregunta estimado lector.
Allá, en el 2007, un invento cambió la forma en la que los usuarios interactuamos con el internet. ¡Y sí!, estoy hablando del iPhone. Teléfono qué, progresivamente, sentó las bases del mundo de aplicaciones qué conocemos hoy en día.
— ¿Cómo?. Pues, en 2008, revolucionó el mundo del software con el lanzamiento de la App Store. Algo impensado para aquellos tiempos.
Pero, estas aplicaciones eran exclusivamente nativas, y no fue hasta el 2015 cuando aparecieron estas. De ello hablaremos más adelante.
De aplicaciones nativas y PWA. ¿Quién gana?
Las aplicaciones nativas existen desde, bueno, siempre. Los viejos, cómo yo, les decíamos programas.
Así cómo antes mencioné la ventaja que tiene una PWA por sobre una App nativa, ahora toca hablar de las ventajas de estas últimas. Es qué, estas llevan tantos años en el mercado, y han atravesado y superado los errores técnicos qué hay en una etapa temprana. Algunos de estos errores son netamente técnicos, cómo la lentitud, las caídas, y los errores de rendimiento.
Dichos errores suelen ser un poco más frecuentes en las apps progresivas. Pero, principalmente, hay 5 puntos en los que son diferentes las Apps nativas de las Progresivas.
1. Velocidad
Sí bien, la velocidad de internet crece a pasos agigantados, todavía hay muchas regiones del mundo sin acceso.
En lugares más avanzados en cuanto a sistemas de conexión, la diferencia entre las PWA y las nativas es poco relevante conforme a la velocidad. Pero, sí de regiones más desconectadas se trata, la diferencia es notable. Pues, en estos sitios aún dependen de internet 2G, o incluso del Dial-up.
Entonces, las apps nativas tienen un punto a favor, por sobre las PWA.
2. Interacción
Cómo te conté en la intro, la mayoría de los usuarios interactúan con 6 aplicaciones, más o menos. Entonces, hacer que un nuevo usuario instale y utilice una app nativa, parece tarea complicada.
— Sí no me crees, fijate en tu teléfono cuáles son las aplicaciones qué usas, pero también las qué no usas. Al menos, con cierta frecuencia.
Este punto lo ganan las PWA.
3. Disponibilidad
Esto está relacionado con la calidad de la red, pero, más directamente con el dispositivo. Pues, los dispositivos desactualizados muchas veces no pueden acceder a la última versión de las aplicaciones. También, las aplicaciones instalables consumen recursos del dispositivo.
Entonces, es un punto más a favor de las PWA.
4. Interfase del usuario
La interfase del usuario es prácticamente la misma en una app nativa y en una app progresiva. Y en el caso de compararlas con un sitio web, las primeras tienen una mejora general en la experiencia del usuario.
Por lo tanto, ambos tipos de app son mejores que una web, pero entre ellas hay un empate.
5. Coste de creación
Toca ver otro punto relevante. Quizás para las grandes empresas no signifique un gasto enorme, pero, para las pequeñas sí es un presupuesto significante. Pues, el coste de producción de una app nativa es claramente mayor, ya que requiere de desarrolladores. En cambio, las PWA son mucho más fáciles de producir, y cualquiera puede hacerlo.
Este es otro punto a favor de las Progresive Web App.
Las PWA se imponen por sobre las nativas
Desde el comienzo de la programación en particular, y desde el lanzamiento de las tiendas de aplicaciones en general, las Apps nativas son la norma. O al menos, lo fueron, durante muchos años. Pues, en 2015, el equipo de desarrollo de Google Chrome, creó el concepto de PWA.
La propuesta de valor de las PWA era muy interesante. Pues, querían brindar la misma interfase de navegación que las aplicaciones, pero sin tener qué instalarlas, ya qué esto último requiere dicho proceso. Y en ocasiones, el usuario desea simplemente probar el sitio, pero no desea tener qué instalar algo desde una tienda.
Por eso, el concepto de las PWA es una idea qué está pensada con base en los intereses del usuario.
Todo esto ganó más protagonismo, porque en 2018, el equipo de Google se unió con el de Microsoft, para brindar la misma experiencia en Windows. A día de hoy, ya está todo altamente integrado.
También es interesante ver cómo, las Nubes van tomando relevancia por sobre el almacenamiento crudo de información. ¿Vos descargás música o escuchas Spotify?, misma pregunta para las películas, y demás actividades online.
Esto de las nubes también se está dando hasta con los videojuegos. Qué son programas realmente muy pesados. Da qué pensar, ¿no?
¿Cuáles son las principales características de las PWA?
Para crear una PWA necesitamos una API, la cual debe cumplir con varios puntos cuyo fin es mejorar la experiencia del usuario.
El propio equipo de Google, en el sector de Google Developers ↗, establece estos criterios que requiere una PWA. Estas están agrupadas en dos grandes grupos, un grupo donde están los parámetros del Core, y otro del Optimal:
Core Progressive Web App checklist
El checklist del core, describe factores intrínsecos o factores core, correspondiente a las PWA. Es decir, los requisitos para qué una aplicación sea instalable y utilizable por todos los usuarios, independientemente del tamaño o el tipo de entrada.
1. Rendimiento
La velocidad es fundamental para que los usuarios utilicen su aplicación. Pues, a medida que los tiempos de carga de la página aumentan, crece la probabilidad de que un usuario abandone.
El rendimiento no se detiene con el evento de carga. Los usuarios nunca deben preguntarse sí su interacción, por ejemplo, hacer clic en un botón, se registró o no. El desplazamiento y la animación deben ser fluidos. Cómo sucede, por ejemplo, con un Parallax.
El rendimiento juega un papel importante en el éxito de cualquier experiencia de usuario. Pues, los sitios de alto rendimiento atraen y retienen a los usuarios mejor que los de bajo rendimiento. Los sitios deben centrarse en optimizar las métricas de rendimiento centradas en el usuario.
2. Funciona en cualquier navegador
Las aplicaciones web progresivas son aplicaciones web, y eso significa que deben funcionar en todos los navegadores, no solo en Chrome.
Para hacer qué esté disponible en todo, utilizan un estándar, en este caso, se crean en lenguaje HTML. Pues, todos los navegadores son capaz de interpretarlo, además de qué para mejorar la UX, usan CSS y JavaScript.
Por eso, los usuarios pueden utilizar cualquier navegador que elijan para acceder a su aplicación web antes de que se instale.
3. Responde a cualquier tamaño de pantalla
Los dispositivos vienen en una variedad de tamaños y los usuarios pueden usar su aplicación en una variedad de tamaños, incluso en el mismo dispositivo.
Por lo tanto, es fundamental asegurarse de que su contenido no solo se ajuste a la ventana gráfica. Si no que todas las funciones y el contenido de su sitio se puedan utilizar en todos los tamaños de ventana gráfica.
Los usuarios pueden usar su PWA en cualquier tamaño de pantalla y todo el contenido está disponible en cualquier tamaño de ventana.
4. Proporciona una página sin conexión personalizada
Los usuarios esperan que las aplicaciones instaladas funcionen independientemente de su estado de conexión.
Una aplicación nativa muestra una página en blanco cuando está fuera de línea. En cambio, un PWA nunca debe mostrar la página sin conexión predeterminada del navegador. Pues, se puede utilizar la memoria caché almacenada.
Sí bien esto, no te brinda una actualización de datos, al menos te permite ver algo qué ya consultaste previamente.
5. Puede ser instalada
La instalación de una aplicación web progresiva permite que se vea, se sienta y se comporte como todas las demás aplicaciones nativas. Esto es así, a tal punto, qué incluso puede ser instalada, y mimetizarse con el resto de las Apps.
Se inicia desde el mismo lugar donde los usuarios inician sus otras aplicaciones. Se ejecuta en su propia ventana de aplicación, separada del navegador, y aparece en la lista de tareas, al igual que otras aplicaciones.
— Pero, ¿por qué alguien querría que un usuario instale su PWA?. Pues, por la misma razón que con las aplicaciones nativas, para qué el usuario se comprometa más. Recordemos qué los usuarios que instalan o agregan aplicaciones a su dispositivo tienden a interactuar más con esas aplicaciones.
Optimal Progressive Web App checklist
Para bailar la bamba crear una Progresive Web App excelente, se necesita una poca de gracia algo más que lo listado en el core checklist.
El Optimal Checklist de la aplicación web progresiva consiste en hacer que su PWA se sienta como parte del dispositivo. Donde se intenta aprovechar lo que hace que la web sea poderosa.
6. Proporciona una experiencia sin conexión
Además de proporcionar una página sin conexión personalizada, los usuarios esperan que las aplicaciones web progresivas se puedan utilizar sin conexión.
Por ejemplo, las aplicaciones de viajes y aerolíneas deben tener los detalles del viaje y las tarjetas de embarque fácilmente disponibles sin conexión.
Las aplicaciones de música, video y podcast deben permitir la reproducción sin conexión.
Las aplicaciones sociales y de noticias deben almacenar en caché el contenido reciente para que los usuarios puedan leerlo sin conexión.
Los usuarios también esperan permanecer autenticados cuando están fuera de línea, así que diseñe para la autenticación fuera de línea. Una PWA sin conexión proporciona una verdadera experiencia similar a una aplicación para los usuarios.
Cuando la conectividad no es estrictamente necesaria, su aplicación funciona de la misma manera fuera de línea que en línea. Y para lograrlo, podrías brindarle al usuario la opción de descargar lo qué necesitará en un futuro.
7. Es completamente accesible
La mayoría de las personas en algún momento de su vida querrán aprovechar su PWA. La capacidad de los seres humanos para interactuar y comprender su PWA existe en un espectro y las necesidades pueden ser temporales o permanentes.
Al hacer que su PWA sea accesible, se asegura de que todos puedan usarla. Entonces, todas las interacciones del usuario deberían pasar los requisitos de accesibilidad WCAG 2.0.
8. Se puede descubrir mediante la búsqueda
Una de las ventajas de la web es la capacidad de descubrir sitios y aplicaciones a través de la búsqueda. De hecho, más de la mitad de todo el tráfico del sitio web proviene de la búsqueda orgánica.
Asegurarse de que existan URL canónicas para el contenido. También de que los motores de búsqueda puedan indexar tu sitio. Pues, es fundamental para que los usuarios puedan encontrar su PWA. Esto es especialmente cierto cuando se adopta la representación del lado del cliente.
Para ello, comience asegurándose de que cada URL tenga un título descriptivo y una meta descripción únicos.
Luego, se puede usar Google Search Console y Lighthouse para depurar y solucionar problemas de descubrimiento de la PWA.
9. Funciona con cualquier tipo de periférico
Su PWA se puede utilizar igualmente con un mouse, un teclado, un lápiz óptico o táctil.
Los dispositivos ofrecen una variedad de métodos de entrada y los usuarios deberían poder cambiar sin problemas entre ellos mientras usan su aplicación. Igual de importante, son los métodos de entrada no deben depender del tamaño de la pantalla. Lo que significa que las ventanas grandes deben admitir el tacto y las ventanas pequeñas deben admitir teclados y ratones.
Siempre qué se pueda, intentá que tu PWA y sus funciones sean compatibles con el uso de cualquier periférico. Cuando corresponda, también se debería mejorar las experiencias para permitir controles específicos para cada uno de estos.
10. Proporciona contexto para las solicitudes de permisos
Las Apps que envían una solicitud de permiso, como notificaciones, geolocalización y credenciales, pueden ser perjudiciales para el usuario. Esto es, porque tienden a estar relacionadas con una funcionalidad mejorada que requiere la suscripción.
Activar estos avisos sin contexto, como en la carga de la página, hace que los usuarios sean menos propensos a aceptar esos permisos. Entonces, resultan ser más propensos a desconfiar.
En vez de hacer esto, solo se deberían activar las solicitudes después de proporcionar un contexto al usuario de por qué necesita ese permiso.
11. Sigue las mejores prácticas para un código saludable
Hay muchas cosas que implican la creación de una aplicación web progresiva.
Es importante mantener la aplicación actualizada. Pero, también mantener el código bien depurado sí se quiere cumplir con los otros objetivos establecidos en esta lista de verificación.
Algunas directrices interesantes pueden ser:
- Evitar el uso de bibliotecas con vulnerabilidades conocidas.
- Asegurarse de no usar API obsoletas.
- Eliminar anti-patrones web de su base de código (como utilizar document.write () o no tener oyentes pasivos de eventos de desplazamiento).
Elementos de una PWA
Las PWA requieren tres elementos principales que deben manifestarse sí o sí en cada una de estas:
1. Application Manifest
La Application Manifest es un elemento imprescindible en formato .json donde debemos definir las siguientes variables.
- Nombre.
- Nombre corto.
- Icono que se mostrará cuando sea instalada.
- Página de inicio.
- Color principal.
- Orientación visual, en vertical u horizontal.
- Si queremos que se vean más o menos elementos del navegador al navegar por ella.
- Una breve descripción sobre qué trata la web.
- El idioma principal.
Este es el propio ejemplo que nos ponen desde Web.dev ↗, aka Google not Google.
2. Service Worker
El Service Worker es un elemento fundamental. Pues, es el corazón de las PWA, es decir, el qué aporta la mayoría de las características.
— Pero, ¿por qué es el corazón?. Bueno, porque es un JavaScript qué no solo actúa en una única URL, sino qué lo hace en todo el sitio web. Está todo el tiempo activo en segundo plano.
Este script actúa en muchos eventos del sitio, qué van desde el servidor hasta el usuario. Utilizando diferentes tipos de peticiones:
- Fetch: Peticiones que van desde el usuario al servidor con el fin de descargar elementos.
- Push: Son solicitudes del servidor para enviar notificaciones al usuario.
- Sync: Sincronización de datos entre ambos.
Dependiendo de la petición, se activarán las diferentes funciones. Pero, para qué todo esto sea posible sin comprometer la información, se requiere un certificado SSL, para cumplir con el estándar de seguridad.
3. Diseño responsive
El diseño debe responder a la interacción del usuario, eso es bueno para la experiencia del mismo «UX». Pero, además, la falta de respuesta es realmente perjudicial para el Core Web Vitals.
Pero no es solo la interacción y la respuesta del home. Tiene qué ser responsive en todo el sitio.
Hay Apps PWA y Apps nativas. Pero, ¿existen los híbridos?
Sí, existen las apps híbridas. La diferencia qué hay entre los tres tipos resultantes, es el lenguaje utilizado en su desarrollo y en las plataformas donde se usan.
Aplicaciones nativas
Este tipo de aplicaciones se crean a medida, específicamente para las plataformas donde se usaran. Estas, utilizan lenguajes y parámetros definidos.
Estas se descargan de las tiendas oficiales, y pueden tener una gran variedad de funciones, cómo GPS, calendario, cámaras, entre otros.
Además, las aplicaciones nativas manejan estándares de seguridad y experiencia de usuario. Pero, la mayoría de las comunidades de desarrolladores quieren una internet más abierta y no están de acuerdo con la intervención y regulación. En especial por parte de las grandes empresas y los gobiernos.
Aplicaciones PWA
Este tipo de aplicaciones son independientes de los sistemas operativos, pues, se ejecutan en los navegadores.
Estas PWA, se integran muy bien con computadoras y sistemas operativos de dispositivos móviles. Esto permite qué las PWA envíen notificaciones push, y accedan desde la pantalla de inicio.
Además, este tipo de aplicaciones, permite descentralizar el mercado de aplicaciones. Volviéndose más democrático e inclusivo.
Aplicaciones híbridas
Pero, ahora toca hablar de las híbridas. Estas fueron la primera solución para democratizar el desarrollo de aplicaciones en dispositivos móviles.
Contrario a lo que pasa con las aplicaciones nativas «qué adoptan un lenguaje predefinido». Pues, puede utilizar el lenguaje qué quiera el desarrollador, es decir, es mitad web y mitad nativa.
El resultado de este proceso es una app funcional, descargable, instalable, descentralizada, versátil, y qué se puede acceder a través de la web.
Ejemplos de PWA
Ya vimos bastante sobre cuestiones teóricas sobre las PWA, ahora toca ver algunos ejemplos.
Tinder
Tinder es un buen ejemplo de PWA. Además de qué también ha lanzado la aplicación para dispositivos Android y Windows.
Se puede acceder a la plataforma al instante, incluso, sin la necesidad de descargar la aplicación o desde el propio navegador. Esta PWA funciona como una aplicación normal, pero en realidad es un sitio web.
Pinterest es una red social que funciona cómo PWA. El objetivo de esto es mejorar la UX en el navegador, permitiendo una navegación responsiva y fluida.
Puntualmente, Pinterest en su versión PWA, es mucho más rentable qué la versión de aplicación nativa.
Uber
Comenzó como PWA exclusivamente, luego sacó la aplicación. Esta web app tenía la capacidad de funcionar bien, incluso con el primitivo 2G.
Esta es de las aplicaciones PWA mejor pulidas.
¿Cómo crear una Progresive Web App?
Existen muchos plugins para convertir nuestra web en una PWA. Personalmente, he probado dos que son los que voy a comentar a continuación.
PWA
Este es un plugin funcional de WordPress. Es superútil, y lo único qué tenemos qué hacer es instalarlo. Nada más.
Luego de instalarlo podemos ir al Lighthouse y evaluar nuestro sitio web. En los resultados del análisis veremos cómo ya tenemos instalado nuestra WPA
AMP for WP
Este plugin fue creado para hacer que tu web tuviese la tecnología AMP, recordemos también la importancia del CWV. También, tiene la funcionalidad de PWA.
El uso de este plugin es muy simple e intuitivo.
PWA en otros CMS
El mecanismo que vimos para WordPress es el mismo para el resto de los CMS. Da igual sí es Shopify, Wix, o el qué fuere, la inmensa mayoría de los gestores de contenido tienen una tienda de aplicaciones con esto.
Conclusión
Bueno, vimos un post muy técnico, espero te haya servido esta información. Pues, comprender estos conceptos ayudará a posicionar tu sitio web.
Tener una PWA puede ayudarte con las métricas del Lighthouse. Esto es especialmente útil sí estás intentando implementar el SEO en tu sitio web, tenelo presente.
Una buena experiencia de usuario junto a un buen contenido es una dupla ganadora.
Si deseas colaborar con nosotros, puedes hacerlo mediante una donación a través de PayPal↗️ o Cafecito↗️. Tu generosidad nos ayuda a mantener nuestro contenido libre de publicidad y a seguir ofreciendo información valiosa para ti y para nuestra comunidad de lectores.
Si estás considerando crear tu propio sitio web, te recomendamos WordPress↗️. Es una plataforma fácil de usar y muy popular que te permitirá llevar tus ideas al mundo digital. Haz clic en el banner de abajo para obtener un descuento de $25 al crear tu sitio con WordPress↗️./
FAQs sobre las web app progresivas:
¿Cómo crear una web app progresiva?
Lo más simple es hacerlo con un plugin. Pero sí querés hacerlo de manera manual, tendrás que insertar varias líneas de código.
¿PWA que es?
Las PWA o Progressive Web App, son un modelo de desarrollo de software que transforma un sitio web en aplicación.
¿Qué te ha parecido?
pero como hago para tener un 100?
excelente!!!
gracias