Antes, la instalación de aplicaciones 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 lograr esto 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 en una pestaña del navegador. Se pueden iniciar desde la pantalla principal, el conector, la barra de tareas o la barra del usuario. Podrás buscarlas en un dispositivo y pasar de una a otra con el selector de apps, lo que hará que se sientan parte del dispositivo en el que están instaladas.
Sin embargo, tener una aplicación web instalable y una específica de la plataforma puede resultar confuso para los usuarios. Para algunos usuarios, las aplicaciones específicas de una 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: descargar una app puede ser un proceso costoso y lento, más aún 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: Es posible que realizar cambios en apps específicas de una plataforma requiera 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 tu plataforma podría ser alto, por ejemplo, aquellos que piensan que no usarán la app con mucha frecuencia o que no pueden justificar gastar varios megabytes de almacenamiento o datos. Puede determinar el tamaño de este segmento de varias maneras, por ejemplo, mediante una configuración de Analytics para hacer un seguimiento del porcentaje de "Web móvil únicamente" usuarios.
Si el tamaño de este segmento es considerable, es un buen indicio de que necesitas proporcionar formas alternativas de instalar tus experiencias.
Promover la instalación de la AWP a través del navegador
Si tienes una AWP de alta calidad, tal vez sea mejor promocionar su instalación en lugar de la app específica de tu plataforma. Por ejemplo, si a la app específica de la plataforma le faltan las funciones que ofrece tu AWP o si no se actualiza durante un tiempo. También puede ser útil promover 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, desde el punto de vista comercial, tiene sentido promocionar la instalación de tu app para plataformas específicas. Sin embargo, es posible que algunos usuarios se sientan más cómodos al 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 instalación, la mayoría de los navegadores muestran una indicación de que la AWP es instalable. Por ejemplo, en la versión de Chrome para computadoras de escritorio, se muestra un ícono instalable en la barra de direcciones y, en dispositivos móviles, se muestra una barra de información en miniatura:
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 la tasa de instalación de apps específica de tu plataforma
En algunos casos, puedes optar por promover la instalación de la app específica de una plataforma por sobre la AWP. Sin embargo, en este caso, aún te recomendamos que proporciones un mecanismo para permitir que los usuarios instalen tu 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 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 aplicación, pero siguió usando el sitio web en su lugar.
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, configura 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 que los usuarios tienen al sitio (p.ej.,
document.cookie = "user-visits=1"). - Escribe una función, como
isPWAUser(), que use la información previamente almacenada en las cookies junto con la API degetInstalledRelatedApps()para determinar si un usuario se considera un "usuario de 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.
Promover la instalación de la 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, por lo general, superan los 10 MB en Android y los 30 MB en iOS. Te recomendamos promocionar la app específica de una plataforma si no tienes una AWP o si la app específica de una 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 proporcionarlos como "lite". experiencias, y otros también usaron este enfoque para sus apps principales.
Promoción de aplicaciones livianas
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 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). Los TWA incluyen tu AWP en un componente similar a WebView, por lo que el tamaño resultante de la app suele ser de solo algunos megabytes.
Oyo, una de las empresas hoteleras más grandes de la India, compiló una versión Lite de su app y la puso a disposición en Play Store con una TWA. Al momento de la redacción de este artículo, la app de Oyo tenía solo 850 KB, es decir, un 7% del tamaño de la app para Android. Una vez instalada, no se puede distinguir de la app para Android:
Oyo mantuvo la insignia y la versión "lite" versiones de la aplicación en la tienda, lo que les permite a sus usuarios elegir.
Cómo brindar una experiencia web ligera
De manera intuitiva, los usuarios de dispositivos de gama baja podrían estar más predispuestos a descargar versiones ligeras de aplicaciones 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 señales de dispositivos y asignarlas aproximadamente a categorías de dispositivos (p.ej., "alto", "medio" o "bajo"). Puedes obtener esta información de diferentes maneras, con las APIs de JavaScript o con sugerencias de clientes.
Usa JavaScript
Si usas las 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 la solicitud HTTP mediante sugerencias de clientes. A continuación, te mostramos cómo puedes implementar el código anterior para la memoria del dispositivo con sugerencias de clientes:
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 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 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.