What’s new for web on Android 2023 - Chrome Developers (2024)

There are many reasons for developers tobring the web to Android: maybe reusing a web widget in an Android app, incorporating first-party or third-party content, even bringing their entire web app to the platform. Whatever the use case, Android has many tools to make it possible.

Here are the latest updates to these tools. For example:

  • Privacy improvements and better support for large screens, such as support for image drag and drop inWebView.
  • Custom Tabsnow supports partial custom tabs.
  • Integrated features forPWA, like Richer Install UI and Play billing API inTrusted Web Activities.

Let’s dive in and learn more.

#WebView

WebView is the most commonly used way to embed web content into Android apps, as the vast majority of Android apps use WebView. It is a great way to seamlessly integrate Web UI in native Android app experiences. For example, you can embed different Web UI into your app such as ads, widgets, or even in-app browsers. One of WebView’s biggest strengths is its powerful API for controlling and modifying the web content that is being loaded. So what’s new in WebView?

#X-Requested-With header

Let’s start with privacy and theX-Requested-With header deprecation. When a user installs and runs an application that uses a WebView to embed web content, the WebView will add the X-Requested-With header to every request sent to servers. The value of this header is the application's APK name. This means every request includes specific information about the context in which the user is consuming web content, and leaks the identity of the app to the online service. To protect user privacy, the WebView team started a deprecation trial which removes this header from all WebView requests.

But what if your app relies on X-Requested-With header? Our recommended method is to use thenew opt-in APIthat enables you to selectively send the request header to specific origins. This means you get the best of both worlds: you can continue to support existing features built on top of this header, while making sure that the user’s privacy is preserved in all other cases. If you want to keep the existing behavior, you can also sign up for theX-Requested-With Deprecationorigin trial.

WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
demoWebview.getSettings(), Collections.singleton("https://example.com")
);

#WebView testing

The next topic is testing. If you are a web developer, and your websites receive a lot traffic from WebViews, there are two updates for you:

  1. WebView now supportsChrome origin trials. Origin trials give you access to new or experimental features in Chrome. You can use these to try out a new feature before the feature is made available to everyone. Until now, origin trials have only been available on desktop and mobile Chrome, but starting with Chrome M110, origin trials also work in WebView.

  2. It is now much easier to install WebView Beta. We highly recommend testing your website using the WebView Beta channel to make sure that your website works well in upcoming WebView versions. To do this, join theWebView Beta testing program on the Google Play Store, and your device will automatically be enrolled.

What’s new for web on Android 2023 - Chrome Developers (1)

#Large screen device support

Our goal is to make WebView work well on large screen devices. One step in this direction is that WebView now supports image drag and drop. For example, in split screen view mode, you can drag an image from a WebView into a different app.

It’s very easy to add drag and drop to your WebViews: you just need to declare a DropDataProvider in your AndroidManifest.

<application...>
...
<provider
android:authorities="com.example.webviewdemo.DropDataProvider"
android:name="androidx.webkit.DropDataContentProvider"
android:exported="false"
android:grantUriPermissions="true"/>

application>

Talking of large screen devices, Chrome and WebView on Android U will come with full support for handwriting in HTML text input fields, and with input gestures for deleting text or adding spaces. Handwriting support is already available for all Samsung devices with One UI 5.1, like the S23 Ultra. For other devices using Android T, you can enable handwriting in HTML inputs under Developer options.

#Jetpack JavaScript Engine

Sometimes you might need to run JavaScript in your app without having to display any web content; for example, when sharing business logic across web and mobile apps. To make this easier, we launched thealpha release of the new JetPack JavaScript enginelast year. This library uses the V8, Chrome’s JavaScript engine, and lets your application evaluate JavaScript or WebAssembly code without creating a WebView instance. The great thing about the new JavaScript engine is that it executes your JavaScript in a different process, making it a secure and stable way to run JavaScript in your app. It also requires fewer resources than a WebView instance.

ListenableFuture<JavaScriptSandbox>jsSandboxFuture=
JavaScriptSandbox.createConnectedInstanceAsync(JavaScriptEngineActivity.this);
JavaScriptIsolatejsIsolate=jsSandboxFuture.get().createIsolate();
final Stringcode=
"function sum(a, b) { let r = a + b; return r.toString(); }; sum(3, 4)";
ListenableFuture<String>resultFuture=jsIsolate.evaluateJavaScriptAsync(code);

#Custom Tabs

What’s new for web on Android 2023 - Chrome Developers (2)

WebView is great for integrating Web UI into your app. But what about letting users browse web content in your app?

This is a great use case for Custom Tabs. They are a secure and user-friendly way to let users view web content in your app. Their big advantage is that users don't need to re-log in to their favorite websites. This is because they are an instance of the user's default browser and cookies being shared, and they offer all web platform features and APIs supported by the browser powering it.

This also means that if your default browser is Chrome, a custom tab is opened in Chrome; if your default browser is Firefox, a Custom Tab will be opened in Firefox. Most of the major browsers on Android support Custom Tabs, and if the default browser does not support Custom Tabs, the browser app will open instead.

What’s great about Custom Tabs is that you can style them to match the look and feel of your app, add custom interactivity via actions, and your own toolbars.

What’s new for web on Android 2023 - Chrome Developers (3)

#Partial Custom Tabs

Custom Tab customizations got a major upgrade with support forPartial Custom Tabs. They let users multi-task between apps and the web. Until now, when using Custom Tabs, the browser tab overlay would cover the whole screen. Now you can control the height of the Custom Tab overlay. This way, users can interact with your app and web content at the same time. If your user’s browser does not support Partial Custom Tabs, the user will simply see the supported full-screen Custom Tab.

All you need to do is to connect to the Custom Tabs Service, pass the session to the CustomTabsBuilder, and call setActivityHeight.

CustomTabsSessioncustomTabsSession;

// ...

CustomTabsIntentcustomTabsIntent= new CustomTabsIntent.Builder(customTabsSession)
.setInitialActivityHeightPx(500)
.setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
// ...
.build();

customTabsIntent.launchUrl(context, Uri.parse(url))

YouTube successfully launched resizable inline Custom Tabs on direct response ads. This way, they’ve been able to implement a new way of interacting with ads and web content without interrupting the organic experience on the app.

What’s new for web on Android 2023 - Chrome Developers (4)

But what about tablets and other large screen devices? The Chrome team is currently working on a new side-by-side Custom Tabs experience for landscape mode and large screen devices. By defining a maximum tab width, together with a breakpoint, the Custom Tab experience will automatically switch between the bottom sheet overlay and the side-by-side experience. The feature is already available in Canary and will launch around July 2003. If you want to try it out, check out the source code of the Chromium Custom Tabs example app.

What’s new for web on Android 2023 - Chrome Developers (5)

#Measuring engagement signals

The second big update to Custom Tabs is measuring session-specific user engagement. If your app regularly shows content to your users including links, for example, in a news feed, wouldn’t it be great if you could tell which links a user finds valuable and which not? This information can be really helpful when it comes to prioritizing which links to show to your users.

The Chrome team added session-specific metric visibility to Chrome Custom Tabs. In addition to how long a user stays on a page, you can now also get visibility into scroll distance, scroll direction, and overall engagement with web content.

Engagement signals are available starting with Chrome 114 and require theandroidx.browser:browser:1.6.0-alpha01support library or higher. To learn more, check out the engagement signals getting started guide.

#PWA

There also are updates in PWA— a set of technologies that make it possible to create app-like experiences, built and deployed on the web.

Using PWA on Android, your web app could be installable: it will live along the other platform apps, on the home screen, launcher, settings, and other surfaces.

PWA features are built based on web standards; they focus on cross-platform compatibility, giving developers the tools to build a web app once, and allowing users to install it on whichever device they choose. Building an installable web app doesn’t mean you can’t or shouldn’t have a native Android app, but it is another option to bring the web to Android.

Let’s check a couple of features that make your installable web app feel at home in Android.

We wanted to empower users to install the websites they care about most. The first step was removing the service worker fetch handler as a requirement for installation on Android and Chrome. In addition, Chrome will skip starting the service worker if thefetch handler is empty. Chrome will be running experiments to expand access to installation for users. Keep an eye out for those and please provide feedback.

The service worker requirement existed for developers to create a user experience that was consistent with other Android apps. It could be used to create a page informing the user that they couldn’t use the app while offline.

We realized that we could ease the workload for developers, and ensure that these apps provide a good installed experience right from the beginning. That's why Chrome added adefault offline experiencewhich shows users a screen with the app’s icon, letting them know they are offline, without requiring additional work by developers.

Of course, the service worker API is still available to build custom offline experiences and implement other features like caching to improve performance.

Some other features that can bring a polished web app experience to Android include theRicher Install UI. By adding the fieldsdescriptionandscreenshotsto your web manifest, your users will get an install experience that is closer to what app stores show to describe your app.

We also haveshortcuts. By adding an array calledshortcutswhich describes a set of quick actions that your users frequently make in your app, they will be able to access these actions by long pressing on the app’s icon.

UsingWeb ShareandWeb Share TargetAPIs, your app can interact with other apps, like any other platform app. Your app will be an option in the sharing sheets, and can share and receive photos, texts, and other files.

You can check out the I/O talk “The Web: Your platform for growth” for more information on how businesses are leveraging these technologies.

#Trusted Web Activity

Another way to bring the web to Android is usingTrusted Web Activity (TWA).

TWA is the best way to display full screen first-party web content in your app. It is the ideal solution for developers who want to wrap their web app as an Android application, or use their website as part of one.

Note that TWA sounds like it is strictly related to PWA, but it is not. Yes, by using TWA you can publish your installable web app to Google Play, but you could also build a single activity on the web and include it on your Android app.

A Trusted Web Activity is rendered by the user’s browser in exactly the same way as a user would see it in their browser, except they are run full screen and do not display a URL bar. This means that they support all web platform features and APIs supported by the browser powering it.

A couple of advantages of wrapping your web app using TWA are:

Publishing to Google Play, which gives your app access to Google Play’s visibility and distribution. Having access to thePlay Billing API, which allows developers to manage digital goods sales in their apps, making it easier to set up products, sales, subscriptions, and more. Delegating notifications and geolocation permissions to the Android app instead of the website.

Checkthis articleto learn more about how ContactsDirect has used TWA to benefit their users and tripled their conversion rates.

#Conclusion

As you’ve seen, there are many different options available for embedding web content into your app and all these options are continuously being improved.

What’s new for web on Android 2023 - Chrome Developers (2024)

FAQs

What is WebView in Android? ›

Android System WebView is a feature that allows apps running on the Android operating system to display content from the internet without needing to open a web browser. Since it's a component of the Android OS, and apps use it for a specific purpose, there's no reason to worry about it running on your phone.

Does PWA use WebView? ›

You open a web site without getting out of the app. In that case you are not opening an stand-alone browser but something called in-app browser. An in-app browser renders web content by using a Native WebView. A PWA follows the same principle.

How to use WebView? ›

  1. Add a WebView to your app. Add a WebView in the activity layout. Add a WebView in onCreate()
  2. Work with WebView on older versions of Android.
  3. Use JavaScript in WebView. Enable JavaScript. Bind JavaScript code to Android code.
  4. Handle page navigation. Handle custom URLs. Navigate web page history. ...
  5. Manage windows.
Aug 25, 2022

What is a WebView? ›

WebView is used to embed applications in other web application Using WebView is a low-code way of constructing hybrid applications that free developers from having to code native applications from scratch.

What is the difference between Chrome and WebView? ›

WebView is built on top of the open source Chromium project, but it doesn't share any data with Google Chrome. In Android 7, 8, and 9 (Nougat/Oreo/Pie), WebView is built into Chrome. Because they share so much underlying code, this saves space and memory on your device.

What is the difference between Android browser and Android WebView? ›

A webview is basically just the engine of the browser, with the user interface removed. That allows you to replace the browser's UI with mobile UI elements, making it appear like a web page is actually part of a mobile app.

What is the difference between web apps and PWA? ›

PWAs are smaller, enabling faster loading than native web applications and lowering the bounce rate. Native App features: Progressive Web Applications support most of the features of native apps, such as offline support, push notifications, and many more.

What is the difference between PWA and mobile web? ›

PWAs can be easily installed on a user's home screen, allowing them to access the app quickly without the need to go through the app store. Native apps, on the other hand, are applications that are built specifically for a particular platform, such as iOS or Android.

What is a progressive web app Android? ›

Progressive Web Apps (PWAs) are web apps built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device, all with a single codebase. The web platform. Platform-specific apps. Bringing the best of both worlds. Web.

What is the benefit of WebView? ›

An app with a webview can provide benefits such as a seamless integration of web-based content within the app's user interface, the ability to leverage existing web-based functionality without having to re-implement it natively, and the ability to quickly update web-based content without having to update the app itself ...

How to create an app with WebView? ›

A step-by-step guide to building a webview app
  1. Step #1: Create an account on AppMySite.
  2. Step #2: Design your icon, launch screen, and login screens.
  3. Step #3: Turn on webview for home screen.
  4. Step #4: Connect your website and app.
  5. Step #5: Turn on webview for all app screens.
  6. Step #6: Preview your app.
Feb 7, 2023

What is menus in Android? ›

Menus are a common user interface component in many types of applications. To provide a familiar and consistent user experience, you should use the Menu APIs to present user actions and other options in your activities.

How do I open WebView on Android? ›

Step by Step Implementation
  1. Step 1: Create a New Project in Android Studio. To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. ...
  2. Step 2: Working with the MainActivity File. Go to the MainActivity File and refer to the following code.
May 8, 2023

How do I know if a app is using WebView? ›

Inside the apk, in file /res/layout/main. xml (or perhaps views by other names with . xml extension), the phrase "WebView" is used.

How do I use WebView in Chrome? ›

Use the webview tag to actively load live content from the web over the network and embed it in your Chrome App. Your app can control the appearance of the webview and interact with the web content, initiate navigations in an embedded web page, react to error events that happen within it, and more (see Usage).

What happens if I disable Android WebView? ›

You should not disable Android System WebView as many apps rely on it to display web-based content, including emails in Gmail. If you disable it, you may notice silent crashes in many apps.

Why do I need Android System WebView? ›

Android System WebView is a part of the Android operating system that offers app developers a built-in browser inside apps to display web content. Doing so eliminates the need to redirect users to an external web browser and, in turn, offers a unified browsing experience.

Should I delete WebView? ›

In general, you should not uninstall Android System WebView unless you are experiencing problems with it. If you are experiencing issues with your apps, especially those that use WebView, you might consider uninstalling and reinstalling the component to see if this resolves the problem.

References

Top Articles
Latest Posts
Article information

Author: Prof. An Powlowski

Last Updated:

Views: 5353

Rating: 4.3 / 5 (64 voted)

Reviews: 95% of readers found this page helpful

Author information

Name: Prof. An Powlowski

Birthday: 1992-09-29

Address: Apt. 994 8891 Orval Hill, Brittnyburgh, AZ 41023-0398

Phone: +26417467956738

Job: District Marketing Strategist

Hobby: Embroidery, Bodybuilding, Motor sports, Amateur radio, Wood carving, Whittling, Air sports

Introduction: My name is Prof. An Powlowski, I am a charming, helpful, attractive, good, graceful, thoughtful, vast person who loves writing and wants to share my knowledge and understanding with you.