En el pasado, la instalación de apps solo era posible en el contexto de aplicaciones específicas de la plataforma. Hoy en día, las apps web modernas ofrecen experiencias instalables que proporcionan el mismo nivel de integración y confiabilidad que las apps específicas de la 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 forma eficaz de llegar a una gran cantidad de usuarios, pero elegir la estrategia correcta para promocionar la instalación de tu AWP puede ser un desafío.
En esta guía, se exploran las prácticas recomendadas para combinar diferentes opciones de instalación para aumentar las tasas de instalación y evitar la competencia y la canibalización de las plataformas. Las ofertas de instalación que se incluyen son las de las AWP instaladas desde el navegador y la App Store, así como las apps específicas de la plataforma.
¿Por qué hacer que tu app 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: Instalar una app nueva puede significar borrar otras o liberar espacio quitando contenido valioso. Esto es especialmente desventajoso 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 dirigirse a una tienda para descargar una aplicación crea fricción adicional 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 para la plataforma puede ser alto, por ejemplo, los 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, la solicitud de la AWP solo se le puede mostrar a él (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 la AWP 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 eso puede ser suficiente para algunas experiencias, si tu objetivo es generar instalaciones de tu AWP, te recomendamos que escuches el evento 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 app específica de la plataforma obtengan una experiencia instalada similar.
El primer paso para implementar esta estrategia es definir una heurística para saber cuándo le 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:
- Muestra el banner de instalación de la app 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 un valor verdadero 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 Cómo integrar 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 apps de la tienda en dos grupos:
- Apps específicas de la plataforma: Estas apps se compilan principalmente con 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 esta presenta un conjunto de funciones más completo.
- Apps livianas: Estas apps también se pueden compilar con código específico de la plataforma, pero, por lo general, se compilan con tecnología web y se empaquetan 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 el porcentaje de respuesta de descarga de una app de 10 MB podría ser aproximadamente un 30% más alto que el de una app de 100 MB!
Para abordar este problema, algunas empresas aprovechan sus AWP para proporcionar una versión liviana de su app en Play Store con Actividades web de confianza (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 solo tenía 850 KB, solo el 7% del tamaño de su app para Android. Y, una vez instalada, no se distingue 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, puedes priorizar el banner de instalación de la app liviana sobre la versión más pesada 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.
Cómo usar JavaScript
Con 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';`
Cómo usar sugerencias de cliente
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 del cliente:
Primero, dile 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 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 ícono en la pantalla principal 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 app, como ofrecer experiencias de apps livianas en las tiendas y permitir que los usuarios agreguen AWP a la pantalla principal pidiéndoles que lo hagan directamente desde el sitio web.