Web on Android

La plataforma Android ha existido por más de diez años y desde sus inicios ha tenido un gran soporte para la Web. Se envió con WebView, un componente que permite a los desarrolladores usar la web dentro de sus propias aplicaciones de Android. Más que eso, Android permite a los desarrolladores traer su propio motor de browser a la plataforma, fomentando la competencia y la innovación.

Los desarrolladores pueden incluir la web en sus aplicaciones de Android de muchas formas. WebView se usa con frecuencia para representar anuncios, como un componente de diseño que se usa junto con elementos nativos de la user interface o para empaquetar juegos HTML 5. Las pestañas personalizadas permiten a los desarrolladores crear browsers en la aplicación y proporcionar una experiencia de navegación perfecta para el contenido web de terceros, y Trusted Web Activity permite a los desarrolladores usar sus aplicaciones web progresivas (PWA) en aplicaciones de Android, que se pueden descargar desde Play Store. .

Android WebView

WebView brinda a los desarrolladores acceso a HTML, CSS and JavaScript modernos dentro de sus aplicaciones de Android, y permite que el contenido se envíe dentro del APK o se aloje en Internet. Es uno de los componentes más flexibles y potentes de Android, que se puede utilizar para la mayoría de los casos de uso en los que se incluye contenido web en una aplicación de Android. Desde impulsar servicios publicitarios como AdMob hasta crear y enviar juegos HTML5 completos que utilizan API modernas como WebGL.

But, when used to create an in-app browser or to embed a PWA in an Android app, WebView lacks the security, features, and capabilities of the web platform.

The in-app browser challenge

Con el tiempo, más y más desarrolladores han creado experiencias de navegador incorporando contenido de terceros en su aplicación de Android, con el target de crear una experiencia más fluida para sus usuarios cuando navegan a sitios web de terceros. Esas experiencias se conocieron como navegadores en la aplicación.

WebView tiene un amplio soporte para la pila de tecnología web moderna y es compatible con muchas API web modernas, como WebGL. Pero WebView es principalmente un conjunto de herramientas de interfaz de Username web. Eso
is not intended for, and does not support, all functions of the web platform. Cuando una API ya tiene una alternativa nativa, como Web Bluetoooth, o requiere que se implemente la interfaz de usuario del navegador, como push notifications, es posible que no be compatible. A medida que la plataforma web evoluciona y agrega más funciones que solo estaban disponibles para aplicaciones nativas, esta brecha se hará aún mayor. Como los desarrolladores de aplicaciones no controlan qué funciones se utilizan al abrir contenido de terceros, WebView es una mala elección para los navegadores integrados en aplicaciones o para abrir aplicaciones web progresivas. Incluso si WebView implementara soporte para todas las características de la plataforma web, los desarrolladores aún necesitarían escribir código e implementar su propia interfaz de usuario para funcionalidades como permisos o notificaciones push, lo que dificulta la coherencia para los usuarios.

Another option available to developers is to embed a browser engine in your application. In addition to leading to a larger application size, this approach is complex and time-consuming.

Custom tabs as a solution for integrated browsers in applications

Custom tabs era introduced in Chrome 45 and allows developers to use a tab from the user's default browser as part of their application. Custom tabs were originally released by Chrome and were therefore known as "Chrome Custom Tabs." Today is a Android API and the most popular browsers support custom tabs, including Chrome, Firefox, Edge, and Samsung Internet, so it's more appropriate to just call it "custom tabs."

Custom tabs help developers seamlessly integrate web content into their app experience. They also allow developers to customize the activity in which web content is displayed by allowing them to customize the color of the toolbar, action buttons, transition animation, and more.

They also offer features that were previously unavailable when using WebView or incorporating a browser engine. Since the app's browser works with the user's browser, custom tabs share storage with the browser, so users don't need to log back into their favorite websites every time one of their installed apps launches one. browsing session in the application.

Unlike WebViews, Custom Tabs supports all web platform features and APIs that are supported by the browser that powers it.

Open progressive web applications using trusted web activity

Progressive web applications bring many behaviors and capabilities that were previously only available to native applications on the web. With the introduction of app-like behavior, developers' desire to reuse those experiences on Android grew, and developers began asking for ways to integrate PWAs into their apps.

Custom Tabs tiene soporte para todas las capacidades web modernas y API pero, dado que fue diseñado principalmente para abrir contenido de terceros, tiene una barra de herramientas en la parte superior que les dice a los usuarios qué Url están visitando, así como el ícono de candado que indica si el sitio es seguro. Al abrir la propia experiencia de una aplicación, la barra de herramientas evita que la aplicación se sienta como si estuviera integrada con el sistema operativo.

Trusted web activities It was introduced in Chrome 72 and allows developers to use its PWA within an Android application. Its protocol is similar to the custom tabs protocol, but it introduces APIs that allow developers to verify (via Digital asset links) that control both the Android app and the URL that is opened and remove the URL bar when both are true.

They also introduced API to create splash screens when opening the PWA or delegating web notifications to be handled by native code. More features will be available soon, such as Play Billing support.

Since URLs opened in Trusted Web Activities are expected to be PWAs and have a set of behaviors and performance characteristics, Trusted Web Activities introduces quality criteria for PWAs that are opened within them.

Limitations of current solutions

Developer feedback showed the need for platform support for custom tabs combined with the flexibility of WebView so that they could, for example, access the DOM or inject JavaScript into their browsers within the application.

Custom tabs is effectively a tab rendered by the user's browser, with a custom user interface or no user interface at all. This means that the browser must meet the user's expectations for privacy and security towards the browser, which makes some of those functions impossible.

El equipo de Web on Android en Google está buscando alternativas y experimentando con soluciones para resolver esos casos de uso. ¡Estén atentos para más detalles!

Summary

WebView is useful when an application needs HTML, CSS, and JavaScript within its Android application, but does not use more advanced features and capabilities available on the modern web, such as push notifications, Bluetooth Web, and others. It is not recommended when opening content that has been designed for the modern web platform as it may not display the way the developer intended. WebView is not recommended for building application-integrated browsers. On the other hand, displaying first-person web content is one area where WebViews really shine.

Trusted web activity should be used when developers want to render their own full screen progressive web application within their Android application. It can be used as the only activity in the app or used in conjunction with other native activities.

Custom tabs is the recommended way to open third-party content designed for the web platform, also known as in-app browsers.