Android’s WebView Common Challenges and It’s Solution

Photo by Daniel Romero on Unsplash

In Android development, it is very common things in app that we encounter a webpage is loaded inside our App and exchanging interaction between embedded webpage and native page in App. This is make possible by Google team using Android’s WebView. According to Google in Android Developer’s Docs , The WebView class is an extension of Android's View class that allows you to display web pages as a part of your activity layout. So basically you can include WebView layout in an XML layout and then load an URL in it to be shown to user.

Webview in XML

Load URL in MainActivity.kt

Result

Fairly to say that using WebView it’s quite straightforward, but Android’s WebView‘s might get even more complex than we actually thought earlier. Things might get more complex when:

1. Showing shimmering loading or loading dialog when WebView start to load an URL until it finish loading the web page.
2. Redirect to native page if there’s any URL redirected from WebView that is supported in native App.
3. Error handling when WebView’s crashes.

Now, we will going to run through on solving common challenges above when we are working with WebView in Android. To able to tackle those challenges, we might need to use a WebViewClient provided from WebView. WebViewClient is basically a class that make any WebView’s callback possible for us to override or listen WebView behaviour. Those common challenges can be solved by the usage of a WebViewClient. First thing we need to do is to create an WebViewClient and set it into our WebView.

Here’s the code snippet.

WebviewClient in Webview

As we can see here, WebViewClient give us a lot of options to handle callback from WebView. As I shared above, some of these methods are going to solve some of the challenge we’re encountering. But before we start, I’m going to explain some methods in the code and its usage:

1. onPageStarted method is callback method fired during WebView is starting to load the webpage. We can use this callback to start shimmering or any native loading behaviour to tell user to wait until webpage finish loading.
2. onPageFinished method acts as the opposite of onPageStarted usage. This method is fired when WebView finish loading. As previously we start our loading at onPageStarted then we can dismiss the shimmering or other loading here. onPageStarted and onPageFinished methods are very useful for us to handle native loading behaviour so that user doesn’t need to see blank loading page while waiting the page to load.
3. shouldOverrideUrlLoading method is callback method fired from WebView when WebView is trying to load an URL. Sometimes it happens when WebView is redirecting into another web page. Here’s the great thing about shouldOverrideUrlLoading , as you can see this method expect us to return a Boolean . A Boolean return type gave us an authority to allow or cancel loading another URL in our WebView. To allow the URL loading, we can just return true and otherwise. This method is mostly use to check if URL is supported to open in native page, if supported we can start a new activity and return true in shouldOverrideUrlLoading method. This method surely can be use to solve the requirement to open native page from WebView when it is loading an URL that is supported in native page.
4. onReceivedHttpError method help us to receive callback when there’s any API or resource error specifically with ≥ 400 HTTP status code. The use case we can use here is to show or handle any native error handling like showing toast to tell user that’s an error in the web page and expect them to refresh or any other error handling.
5. onRenderProcessGone method notify us that WebView’s render process has exited which means WebView should be disposed and cleaned up programmatically as we cannot load any URL in a crashed WebView. We can either close the WebView’s activity and tell user to re-open it or we remove WebView class from view hierarchy and re-add it programmatically to continue using WebView. One thing that we should note that WebView engine can be shared in multiple activity thus onRenderProcessGone can be called in multiple activity that host those shared WebView’s engine and onRenderProcessGone method is only available on Android’s API 26 and above. onRenderProcessGone method enables us to handle WebView crashes in WebView gracefully.

We have run through some methods we can use at WebViewClient. Let’s take a look at common challenges and try to solve it using the knowledge we gained from WebViewClient capabilities.

1. Showing shimmering or loading dialog when WebView start to load an URL until it finish loading the web page.

To solve this challenge, we can use onPageStarted and onPageFinished method from WebViewClient as a trigger to show loading and hide loading every time the page load. We can also use this callback for tracking purpose on how long it takes for WebView to load the page completely.

2. Redirect to native page if there’s any URL redirected from WebView that is supported in native App.

To detect and intercept any redirection from WebView, we can use shouldOverrideUrlLoading and return true if it is supported to redirect into native page so that WebView stop the URL redirection in the web page and stay in the current page.

3. Error handling when WebView’s crashes.

It is a common thing that WebView engine may crash. When WebView crash, it will propagate the crash to the app and stop the App from running which result in bad experience to user. To handle this crash gracefully, we can use onRenderProcessGone to listen WebView’s render crash event and recreate the WebView.

That’s all about common challenges in Android’s WebView. Stay tuned for my next article about WebView that will discuss about passing data and interaction that’s backward compatible between Web app and Android’s WebView using JavascriptInterface and evaluateJavascript . Thank you.