How different components can be used to render web content within Android applications.
Updated
The Android platform has been around for more than ten years and since its inception it has had great support for the Web. It was shipped with WebView, a component that allows developers to use the web within their own Android applications. More than that, Android allows developers to bring their own browser engine to the platform, fostering competition and innovation.
Developers can include the web in their Android applications in many ways. WebView is often used to render ads, as a layout component used in conjunction with native UI elements, or to package HTML 5 games. Custom tabs allow developers to build in-app browsers and provide an in-app experience. seamless navigation for third-party web content, and Trusted Web Activity allows developers to use their Progressive Web Applications (PWA) in Android applications, which can be downloaded from the Play Store. .
Android WebView
WebView gives developers access to modern HTML, CSS, and JavaScript within their Android applications, and allows content to be delivered within the APK or hosted on the Internet. It is one of the most flexible and powerful components of Android, which can be used for most use cases where web content is included in an Android application. From powering ad services like AdMob to creating and submitting full HTML5 games using modern APIs like 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
Over time, more and more developers have created browser experiences by incorporating third-party content into their Android application, with the goal of creating a smoother experience for their users when browsing to third-party websites. Those experiences became known as in-app browsers.
WebView has extensive support for the modern web technology stack and is compatible with many modern web APIs, such as WebGL. But WebView is primarily a set of web user interface tools. That
is not intended for, and does not support, all functions of the web platform. When an API already has a native alternative, such as Web Bluetoooth, or requires the browser UI to be implemented, such as push notifications, it may not be supported. As the web platform evolves and adds more features that were only available to native apps, this gap will only get bigger. Since application developers do not control what functions are used when opening third-party content, WebView is a poor choice for in-app browsers or for opening progressive web applications. Even if WebView implemented support for all the features of the web platform, developers would still need to write code and implement their own user interface for functionality like permissions or push notifications, making consistency difficult for users.
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 has support for all modern web capabilities and APIs, but since it was primarily designed to open third-party content, it has a toolbar at the top that tells users which URLs they are visiting, as well as the icon for padlock that indicates if the site is secure. By opening an application's own experience, the toolbar prevents the application from feeling as though it is integrated with the operating system.
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.
The Web on Android team at Google is looking for alternatives and experimenting with solutions to solve those use cases. Stay tuned for more details!
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.
