Antes, la instalación de una app solo era posible en el contexto de aplicaciones específicas de cada plataforma. En la actualidad, las aplicaciones web modernas ofrecen experiencias instalables que proporcionan el mismo nivel de integración y confiabilidad que las aplicaciones específicas de la plataforma.
Puedes hacerlo de diferentes maneras:
- Cómo instalar la AWP desde el navegador
- Instalar la AWP desde la tienda de aplicaciones
Tener diferentes canales de distribución es una forma poderosa de llegar a una gran cantidad de usuarios, pero elegir la estrategia correcta para promocionar la instalación de tu AWP puede ser todo un desafío.
En esta guía, se exploran las prácticas recomendadas para combinar diferentes opciones de instalación con el objetivo de aumentar las tasas de instalación y evitar la competencia en la plataforma y la canibalización. Las ofertas de instalación cubiertas incluyen AWP instaladas desde el navegador y desde la App Store, así como apps específicas de la plataforma.
¿Por qué deberías hacer que tu app web sea instalable?
Las apps web progresivas instaladas se ejecutan en una ventana independiente en lugar de en una pestaña del navegador. Se pueden iniciar desde la pantalla principal, el conector, la barra de tareas o la barra del usuario. Puedes buscarlas en un dispositivo y pasar de una a otra con el selector de apps para que parezcan parte del dispositivo en el que están instaladas.
Sin embargo, tener una app web instalable y una app específica de la plataforma puede ser confuso para los usuarios. Para algunos usuarios, las aplicaciones específicas de cada plataforma pueden ser la mejor opción, pero, para otros, pueden presentar algunas desventajas:
- Restricciones de almacenamiento: Para instalar una app nueva, es posible que tengas que borrar otras apps o liberar espacio mediante la eliminación de contenido valioso. Esto es especialmente desfavorable para los usuarios de dispositivos de gama baja.
- Ancho de banda disponible: Descargar una app puede ser un proceso costoso y lento, incluso más para los usuarios que tienen conexiones lentas y planes de datos costosos.
- Fricción: Dejar un sitio web y trasladarse a una tienda para descargar una aplicación crea inconvenientes adicionales y retrasa una acción del usuario que podría realizarse directamente en la Web.
- Ciclo de actualización: Realizar cambios en apps específicas de una plataforma puede requerir un proceso de revisión, lo que puede ralentizar los cambios y los experimentos (por ejemplo, pruebas A/B).
En algunos casos, el porcentaje de usuarios que no descargarán la app específica de la plataforma podría ser grande, por ejemplo, aquellos que creen que no usarán la app con mucha frecuencia o que no pueden justificar el gasto de varios megabytes de almacenamiento o datos. Puedes determinar el tamaño de este segmento de varias maneras, por ejemplo, mediante una configuración de estadísticas para realizar un seguimiento del porcentaje de usuarios "solo en la Web móvil".
Si el tamaño de este segmento es considerable, esa es una buena indicación de que necesitas brindar maneras alternativas de instalar tus experiencias.
Promueve la instalación de tu AWP a través del navegador
Si tienes una AWP de alta calidad, te recomendamos que promociones su instalación por sobre la app específica de la plataforma. Por ejemplo, si a la app específica de la plataforma le falta la funcionalidad que ofrece la AWP o si no se actualizó durante un tiempo. También puede ser útil promocionar la instalación de tu AWP si la app específica de la plataforma no está optimizada para pantallas más grandes, como en ChromeOS.
En el caso de algunas apps, impulsar la instalación de apps específicas de una plataforma es una parte clave del modelo de negocio. En ese caso, tiene sentido promocionar la instalación de tu app específica para cada plataforma. Sin embargo, es posible que algunos usuarios se sientan más cómodos permaneciendo en la Web. Si se puede identificar ese segmento, solo se les mostrará el mensaje de la AWP (lo que denominamos "AWP como resguardo").
AWP como experiencia instalable principal
Una vez que una AWP cumple con los criterios de instalación, la mayoría de los navegadores muestran una indicación de que se puede instalar. Por ejemplo, la versión de Chrome para computadoras de escritorio muestra un ícono instalable en la barra de direcciones y, en dispositivos móviles, una minibarra de información:
Si bien esto puede ser suficiente para algunas experiencias, si tu objetivo es impulsar las instalaciones de tu AWP, te recomendamos que escuches la BeforeInstallPromptEvent y sigas los patrones para promocionar la instalación de la AWP.
Evitar que la AWP canibaliza el porcentaje de instalaciones de aplicaciones específicas de la plataforma
En algunos casos, puedes optar por promocionar la instalación de tu app específica para la plataforma por sobre la AWP, pero, en este caso, te recomendamos que proporciones un mecanismo para permitir que los usuarios la instalen. Esta opción de resguardo permite que los usuarios que no puedan o no quieran instalar la app específica de la plataforma obtengan una experiencia similar instalada.
El primer paso para implementar esta estrategia es definir una heurística para cuando muestres al usuario una promoción de instalación de tu AWP.
Por ejemplo: Un usuario de AWP es un usuario que vio el mensaje de instalación de aplicación específica de la plataforma y no instaló la aplicación específica de la plataforma. Volvió al sitio al menos cinco veces o hizo clic en el banner de la aplicación, pero siguió usando el sitio web.
Luego, se puede implementar la heurística de la siguiente manera:
- Muestra el banner de instalación de app específico de la plataforma.
- Si un usuario descarta el banner, configura una cookie con esa información (p.ej.,
document.cookie = "app-install-banner=dismissed"). - Usa otra cookie para realizar un seguimiento de la cantidad de visitas de los usuarios al sitio (p.ej.,
document.cookie = "user-visits=1"). - Escribe una función, como
isPWAUser(), que use la información almacenada previamente en las cookies junto con la API degetInstalledRelatedApps()para determinar si un usuario se considera "usuario de AWP". - Cuando el usuario realice una acción significativa, llama a
isPWAUser(). Si la función muestra el valor true y el mensaje de instalación de la AWP se guardó anteriormente, puedes mostrar el botón de instalación de la AWP.
Promueve la instalación de tu AWP a través de una tienda de aplicaciones
Las apps para tiendas de aplicaciones se pueden crear con diferentes tecnologías, incluidas las técnicas de AWP. En Cómo combinar la AWP en entornos nativos, puedes encontrar un resumen de las tecnologías que se pueden usar para ese fin.
En esta sección, clasificaremos las aplicaciones de la tienda en dos grupos:
- Apps específicas de una plataforma: En su mayoría, estas apps se compilan con código específico de la plataforma. Los tamaños dependen de la plataforma, pero suelen superar los 10 MB en Android y los 30 MB en iOS. Te recomendamos que promociones tu app específica para la plataforma si no tienes una AWP o si esta presenta un conjunto de funciones más completo.
- Apps ligeras: Estas apps también se pueden crear con código específico de la plataforma, pero, en general, se crean con tecnología web y empaquetadas en un wrapper específico de la plataforma. También se pueden subir AWP completas a las tiendas. (Esto se analiza más adelante en este artículo). Algunas empresas optan por ofrecerlas como experiencias "lite" y otras también han utilizado este enfoque para sus apps insignia (principales).
Cómo promocionar apps ligeras
Según un estudio de Google Play, por cada aumento de 6 MB al tamaño de un APK, el porcentaje de conversiones de instalaciones disminuye un 1%. Esto significa que el porcentaje de respuesta de descarga de una app de 10 MB podría ser aproximadamente 30% superior al de una app de 100 MB.
Para solucionar este problema, algunas empresas aprovechan su AWP para proporcionar una versión liviana de su app en Play Store mediante Actividades web de confianza (TWA). Los TWA envuelven tu AWP en un componente similar a WebView y el tamaño resultante de la app generalmente es de unos pocos megabytes.
Oyo, una de las empresas hoteleras más grandes de la India, creó una versión lite de su app y la puso a disposición en Play Store mediante un TWA. En el momento en que se redactó este artículo, la app Oyo tenía solo 850 KB, solo un 7% del tamaño de su app para Android. Una vez instalada, no se la puede distinguir de la app para Android:
Oyo mantuvo tanto la versión principal como la "lite" en la tienda para ofrecerles a los usuarios la opción de elegir.
Cómo brindar una experiencia web liviana
De manera intuitiva, los usuarios de dispositivos de gama baja pueden estar más dispuestos a descargar versiones ligeras de apps que los usuarios de teléfonos de alta gama. Por lo tanto, si es posible identificar el dispositivo de un usuario, puedes priorizar el banner de instalación de aplicación ligero por sobre la versión más pesada de la aplicación específica de la plataforma.
En la Web, es posible obtener señales de dispositivos y asignarlas aproximadamente a categorías de dispositivos (p.ej., "alta", "media" o "baja"). Puedes obtener esta información de diferentes maneras, ya sea mediante las API de JavaScript o las sugerencias de clientes.
Usar JavaScript
Si usas propiedades de JavaScript, como navigator.hardwareConcurrency, navigator.deviceMemory y navigator.connection, puedes obtener información sobre el estado de la CPU, la memoria y la red del dispositivo, respectivamente. Por ejemplo:
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
Uso de sugerencias de clientes
Las señales de los dispositivos también se pueden inferir en los encabezados de las solicitudes HTTP, a través de las sugerencias para clientes. A continuación, te mostramos cómo implementar el código anterior para la memoria del dispositivo con sugerencias de clientes:
Primero, indícale al navegador que te interesa recibir sugerencias de memoria del dispositivo en el encabezado de la respuesta HTTP para cualquier solicitud propia:
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Device-Memory
Luego, comenzarás a recibir información de Device-Memory en el encabezado de la solicitud de HTTP:
GET /main.js HTTP/1.1
Device-Memory: 0.5
Puedes usar esta información en tus backends para almacenar una cookie con la categoría del dispositivo del usuario:
app.get('/route', (req, res) => {
// Determine device category
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';
// Set cookie
res.setCookie('Device-Category', deviceCategory);
…
});
Por último, crea tu propia lógica para asignar esta información a las categorías de dispositivos y mostrar la solicitud de instalación de la app correspondiente en cada caso:
if (isDeviceMidOrLowEnd()) {
// show "Lite app" install banner or PWA A2HS prompt
} else {
// show "Core app" install banner
}
Conclusión
La capacidad de tener un icono en la pantalla de inicio del usuario es una de las funciones más atractivas de las aplicaciones. Dado que históricamente esto solo era posible para las apps instaladas desde tiendas de aplicaciones, las empresas podrían pensar que mostrar un banner de instalación de la tienda de aplicaciones sería suficiente para convencer a los usuarios de instalar sus experiencias. Actualmente, existen más opciones para permitir que los usuarios instalen una aplicación, lo que incluye ofrecer experiencias ligeras de aplicaciones en las tiendas y permitir que los usuarios agreguen AWP a la pantalla de inicio pidiéndoles que lo hagan directamente desde el sitio web.