Existen muchas razones por las que los desarrolladores pueden llevar la Web a Android, como reutilizar un widget web en una app para Android, incorporar contenido de origen o de terceros, e incluso llevar toda su aplicación web a la plataforma. Cualquiera sea el caso de uso, Android tiene muchas herramientas para hacerlo posible.
A continuación, presentamos las actualizaciones más recientes de estas herramientas. Por ejemplo:
- Se realizaron mejoras de 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 la AWP, como una IU de instalación más enriquecida y la API de Facturación Play en Actividades web de confianza.
Analicémoslas y obtengamos más información.
WebView
WebView es la forma más utilizada de incorporar contenido web en apps para Android, ya que la gran mayoría de ellas usan WebView. Es una excelente manera de integrar perfectamente la IU web en experiencias de apps nativas para Android. Por ejemplo, puedes incorporar en tu app diferentes IU web, 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 utiliza un componente WebView para incorporar contenido web, el componente WebView agrega el encabezado X-Requested-With a cada solicitud que se envía 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é pasa si tu app depende del encabezado X-Requested-With? Nuestro método recomendado es usar la nueva API de aceptación, que te permite enviar de manera selectiva el encabezado de la solicitud a orígenes específicos. Esto significa que obtiene lo mejor de ambos mundos: puede continuar admitiendo las funciones existentes compiladas en este encabezado y, al mismo tiempo, asegurarse de preservar la privacidad del usuario en todos los demás casos. Si quieres conservar el comportamiento existente, también puedes registrarte en la prueba de origen de X-Solicitado con la baja.
WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
demoWebview.getSettings(), Collections.singleton("https://example.com")
);
Pruebas de WebView
El siguiente tema son las pruebas. Si eres desarrollador web y tus sitios web reciben mucho tráfico de WebViews, puedes implementar dos actualizaciones:
WebView ahora admite pruebas de origen de Chrome. Las pruebas de origen te brindan 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; sin embargo, a partir de Chrome M110, las pruebas de origen también funcionan en WebView.
Ahora es mucho más fácil instalar la versión beta de WebView. Te recomendamos que pruebes tu sitio web con el canal beta de WebView para asegurarte de que funcione correctamente 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 de 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 hacia una app diferente.
Es muy fácil agregar la función de 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 serán totalmente compatibles con la escritura a mano en 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. Para otros dispositivos que usan Android T, puedes habilitar la escritura a mano en entradas HTML en Opciones para desarrolladores.
Motor de JavaScript de Jetpack
En ocasiones, es posible que debas ejecutar JavaScript en tu app sin tener que mostrar contenido web; por ejemplo, cuando compartes lógica empresarial en apps web y para dispositivos móviles. Para facilitar este proceso, el año pasado lanzamos la versión alfa del nuevo motor JetPack JavaScript. Esta biblioteca usa V8, el motor de JavaScript de Chrome, y permite que tu aplicación evalúe el código JavaScript o WebAssembly sin crear una instancia de WebView. Lo mejor 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. Además, 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é pasa 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 usar para permitir que los usuarios vean contenido web en tu app. Su gran ventaja es que no necesitan volver a acceder a sus sitios web favoritos. Esto se debe a que son una instancia del navegador predeterminado del usuario y de las cookies que se comparten, y ofrecen todas las funciones de plataforma web y API compatibles con el navegador que lo impulsa.
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 principales navegadores de Android admiten pestañas personalizadas y, si el navegador predeterminado no lo hace, se abrirá la app del navegador.
Lo bueno de las pestañas personalizadas es que puedes asignarles un estilo que coincida con la apariencia de tu aplicación, agregar interactividad personalizada a través de acciones y tus propias barras de herramientas.
Pestañas personalizadas parciales
Se realizó una actualización importante para las personalizaciones de las pestañas personalizadas, que es compatible con las pestañas personalizadas parciales. Permiten que los usuarios realicen varias tareas a la vez entre apps y la Web. Hasta ahora, cuando se utilizaban 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 contenido web al mismo tiempo. Si el navegador de tu usuario no admite pestañas personalizadas parciales, simplemente verá la pestaña personalizada en pantalla completa compatible.
Lo único que debes hacer es conectarte al servicio de pestañas personalizadas, 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 pestañas personalizadas intercaladas de tamaño variable en los anuncios de respuesta directa. De esta forma, han podido implementar una nueva forma de interactuar con los anuncios y el contenido web sin interrumpir la experiencia orgánica en la aplicación.
Pero ¿qué pasa con las tablets y otros dispositivos con pantalla grande? En este momento, el equipo de Chrome está trabajando en una nueva experiencia de pestañas personalizadas en paralelo para dispositivos con pantalla grande y modo horizontal. Al definir un ancho máximo de pestaña, junto con un punto de interrupción, la experiencia de 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 2003. Si deseas probarla, consulta el código fuente de la app de ejemplo de pestañas personalizadas de Chromium.
Medición de indicadores de participación
La segunda actualización importante de las pestañas personalizadas es medir la participación del usuario específica de la sesión. Si tu aplicación les muestra a los usuarios contenido con frecuencia, incluidos vínculos, por ejemplo, en un feed de noticias, ¿no sería genial si pudieras saber cuáles son los vínculos que un usuario considera valiosos y cuáles no? Esta información puede ser muy útil cuando se trata de priorizar qué vínculos mostrar a tus usuarios.
El equipo de Chrome agregó la visibilidad de métricas específicas de la sesión a las pestañas personalizadas de Chrome. Además del tiempo que un usuario permanece en una página, ahora también puedes obtener visibilidad de la distancia de desplazamiento, la dirección de desplazamiento y la participación general en 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 versiones posteriores. Para obtener más información, consulta la guía de introducción de los indicadores de participación.
AWP
También hay actualizaciones en AWP, un conjunto de tecnologías que permiten crear experiencias similares a las de aplicaciones, compiladas e implementadas en la Web.
Si utilizas la AWP en Android, tu aplicación web podría instalarse: se ubicará junto a las otras apps de la plataforma en la pantalla principal, el selector, la configuración y otras plataformas.
Las funciones de las AWP se crean a partir de estándares web; se enfocan en la compatibilidad multiplataforma. Ofrecen a los desarrolladores las herramientas para compilar una app web una sola vez y permiten que los usuarios la instalen en cualquier dispositivo que elijan. Compilar 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 un par de funciones que hacen que tu aplicación web instalable se sienta como en casa en Android.
Queríamos permitirles a los usuarios instalar los sitios web que más les interesan. El primer paso fue quitar el controlador de recuperación del service worker como requisito para la instalación en Android y Chrome. Además, Chrome no iniciará el 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. Mantente pendiente y envíanos tus comentarios.
El requisito de service worker existía para que los desarrolladores crearan una experiencia del usuario que fuera coherente con otras apps para Android. Se puede usar para crear una página en la que se informe al usuario que no puede usar la app sin conexión.
Nos dimos cuenta de que podíamos reducir la carga de trabajo de los desarrolladores y asegurarnos de que estas apps brinden una buena experiencia de instalación desde el principio. Por esta razón, Chrome agregó una experiencia sin conexión predeterminada que muestra a los usuarios una pantalla con el ícono de la app, lo que les indica que no tienen conexión, sin que los desarrolladores deban realizar un trabajo adicional.
Por supuesto, la API de service worker todavía está disponible para crear experiencias personalizadas sin conexión y, además, implementar otras funciones como el almacenamiento en caché para mejorar el rendimiento.
Entre otras funciones que pueden brindar una experiencia de aplicación web mejorada a Android, se incluyen la IU de instalación enriquecida. Si agregas los campos description y screenshots a tu manifiesto web, los usuarios disfrutarán de una experiencia de instalación más cercana a lo que muestran las tiendas de aplicaciones para describir tu app.
También tenemos accesos directos. Si agregas un array llamado shortcuts, que describe un conjunto de acciones rápidas que los usuarios realizan con frecuencia en tu app, podrán acceder a estas acciones si mantienen presionado 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 app de la plataforma. Tu app aparecerá como opción en las hojas de uso compartido, y podrá compartir y recibir fotos, textos y otros archivos.
Puedes mirar la charla de I/O “La Web: tu plataforma para el 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 función Actividad web de confianza (TWA).
TWA es la mejor forma de mostrar en tu app contenido web propio de pantalla completa. Es la solución ideal para los desarrolladores que desean unir su aplicación 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 AWP, pero no lo está. Sí, con TWA puedes publicar tu aplicación web instalable en Google Play, pero también puedes crear una sola actividad en la Web e incluirla en tu aplicación para Android.
El navegador del usuario procesa una actividad web de confianza exactamente de la misma manera que un usuario la vería en su navegador, excepto que se ejecutan en pantalla completa y no muestran una barra de URL. Esto significa que admiten todas las funciones y API de la plataforma web compatibles con el navegador que la impulsa.
Un par de ventajas de unir tu aplicación web con TWA son las siguientes:
Publicar en Google Play, que le da 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, ofertas, suscripciones y mucho más Delegar 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 aplicación, y todas estas opciones se mejoran continuamente.