Antes, la instalación de apps solo era posible en el contexto de aplicaciones específicas de la plataforma. Hoy en día, las aplicaciones web modernas ofrecen experiencias instalables que proporcionan el mismo nivel de integración y confiabilidad que las apps específicas de cada plataforma.
Puedes hacerlo de diferentes maneras:
- Instalar la AWP desde el navegador
- Instalar la AWP desde la tienda de aplicaciones
Tener diferentes canales de distribución es una excelente manera de llegar a una gran cantidad de usuarios, pero elegir la estrategia correcta para promover 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 a fin de aumentar las tasas de instalación y evitar la competencia de la plataforma y la canibalización. Las ofertas de instalación que se abordan incluyen AWP instaladas desde el navegador y la App Store, además de apps específicas de la plataforma.
¿Por qué deberías hacer que tu aplicación web sea instalable?
Las apps web progresivas instaladas se ejecutan en una ventana independiente en lugar de una pestaña del navegador. Se pueden iniciar desde la pantalla principal, la estación de carga, la barra de tareas o la biblioteca del usuario. Es posible buscarlas en un dispositivo y cambiar entre ellas con el selector de apps, lo que las hace sentir 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 apps específicas de la plataforma pueden ser la mejor opción, pero para otros pueden presentar algunas desventajas:
- Limitaciones de almacenamiento: Para instalar una app nueva, es posible que debas borrar otras personas o quitar el contenido valioso para liberar espacio. Esto es particularmente desfavorable para los usuarios de dispositivos de gama baja.
- Ancho de banda disponible: La descarga de una app puede ser un proceso costoso y lento, en especial para los usuarios con conexiones lentas y planes de datos costosos.
- Fricción: Salir de un sitio web y migrar a una tienda para descargar una app crea inconvenientes adicionales y retrasa una acción del usuario que podría realizarse directamente en la Web.
- Ciclo de actualización: Si realizas cambios en apps específicas de la plataforma, es posible que debas pasar por un proceso de revisión de apps, lo que puede ralentizar los cambios y los experimentos (por ejemplo, las pruebas A/B).
En algunos casos, el porcentaje de usuarios que no descargarán tu app específica de la plataforma puede ser alto, por ejemplo, aquellos que creen que no usarán la app con mucha frecuencia o que no pueden justificar el uso de varios megabytes de almacenamiento o datos. Puedes determinar el tamaño de este segmento de varias maneras, por ejemplo, con una configuración de estadísticas para hacer un seguimiento del porcentaje de usuarios que solo utilizan la Web móvil.
Si el tamaño de este segmento es considerable, es una buena indicación de que debes proporcionar formas alternativas de instalar tus experiencias.
Cómo promocionar la instalación de tu AWP a través del navegador
Si tienes una AWP de alta calidad, puede ser mejor promocionar su instalación en lugar de la app específica de la plataforma. Por ejemplo, si a la app específica de la plataforma le falta la funcionalidad que ofrece tu AWP o si no se ha actualizado desde hace tiempo. También puede ser útil promocionar la instalación de tu AWP si la app específica de la plataforma no se optimizó para pantallas más grandes, como en ChromeOS.
Para algunas apps, generar instalaciones de apps específicas de la plataforma es una parte clave del modelo de negocio. En ese caso, tiene sentido comercial promocionar la instalación de tu app específica de la plataforma. Sin embargo, es posible que a algunos usuarios les resulte más cómodo permanecer en la Web. Si se puede identificar ese segmento, solo se le mostrará el mensaje de la AWP (lo que llamamos "AWP como resguardo").
AWP como experiencia instalable principal
Una vez que una AWP cumple con los criterios de instalabilidad, la mayoría de los navegadores muestran una indicación de que se puede instalar. Por ejemplo, Chrome para computadoras de escritorio muestra un ícono instalable en la barra de direcciones y, en dispositivos móviles, muestra 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 tu AWP.
Evita que tu AWP canibalice tu tasa de instalación de apps específica de la plataforma
En algunos casos, puedes optar por promocionar la instalación de tu app específica de la plataforma en lugar de la AWP, pero, en este caso, te recomendamos que proporciones un mecanismo para permitir que los usuarios instalen la AWP. Esta opción de resguardo permite que los usuarios que no pueden o no quieren instalar tu aplicación específica de la plataforma, tengan una experiencia de instalación similar.
El primer paso para implementar esta estrategia es definir una heurística para saber cuándo mostrarás al usuario una promoción de instalación de tu AWP.
Por ejemplo: Un usuario de la AWP es un usuario que vio el mensaje de instalación de la app específica de la plataforma y no la instaló. Regresó al sitio al menos cinco veces o hizo clic en el banner de la app, pero siguió usando el sitio web.
Luego, la heurística se puede implementar de la siguiente manera:
- Mostrar el banner de instalación de aplicación específico de la plataforma.
- Si un usuario descarta el banner, establece una cookie con esa información (p. ej.,
document.cookie = "app-install-banner=dismissed"). - Usa otra cookie para hacer 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 anteriormente en las cookies junto con la API degetInstalledRelatedApps()para determinar si un usuario se considera un "usuario de la AWP". - Cuando el usuario realice una acción significativa, llama a
isPWAUser(). Si la función muestra el valor "true" y la solicitud de instalación de la AWP se guardó anteriormente, puedes mostrar el botón de instalación de la AWP.
Promociona la instalación de tu AWP a través de una tienda de aplicaciones
Las apps para tiendas de aplicaciones se pueden compilar con diferentes tecnologías, incluidas las técnicas de AWP. En Combinación de AWP en entornos nativos, encontrarás un resumen de las tecnologías que se pueden usar para ese fin.
En esta sección, clasificaremos las apps de la tienda en dos grupos:
- Apps específicas para cada plataforma: Estas apps se compilan principalmente con un código específico de la plataforma. Sus tamaños dependen de la plataforma, pero suelen ser superiores a 10 MB en Android y 30 MB en iOS. Te recomendamos que promociones tu app específica de la plataforma si no tienes una AWP o si la app específica de la plataforma presenta un conjunto de funciones más completo.
- Apps ligeras: Estas apps también se pueden compilar con código específico de la plataforma, pero, por lo general, se crean con tecnología web, empaquetadas en un wrapper específico de la plataforma. Las AWP completas también se pueden subir a las tiendas. (Esto se analiza más adelante en este artículo). Algunas empresas optan por proporcionarlas como experiencias "lite", y otras también han utilizado este enfoque para sus apps principales.
Promoción de apps livianas
Según un estudio de Google Play, por cada aumento de 6 MB en el tamaño de un APK, el porcentaje de conversiones de instalaciones disminuye un 1%. Esto significa que la tasa de finalización de descarga de una app de 10 MB podría ser aproximadamente un 30% más alta que una app de 100 MB.
Para solucionar este problema, algunas empresas aprovechan su AWP para proporcionar una versión ligera de su app en Play Store mediante Trusted Web Activities (TWA). Las TWA unen tu AWP en un componente similar a WebView, y el tamaño de la app resultante suele ser de solo unos pocos megabytes.
Oyo, una de las empresas de hospitalidad más grandes de la India, creó una versión Lite de su app y la puso a disposición en Play Store con una TWA. En el momento en que se escribió este artículo, la app de Oyo tenía solo 850 KB, un 7% del tamaño de su app para Android. Una vez instalada, no se puede distinguir de la app para Android:
Oyo mantuvo en la tienda las versiones principal y “lite” de la app, lo que les permitió a los usuarios elegir.
Proporciona una experiencia web liviana
De manera intuitiva, los usuarios de dispositivos de gama baja podrían estar más dispuestos a descargar versiones livianas de las apps que los usuarios de teléfonos de alta gama. Por lo tanto, si es posible identificar el dispositivo de un usuario, podrías priorizar el banner de instalación ligera de apps sobre la versión más gruesa de la app específica de la plataforma.
En la Web, es posible obtener indicadores de dispositivos y asignarlos de forma aproximada a categorías de dispositivos (p. ej., "alto", "medio" o "bajo"). Puedes obtener esta información de diferentes maneras, ya sea con las APIs de JavaScript o con sugerencias de cliente.
Usa 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';`
Usa las sugerencias de clientes
Los indicadores de dispositivos también se pueden inferir en los encabezados de solicitud HTTP a través de sugerencias del cliente. A continuación, se muestra cómo puedes implementar el código anterior para la memoria del dispositivo con sugerencias de cliente:
Primero, indica al navegador que deseas 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 solicitud de las solicitudes 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 muestra el mensaje 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 era posible para las apps instaladas desde tiendas de aplicaciones, las empresas podrían pensar que mostrar un banner de instalación en la tienda de aplicaciones sería suficiente para convencer a los usuarios de instalar sus experiencias. Actualmente, hay más opciones para permitir que los usuarios instalen una app, lo que incluye ofrecer experiencias de apps ligeras en las tiendas y permitir que los usuarios agreguen AWP a la pantalla principal indicándoles que lo hagan directamente desde el sitio web.