Aplicaciones web progresivas: lo que necesita saber para su negocio

Publicado: 2020-03-08

Aplicaciones web progresivas.

Si ha oído hablar de él y luego lo sumergió en su segundo plano, ¡entonces le dio a sus rivales un gran alivio! ¡Tienen un competidor menos del que preocuparse!

A pesar de su increíble eficacia, sigue siendo una palabra de moda en la mayoría de las industrias. Es por eso que lo hablaríamos en detalle para que pueda utilizar sus beneficios para impulsar el crecimiento de su negocio.

Antes de comenzar a contarle la historia de PWA, permítanos mostrarle algo:

(Fuente de imagen)

Hemos observado algo muy interesante en los datos anteriores. La observación es:

Las personas pasan aproximadamente 7 veces más tiempo en aplicaciones móviles que en el navegador web móvil.

¡Los datos también revelaron algo que nos dejó bastante perplejos!

Aunque los navegadores web móviles reciben menos tiempo de uso, el volumen de tráfico de visitantes únicos que reciben es más del doble que el de las aplicaciones móviles.

Ahora debe preguntarse si podría obtener lo mejor de ambos mundos: una mayor duración de la sesión de las aplicaciones móviles y el asombroso volumen de tráfico de los navegadores web móviles.

Aquí es donde entran las PWA. ¡La tecnología que puede agravar la conversión de su sitio y eventualmente engordar su cuenta bancaria!

Vamos a cubrir:

  • Qué es PWA.
  • Por qué su empresa necesita un sitio basado en PWA.
  • ¿Cuáles son las mejores prácticas para diseñar su sitio de PWA?
  • Desafíos que tendría que superar al desarrollar su sitio de PWA.
  • Cómo puede ofrecer una excelente experiencia de usuario a través de un sitio de PWA.
  • Cómo instaría a las personas a instalar su sitio de PWA.
  • Inconvenientes de PWA y cómo superarlos.
  • Preguntas adicionales relacionadas con la PWA a las que debe conocer las respuestas.

¿Curioso? ¡Bien, entonces comencemos el recorrido!

¿Qué es exactamente una PWA?

PWA es un acrónimo. Significa aplicación web progresiva.

En términos sencillos, es básicamente un sitio web que brinda la sensación fluida de una aplicación nativa en su teléfono inteligente. Podrá acceder a él a través de su navegador web móvil al igual que visita cualquier sitio web.

Lo bueno de esto es que puede agregar una PWA a su pantalla de inicio y usarla como usa Facebook, Messenger, Instagram o cualquier otra aplicación en su teléfono inteligente.

Echar un vistazo:

(Fuente de imagen)

(Fuente de imagen)

Ahora pongámonos técnicos.

PWA es tecnología web basada en JavaScript.

Requiere el desarrollo de los siguientes componentes:

  • Trabajador del servicio
  • Manifest.json
  • HTTPS

1. Service worker es un elemento de código JavaScript que permite que una PWA sea accesible incluso cuando no está conectado. Además, gestiona la función de "notificaciones push" por la que son famosos los sitios de PWA.

2. Manifest.json es un archivo JSON (es un formato de archivo como pdf o jpg) que contiene información que su sitio PWA necesitaría cuando lo agregaría a su pantalla de inicio y lo usaría como una aplicación nativa.

(Fuente de imagen)

Como puede ver en la imagen de demostración anterior, el icono de la aplicación React PWA y el nombre corto aparecen automáticamente cuando se toca el botón azul "Agregar a la pantalla de inicio". Esto sucede porque el archivo manifest.json de React PWA tiene toda la información, incluido el icono de la aplicación, el nombre corto, el color de fondo, el tema y otra información relacionada con su interfaz.

3. HTTPS es el medio de comunicación a través del cual el trabajador del servicio obtiene de forma segura su sitio para mostrarlo en el dispositivo de una persona.

Por qué su empresa necesita un sitio de PWA

Los tres componentes mencionados anteriormente juntos le brindan los siguientes beneficios:

  • Su sitio es funcional incluso en modo fuera de línea
  • Ofrece una experiencia similar a una aplicación
  • Es capaz de autoactualizarse
  • Es fácilmente detectable por los motores de búsqueda.

¿Cómo se traducen estas características en los beneficios de su negocio? ¡Bien, prepárate!

Su sitio es funcional incluso en modo fuera de línea

En primer lugar, se puede acceder a los sitios de PWA incluso cuando una persona está desconectada.

Eso significa que sus clientes potenciales (y los existentes) podrían navegar por su sitio y realizar acciones como solicitar un producto o servicio.

¡Eso no solo hace que su sitio sea más utilizable, sino que también brinda una experiencia de cliente más agradable e impulsa la conversión!

Ofrece una experiencia perfecta similar a una aplicación

Cuando se trata del enfoque móvil primero, es seguro decir que las PWA han asistido a la mejor universidad y la han dominado con gran éxito.

¿Suena demasiado? ¡Te aseguramos que no lo es!

Los sitios de PWA tienen una pantalla perfecta e idéntica en todos los dispositivos, ya sean teléfonos inteligentes, tabletas o computadoras de escritorio, ¡y ocupan menos espacio que una aplicación nativa! Twitter aprovechó al máximo su PWA, que lo lanzó a un enorme aumento del 75% en la cantidad de tweets realizados. ¡También los bendijo con un 20% de reducción en la tasa de rebote!

Si bien lograr resultados tan impresionantes como los de Twitter puede no ser tan fácil, es posible proporcionar una experiencia de usuario mucho mejor con la interacción y la comodidad de navegación que ofrece una PWA.

Por lo tanto, sus visitantes pueden terminar siendo sus clientes habituales, estar encantados con otras características interesantes que ofrece su PWA y, a su vez, inflar su cuenta bancaria.

Es capaz de autoactualizarse

Imagine que no necesita actualizar manualmente las aplicaciones en su teléfono inteligente. ¡Incluso la idea te relaja (posiblemente hasta la médula)! ¡Esa es una de las muchas características interesantes de un sitio de PWA!

Con su función de pre-caché, puede actualizarse automáticamente. ¡Y no se detiene ahí!

Si publica alguna actualización de su sitio PWA en el servidor de su sitio, la versión de la aplicación de su sitio también podrá recuperar el contenido actualizado. Por lo tanto, le ahorra la molestia de publicar un archivo de actualización separado para la aplicación mientras evita a sus clientes la molestia de recordar actualizar su aplicación PWA.

Es fácilmente detectable por los motores de búsqueda.

Una aplicación de PWA, a diferencia de su contraparte nativa, puede ser indexada por motores de búsqueda. ¡Eso le permite ganar tráfico orgánico a su sitio de PWA (siempre que se clasifique en SERP) que es básicamente gratis!

Dado que más de 9 de cada 10 experiencias en línea comienzan con una búsqueda, no sería prudente no aprovechar el tráfico potencialmente masivo que puede obtener al clasificar en el SERP.

(Fuente de imagen)

Como puede ver claramente en el gráfico anterior, cuantas más personas encuentren su sitio, mayores serán las posibilidades de que hagan clic en él y, finalmente, se conviertan. Combinado con una experiencia de usuario fluida, una capacidad de implementación de actualizaciones singular (si actualiza su sitio de PWA, la versión de la aplicación también se actualiza) y la función de autoactualización, ¡sería mucho más fácil impulsar el crecimiento de su negocio!

¿Cuáles son las mejores prácticas para diseñar su sitio de PWA?

Así que ha decidido desarrollar un sitio PWA para su negocio o convertir su sitio existente en un PWA.

¡Gran decisión! ¡Le hará un gran favor a su negocio!

Pero antes de acercarse a una agencia de desarrollo (o hacerlo usted mismo), hay algunos factores que debe tener en cuenta para un sitio de PWA excepcional.

Uso de fuentes del sistema

Cada sistema operativo (Android, iOS, Windows) tiene su propia fuente de texto. Si su PWA muestra su contenido utilizando la fuente nativa de un sistema, los clientes lo encontrarán más atractivo y, por lo tanto, prestarán más atención a su contenido.

Permita que el contenido se comparta fácilmente

En esta era de las redes sociales, la facilidad para compartir contenido en la web es obligatoria para cualquier contenido web. Por lo tanto, es muy imperativo que brinde la opción de compartir fácilmente el enlace de su sitio PWA.

Le sugerimos que coloque un botón tipo hamburguesa en la parte inferior de su PWA para que el pulgar de un usuario pueda acceder fácilmente a la pantalla del móvil. Y dado que todos los botones para compartir en redes sociales estarían ocultos en el botón de hamburguesa, la interfaz se vería mucho más limpia.

Mantenlo despejado y ligero

Un sitio de PWA ordenado y ligero ofrecería una experiencia similar a una aplicación mucho mejor. De hecho, una de las características clave de PWA es que trae la experiencia similar a una aplicación a la web.

Una de las mejores formas de ofrecer dicha experiencia es utilizar una cantidad considerable de espacio en blanco. Esta práctica ayudaría a su sitio de PWA a adoptar la interfaz elegante y minimalista que sus clientes encontrarían más alineada con lo que están acostumbrados.

Conservar el desplazamiento en la página de la lista anterior

Cuando sus visitantes hacen clic en el botón "Atrás", no solo deben ser llevados a la página navegada anteriormente, sino al segmento particular que estaban viendo. Esto puede parecer muy simple, pero ofrece una gran comodidad, ya que las personas no tienen que desplazarse para encontrar dónde estaban.

Tema oscuro

Dado que las personas pasan aproximadamente un tercio de sus horas de vigilia en sus teléfonos inteligentes, es primordial que ofrezca la opción de ver su sitio de PWA también en un tema oscuro.

Esto logra dos cosas.

Primero, la gente asociaría su sitio con otras plataformas populares como Twitter, FB Messenger.

En segundo lugar, su sitio sería agradable a la vista, lo que ayuda a mejorar la experiencia del usuario.

Desafíos que (probablemente) enfrentaría al desarrollar su sitio de PWA

Alto uso de batería

Como las PWA generalmente se desarrollan usando JavaScript (que no es el idioma nativo de iOS o Android), requieren una batería de teléfono inteligente para trabajar más duro. Por lo tanto, la batería de un dispositivo se agota más rápido cuando se ejecuta una aplicación PWA.

Cómo superarlo: ya sea que esté desarrollando su propia PWA usted mismo o haya elegido una granja de desarrollo para que lo haga por usted, asegúrese de que la columna vertebral del código JavaScript esté optimizada hasta el final.

Restricción en el acceso a las funciones del dispositivo.

Dado que las aplicaciones PWA no son aplicaciones “nativas”, no pueden acceder a muchas funciones domésticas de un dispositivo como Bluetooth, sensores de proximidad, controles avanzados de cámara, altímetros y otros. Esto restringiría la forma en que los usuarios perciben su contenido.

Cómo superarlo: Lleve su capacidad innovadora al límite al diseñar contenidos para su sitio de PWA para que puedan consumirse con tan pocas funciones domésticas de un dispositivo.

Integración con dispositivos Apple más antiguos o versiones de iOS

A pesar de que se ha permitido que las PWA se ejecuten desde iOS 11.3, no se pueden ejecutar en la mayoría de los dispositivos Apple más antiguos. Dado que los dispositivos de Apple son relativamente caros, no todos los usuarios siempre adquieren el último dispositivo o actualizan su sistema operativo.

Cómo promocionaría su sitio de PWA

Ahora que ha desarrollado su sitio de PWA, es hora de que la gente lo sepa para que puedan acceder y beneficiarse de su servicio.

Hablando de promover su PWA, hay dos aspectos.

Esos son:

  • Quiere promover la instalación de la versión de la aplicación de su PWA
  • Desea promocionar su sitio de PWA para mejorar el volumen de tráfico que recibe.

Discutámoslos uno por uno.

Promoción de la instalación de la aplicación PWA

Hay varias formas de promover la instalación de su PWA. Aquí cubriremos la promoción en su sitio de PWA.

Inicialmente, hablaríamos sobre las mejores prácticas cuando se trata de promocionar su aplicación instalada en su sitio.

Aquí están:

Coloque la promoción de la aplicación fuera del flujo de viaje del usuario

Por ejemplo, en la página de inicio de sesión de su sitio PWA, coloque la CTA de instalación de la aplicación debajo del formulario de inicio de sesión y el botón "Enviar" . De esta manera, las personas se distraerían menos al completar la acción de inicio de sesión.

Mantenga intuitiva la opción de rechazar o descartar la promoción

Algunas promociones requieren hacer clic en el botón de la cruz. Los usuarios de Windows están acostumbrados a tener el botón "cruz" en el lado derecho mientras que está a la izquierda para los usuarios de Apple MacBook. Por lo tanto, donde sea que lo coloque, asegúrese de que sea grande y fácilmente visible.

Utilice la promoción de la aplicación con moderación

Demasiado afectaría negativamente la experiencia del usuario de su sitio PWA.

La promoción solo debe mostrarse cuando se detecta el aviso previo a la instalación.

Este BeforeInstallPrompt es un fragmento de código JavaScript que debe incrustar en la estructura de código de su sitio PWA. Detecta cierta interacción del usuario (llegar a una parte determinada de su sitio, hacer clic en un botón determinado) que activa la promoción de la aplicación.

Con las mejores prácticas cubiertas, pasemos ahora a la ubicación de la promoción de aplicaciones en su sitio de PWA.

Hay varios lugares en su sitio de PWA donde puede colocar la promoción de la aplicación. Estos son:

1. Menú de navegación

(Fuente de imagen)

Este es un lugar eficaz para la promoción de su aplicación PWA. Esto se debe a que abrir el menú de navegación indica un alto nivel de participación del usuario.

Lo que debes recordar:

  • Como se muestra en la imagen de arriba, coloque la promoción debajo de los elementos del menú para evitar interrumpir el hilo de atención del usuario.
  • Muestre un discurso breve y relevante que informe cómo el usuario se beneficiaría de la instalación de su aplicación PWA.

2. Página de destino

La página de destino se utiliza para promocionar un producto o servicio. Por lo tanto, es un lugar ideal para promocionar la instalación de su aplicación PWA.

Lo que debes recordar:

  • Asegúrese de que su propuesta de valor única sea magníficamente atractiva y relevante para los puntos débiles del usuario.
  • Informe a las personas sobre lo que obtendrán de la aplicación.
  • Incluya palabras clave en el contenido de la página de destino que hayan llevado a las personas a su página de destino en primer lugar.
  • Haga que el CTA sea llamativo y colóquelo en un lugar estratégico de la página de destino.

3. Encabezado fijo en la parte superior de la página

Dado que el encabezado es la parte más visible de un sitio, este es un lugar muy deseable para promocionar su aplicación.

Lo que debes recordar:

  • No todos los usuarios reaccionarían positivamente a este método de promoción. Por lo tanto, asegúrese de que se muestre solo a las personas que muestren indicios específicos de participación.
  • Antes de apresurarse a este método de promoción de aplicaciones, compárelo con otros elementos que puede colocar en el encabezado. Su objetivo final es obtener más clientes potenciales calificados para las ventas, no solo obtener más usuarios de la aplicación.

4. Banner de instalación pegajoso que se puede descartar en la parte superior / inferior de la página

La mayoría de la gente se ha encontrado con la instalación de banners o banners en general en un sitio web u otro. Lo que significa que están familiarizados con las promociones que se muestran de esta manera.

Lo que debes recordar:

  • Estos carteles pueden ser extremadamente perjudiciales. Por lo tanto, asegúrese de que se muestre después de que un usuario active un evento de conversión cuidadosamente elegido que indique un compromiso más profundo con su contenido.
  • En el banner, incluya un texto breve que informe a los usuarios del valor que su aplicación proporcionaría, como: "lea nuestro contenido incluso sin conexión". Al elegir este texto, asegúrese de que sea muy relevante para la parte de su sitio de PWA en la que se encuentra su usuario, el contenido y el tema general de su sitio, el nivel de participación del usuario detectado, la ubicación del usuario (si es relevante para el contenido del sitio), el comportamiento del usuario etc.

5. Entre listas de información o artículos

Como dice el título, este tipo de promoción aparece entre artículos de su sitio o bloques de información. Si un usuario ha llegado a un punto específico en un artículo, implica un compromiso significativo y ese es el lugar en el que la promoción del artículo probablemente tenga un mejor rendimiento. El objetivo de dicha promoción suele ser informar a los usuarios sobre formas más fáciles de acceder al contenido que disfrutan actualmente.

Lo que debes recordar:

  • No lo use en exceso. Simplemente molestaría a sus usuarios.
  • Mantenga disponibles los medios para descartar la promoción y asegúrese de que se recuerde la elección del usuario de descartarla.
  • Como muestra la imagen de arriba, el texto de la promoción debe ser sumamente relevante al tiempo que promueve el beneficio de obtener la aplicación.

Promoción de su sitio de PWA

Promocionar su PWA no es diferente de promocionar cualquier sitio web. Además, la promoción del sitio implica una discusión completa en sí misma. Por lo tanto, aquí estaríamos hablando de algunos medios clave de la promoción.

1. Usar las redes sociales como trampolín

Las redes sociales no solo son poderosas, sino también una plataforma extremadamente efectiva para transmitir contenido e interactuar con la audiencia objetivo. Así lo hemos colocado en el número uno.

Permítanos mencionar rápidamente algunos consejos que han beneficiado a muchos de nuestros clientes:

  • Coloque enlaces a varias secciones de su sitio de PWA correspondientes a su publicación reciente en su perfil de Instagram. Esto no solo ofrece una experiencia de usuario rica y fluida, sino que también ayuda a impulsar la conversión.
  • Solicite a su base de seguidores existente que comparta la URL de su sitio PWA para obtener puntos de fidelidad. Esto les proporciona el incentivo para promocionar su sitio, mejora su compromiso con su audiencia y aumenta el tráfico del sitio.
  • Cree concursos y obsequios que se adapten a su nicho en los que las personas puedan participar compartiendo la URL de su PWA.

2. Obtener referencias

Esta es una de las formas más verdaderas y efectivas de atraer tráfico a su sitio web. Esto se puede hacer a través de varias formas, como intercambio de enlaces, enlace en la biografía del autor de publicaciones de invitados, etc.

Cualquiera que sea el método que elija, intente obtener el máximo de enlaces Dofollow, ya que ayudan a pasar el jugo de enlace. ¿Recompensa? ¡Un impulso significativo en su clasificación SERP y, a su vez, en el tráfico orgánico!

3. Registro en directorios

Los clientes confían en los directorios cuando se trata de soluciones comerciales. Estos incluyen, entre otros, Yelp, Google My Business y FourSquare. La mayoría de estos son gratuitos y exponen su sitio de PWA al tráfico local y global como una solución confiable.

4. Utilizando una pantalla omnipresente

Estas propiedades inmobiliarias de visualización no suelen cruzarse por su mente cuando realiza una lluvia de ideas para un espacio promocional, pero pueden ser significativamente eficaces para crear una presencia digital más sólida y tráfico directo a su sitio. Algunos ejemplos fantásticos son la firma de correo electrónico, las tarjetas de presentación, los carteles físicos que exhibe en eventos, etc.

Software de creación de PWA vs. contratando una agencia

Existe una amplia multitud de herramientas que le permiten crear un sitio PWA a partir de su sitio web existente. Como puedes imaginar, todas son herramientas de pago. No obstante, ofrecen una atractiva variedad de beneficios. Esos son:

  • No es necesario reunirse con equipos de desarrolladores
  • Facturación fija mensual / anual
  • Entrega rápida del sitio de PWA

Hablemos ahora de algunos de los beneficios de contratar una agencia para que desarrolle su PWA personalizada.

  • Puedes tener funciones personalizadas que te ayuden a destacar entre tus rivales.
  • Obtenga sugerencias en tiempo real de los profesionales de PWA.
  • Tiene la opción de elegir entre una gran cantidad de plantillas de PWA que han tenido éxito.
  • Ahórrese el dolor de cabeza del mantenimiento y la actualización.
  • Servicio al cliente instantáneo (casi siempre).

Un gran revés de contratar una agencia de desarrollo de PWA es que le costaría más de lo que costaría una herramienta de creación de PWA. Por lo tanto, debe tomar la decisión que mejor se adapte a su capacidad financiera y sus necesidades comerciales.

Probando su sitio de PWA

Si ha desarrollado su sitio PWA, por favor no abra la botella de champán… ¡todavía! ¡Aún queda trabajo por hacer!

Hay varios aspectos de su sitio de PWA que debe verificar antes de comenzar la campaña de marketing de su sitio. Estos aspectos son cruciales para el rendimiento infalible y consistente de su sitio.

Estos son los aspectos de su sitio de PWA que debe probar:

1. Mensaje de AÑADIR AL INICIO

Dado que su PWA no es una aplicación nativa, no estará disponible en la tienda de aplicaciones de Apple ni en la tienda de Google Play. La única forma en que los visitantes de su sitio pueden obtener su aplicación PWA en su teléfono inteligente es a través del mensaje AGREGAR A INICIO. Por lo tanto, le sugerimos que compruebe primero antes que nada.

2. Carga sin conexión

Una característica clave de los sitios PWA es que son capaces de cargar elementos funcionales incluso con conectividad deficiente (modo avión para uno). Dado que esta característica de los sitios de PWA sería una de las piedras angulares de su estrategia de marketing, es imperativo que verifique la capacidad de carga fuera de línea de su PWA.

3. Capacidad de respuesta

Ya no se habla de la capacidad de respuesta como una característica interesante de un sitio web o aplicación. Se ha dado por sentado a gran escala y no se revertirá. Por lo tanto, cualquiera que visite su sitio desde un teléfono inteligente, tableta o computadora de escritorio esperará que su sitio se ajuste al tamaño de la pantalla. Lo que significa que no hay en la tierra que este factor pueda terminar en su lista de "comprobar más tarde".

Propina

Una herramienta competente y gratuita que puede utilizar para este propósito es el navegador Mozilla Firefox.

  • Simplemente abra Mozilla en su escritorio.
  • Escriba la URL de su sitio de PWA en la barra de direcciones.
  • Presione Ctrl + Shift + M y su sitio se abrirá en el entorno de prueba de capacidad de respuesta.

En la imagen de arriba hay una captura de pantalla con el sitio web de Sydney Morning Herald abierto en una ventana de iPad dentro del entorno de prueba de Mozilla.

Si observa con atención, verá varias pestañas justo debajo de la barra de direcciones.

El de la izquierda le permite elegir un dispositivo en el que desea ver la vista previa de su sitio. También puede verificar el tiempo de velocidad de carga en varios tipos de conexiones, como 2G, 3G, etc.

4. Prueba en varios navegadores

No hay forma de saber desde qué navegador pueden estar iniciando sesión sus usuarios en su sitio de PWA. Por lo tanto, no solo es importante sino obligatorio que se asegure de que su sitio ofrece un rendimiento óptimo en todos los navegadores.

5. Prueba de redes

No todos sus visitantes llegarían a su sitio a través de 5G o una conexión de banda ancha. ¡Algunos incluso pueden estar usando 3G! Para garantizar una experiencia de usuario fluida independientemente de la red del cliente, se recomienda encarecidamente que pruebe su sitio en varias conexiones.

Puede utilizar la función de prueba del navegador Mozilla Firefox para este propósito. Junto con las pruebas de redes, también puede verificar la capacidad de respuesta de su sitio de PWA a través de esta función.

6. Prueba de tiempo de carga

Con la atención de la gente en espiral hacia abajo, es crucial que su sitio se cargue en 2 segundos (¡más rápido, mejor)! Aunque los sitios de PWA son conocidos por su bajo tiempo de carga, es mejor mantenerse seguro y probar el tiempo de carga de su sitio.

GTmetrix es una herramienta gratuita y muy popular que puede utilizar para probar con precisión el tiempo de carga de su sitio. También proporciona un informe detallado que muestra cualquier elemento que pueda estar ralentizando su sitio.

Deje que PWA lleve su negocio al futuro

Dado que los grandes de varias industrias, como Twitter, Uber y Pinterest, han adoptado PWA en su presencia digital, es solo cuestión de tiempo que otros sigan. Y antes de que se dé cuenta, lo más probable es que se dé por sentado (al igual que la capacidad de respuesta móvil).

Entonces, si obtiene una ventaja competitiva sobre sus competidores y brinda su valioso servicio / producto a una base de clientes en constante expansión, ¡desarrolle su sitio PWA! ¡Deje que abra el camino para su presencia digital!