Existen muchos motivos por los que los desarrolladores traen la Web a Android: tal vez reutilizar un widget web en una app para Android, incorporar contenido propio o de terceros, o incluso llevar toda su app web a la plataforma. Cualquiera sea el caso de uso, Android tiene muchas herramientas para hacerlo posible.
A continuación, te presentamos las actualizaciones más recientes de estas herramientas. Por ejemplo:
- Mejoras en la privacidad y mejor compatibilidad con pantallas grandes, como la compatibilidad con la función de arrastrar y soltar imágenes en WebView.
- Pestañas personalizadas ahora admite pestañas personalizadas parciales.
- Funciones integradas para AWP, como la IU de instalación más completa y la API de Play Billing en Actividades web de confianza
Veamos más detalles.
WebView
WebView es la forma más común de incorporar contenido web en apps para Android, ya que la gran mayoría de estas apps usan WebView. Es una excelente manera de integrar la IU web sin problemas en las experiencias de apps nativas para Android. Por ejemplo, puedes incorporar diferentes IUs web en tu app, como anuncios, widgets o incluso navegadores integrados en la app. Una de las mayores fortalezas de WebView es su potente API para controlar y modificar el contenido web que se carga. ¿Cuáles son las novedades de WebView?
Encabezado X-Requested-With
Comencemos con la privacidad y la baja del encabezado X-Requested-With. Cuando un usuario instala y ejecuta una aplicación que usa un WebView para incorporar contenido web, este agregará el encabezado X-Requested-With a cada solicitud que se envíe a los servidores. El valor de este encabezado es el nombre del APK de la aplicación. Esto significa que cada solicitud incluye información específica sobre el contexto en el que el usuario consume contenido web y filtra la identidad de la app al servicio en línea. Para proteger la privacidad del usuario, el equipo de WebView inició una prueba de baja que quita este encabezado de todas las solicitudes de WebView.
Pero ¿qué sucede si tu aplicación depende del encabezado X-Requested-With? Nuestro método recomendado es usar la nueva API de solicitud de aceptación que te permite enviar de forma selectiva el encabezado de solicitud a orígenes específicos. Esto significa que obtienes lo mejor de ambos mundos: puedes seguir admitiendo las funciones existentes compiladas sobre este encabezado y, al mismo tiempo, asegurarte de que la privacidad del usuario se conserve en todos los demás casos. Si deseas conservar el comportamiento existente, también puedes registrarte en la prueba de origen de X-Requested-With Deprecation.
WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
demoWebview.getSettings(), Collections.singleton("https://example.com")
);
Pruebas de WebView
El siguiente tema es la prueba. Si eres desarrollador web y tus sitios web reciben mucho tráfico de WebViews, tenemos dos actualizaciones para ti:
WebView ahora admite pruebas de origen de Chrome. Las pruebas de origen te dan acceso a funciones nuevas o experimentales en Chrome. Puedes usarlas para probar una función nueva antes de que esté disponible para todos. Hasta ahora, las pruebas de origen solo estaban disponibles en Chrome para computadoras y dispositivos móviles, pero a partir de Chrome M110, también funcionan en WebView.
Ahora es mucho más fácil instalar WebView Beta. Te recomendamos que pruebes tu sitio web con el canal beta de WebView para asegurarte de que funcione bien en las próximas versiones de WebView. Para ello, únete al programa de prueba beta de WebView en Google Play Store y se inscribirá tu dispositivo automáticamente.
Compatibilidad con dispositivos con pantalla grande
Nuestro objetivo es que WebView funcione bien en dispositivos con pantallas grandes. Un paso en esta dirección es que WebView ahora admite la función de arrastrar y soltar imágenes. Por ejemplo, en el modo de vista de pantalla dividida, puedes arrastrar una imagen de un WebView a otra app.
Es muy fácil agregar arrastrar y soltar a tus WebViews: solo debes declarar un DropDataProvider en tu AndroidManifest.
<application...>
...
<provider
android:authorities="com.example.webviewdemo.DropDataProvider"
android:name="androidx.webkit.DropDataContentProvider"
android:exported="false"
android:grantUriPermissions="true"/>
</application>
En cuanto a los dispositivos de pantalla grande, Chrome y WebView en Android U tendrán compatibilidad total con la escritura a mano en los campos de entrada de texto HTML y con gestos de entrada para borrar texto o agregar espacios. La compatibilidad con la escritura a mano ya está disponible para todos los dispositivos Samsung con One UI 5.1, como el S23 Ultra. En otros dispositivos que usan Android T, puedes habilitar la escritura a mano en las entradas HTML en Opciones para desarrolladores.
Motor de JavaScript de Jetpack
A veces, es posible que debas ejecutar JavaScript en tu app sin tener que mostrar ningún contenido web, por ejemplo, cuando compartes la lógica empresarial entre apps web y para dispositivos móviles. Para facilitar este proceso, el año pasado lanzamos la versión alfa del nuevo motor de JavaScript de Jetpack. Esta biblioteca usa V8, el motor JavaScript de Chrome, y permite que tu aplicación evalúe código JavaScript o WebAssembly sin crear una instancia de WebView. Lo bueno del nuevo motor de JavaScript es que lo ejecuta en un proceso diferente, lo que lo convierte en una forma segura y estable de ejecutar JavaScript en tu app. También requiere menos recursos que una instancia de WebView.
ListenableFuture<JavaScriptSandbox> jsSandboxFuture =
JavaScriptSandbox.createConnectedInstanceAsync(JavaScriptEngineActivity.this);
JavaScriptIsolate jsIsolate = jsSandboxFuture.get().createIsolate();
final String code =
"function sum(a, b) { let r = a + b; return r.toString(); }; sum(3, 4)";
ListenableFuture<String> resultFuture = jsIsolate.evaluateJavaScriptAsync(code);
…
Pestañas personalizadas
WebView es excelente para integrar la IU web en tu app. Pero ¿qué sucede si permites que los usuarios exploren contenido web en tu app?
Este es un excelente caso de uso para las pestañas personalizadas. Son una forma segura y fácil de permitir que los usuarios vean contenido web en tu app. Su gran ventaja es que los usuarios no necesitan volver a acceder a sus sitios web favoritos. Esto se debe a que son una instancia del navegador predeterminado del usuario y las cookies que se comparten, y ofrecen todas las funciones de la plataforma web y las API compatibles con el navegador que los potencia.
Esto también significa que, si tu navegador predeterminado es Chrome, se abrirá una pestaña personalizada en Chrome. Si tu navegador predeterminado es Firefox, se abrirá una pestaña personalizada en Firefox. La mayoría de los navegadores principales de Android admiten pestañas personalizadas. Si el navegador predeterminado no las admite, se abrirá la app del navegador.
Lo mejor de las pestañas personalizadas es que puedes aplicarles un diseño para que coincidan con el aspecto de tu app, agregar interactividad personalizada a través de acciones y tus propias barras de herramientas.
Pestañas personalizadas parciales
Las personalizaciones de pestañas personalizadas recibieron una actualización importante con compatibilidad con pestañas personalizadas parciales. Permiten que los usuarios realicen varias tareas a la vez entre apps y la Web. Hasta ahora, cuando se usaban pestañas personalizadas, la superposición de la pestaña del navegador cubría toda la pantalla. Ahora puedes controlar la altura de la superposición de la pestaña personalizada. De esta manera, los usuarios pueden interactuar con tu app y el contenido web al mismo tiempo. Si el navegador de tu usuario no admite la opción de pestañas personalizadas parciales, solo verá la pestaña personalizada compatible en pantalla completa.
Solo debes conectarte al servicio de Custom Tabs, pasar la sesión a CustomTabsBuilder y llamar a setActivityHeight.
CustomTabsSession customTabsSession;
// ...
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder(customTabsSession)
.setInitialActivityHeightPx(500)
.setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
// ...
.build();
customTabsIntent.launchUrl(context, Uri.parse(url))
YouTube lanzó correctamente las pestañas personalizadas intercaladas de tamaño variable en los anuncios de respuesta directa. De esta manera, pudieron implementar una nueva forma de interactuar con los anuncios y el contenido web sin interrumpir la experiencia orgánica en la app.
Pero ¿qué pasa con las tablets y otros dispositivos con pantallas grandes? Actualmente, el equipo de Chrome está trabajando en una nueva experiencia en paralelo de pestañas personalizadas para el modo horizontal y dispositivos con pantalla grande. Si defines un ancho máximo de la pestaña, junto con un punto de inflexión, la experiencia de la pestaña personalizada cambiará automáticamente entre la superposición de la hoja inferior y la experiencia en paralelo. La función ya está disponible en Canary y se lanzará alrededor de julio de 2023. Si quieres probarlo, consulta el código fuente de la app de ejemplo de pestañas personalizadas de Chromium.
Cómo medir los indicadores de participación
La segunda gran actualización de las pestañas personalizadas es la medición de la participación de los usuarios específica de la sesión. Si tu app muestra contenido a los usuarios con frecuencia, incluidos vínculos, por ejemplo, en un feed de noticias, ¿no sería genial si pudieras saber qué vínculos considera valiosos un usuario y cuáles no? Esta información puede ser muy útil cuando se trata de priorizar los vínculos que se mostrarán a los usuarios.
El equipo de Chrome agregó visibilidad de métricas específicas de la sesión a las pestañas personalizadas de Chrome. Además de saber cuánto tiempo permanece un usuario en una página, ahora también puedes obtener información sobre la distancia de desplazamiento, la dirección de desplazamiento y la participación general con el contenido web.
Los indicadores de participación están disponibles a partir de Chrome 114 y requieren la biblioteca de compatibilidad androidx.browser:browser:1.6.0-alpha01 o una versión posterior. Para obtener más información, consulta la guía de introducción a los indicadores de participación.
AWP
También hay actualizaciones en las AWP, un conjunto de tecnologías que permiten crear experiencias similares a las de las apps, compiladas e implementadas en la Web.
Si usas una PWA en Android, tu app web podría instalarse: se mostrará junto con las otras apps de la plataforma, en la pantalla principal, el selector, la configuración y otras plataformas.
Las funciones de las AWP se compilan en función de estándares web y se enfocan en la compatibilidad multiplataforma, lo que les brinda a los desarrolladores las herramientas para compilar una app web una vez y permite que los usuarios la instalen en el dispositivo que elijan. Crear una app web instalable no significa que no puedas o no debas tener una app nativa para Android, pero es otra opción para llevar la Web a Android.
Veamos algunas funciones que hacen que tu app web instalable se sienta como en casa en Android.
Queríamos permitir que los usuarios instalaran los sitios web que más les interesan. El primer paso fue quitar el controlador de recuperación de service worker como requisito para la instalación en Android y Chrome. Además, Chrome omitirá el inicio del service worker si el controlador de recuperación está vacío. Chrome ejecutará experimentos para ampliar el acceso a la instalación para los usuarios. Presta atención a ellos y envíanos tus comentarios.
El requisito de servicio en primer plano existía para que los desarrolladores crearan una experiencia del usuario coherente con otras apps para Android. Se podría usar para crear una página que le informe al usuario que no puede usar la app sin conexión.
Nos dimos cuenta de que podíamos aliviar la carga de trabajo de los desarrolladores y asegurarnos de que estas apps proporcionen una buena experiencia de instalación desde el principio. Es por eso que Chrome agregó una experiencia sin conexión predeterminada que les muestra a los usuarios una pantalla con el ícono de la app para saber que no tienen conexión, sin requerir trabajo adicional por parte de los desarrolladores.
Por supuesto, la API del service worker sigue estando disponible para crear experiencias sin conexión personalizadas y también implementar otras funciones, como el almacenamiento en caché, para mejorar el rendimiento.
Entre otras funciones que pueden ofrecer una experiencia de app web más refinada en Android, se incluye la IU de instalación más enriquecida. Si agregas los campos description y screenshots a tu manifiesto web, los usuarios tendrán una experiencia de instalación más cercana a lo que muestran las tiendas de aplicaciones para describir tu app.
También tenemos atajos. Si agregas un array llamado shortcuts que describa un conjunto de acciones rápidas que los usuarios realizan con frecuencia en tu app, podrán acceder a ellas con una presión prolongada en el ícono de la app.
Con las APIs de Web Share y Web Share Target, tu app puede interactuar con otras apps, como cualquier otra de la plataforma. Tu app será una opción en las hojas de uso compartido y podrá compartir y recibir fotos, mensajes de texto y otros archivos.
Puedes ver la charla de I/O “La Web: tu plataforma de crecimiento” para obtener más información sobre cómo las empresas aprovechan estas tecnologías.
Actividad web de confianza
Otra forma de llevar la Web a Android es usar la Actividad web de confianza (TWA).
El TWA es la mejor manera de mostrar contenido web propio en pantalla completa en tu app. Es la solución ideal para los desarrolladores que desean unir su app web como una aplicación para Android o usar su sitio web como parte de una.
Ten en cuenta que TWA parece estar estrictamente relacionado con las AWP, pero no es así. Sí, con la TWA, puedes publicar tu app web instalable en Google Play, pero también puedes compilar una sola actividad en la Web y, luego, incluirla en tu app para Android.
El navegador del usuario procesa una actividad web de confianza de la misma manera que la vería en su navegador, excepto que se ejecuta en pantalla completa y no muestra una barra de URL. Esto significa que admiten todas las funciones y APIs de la plataforma web que admite el navegador que las impulsa.
Estas son algunas de las ventajas de unir tu app web con TWA:
Publicación en Google Play, que le brinda a tu app acceso a la visibilidad y distribución de Google Play. Tener acceso a la API de Play Billing, que permite a los desarrolladores administrar las ventas de artículos digitales en sus apps, lo que facilita la configuración de productos, ventas, suscripciones y mucho más. Delega los permisos de notificaciones y ubicación geográfica a la app para Android en lugar del sitio web.
Consulta este artículo para obtener más información sobre cómo ContactsDirect utilizó TWA para beneficiar a sus usuarios y triplicó sus porcentajes de conversiones.
Conclusión
Como pudiste ver, hay muchas opciones disponibles para incorporar contenido web en tu app, y todas estas opciones se mejoran de manera continua.