WebView- Love it or hate it, but you can’t ignore it.
Let’s admit that we all have a love-hate relationship with the WebViews. We can’t live with them and we can’t live without them. Although using a WebView degrades the user experience of the application, there are some places where we can’t do without it. So despite not wanting to, we end up using WebViews in our application.
In this post I will try to cover the following points regarding the WebViews
- Load a local html file into a WebView with the basic WebView settings.
- Handle Javascript callbacks from the Javascript to the client.
- Make Javascript callbacks from the client to Javascript.
- Set WebViewClient to the WebView
- Debugging of WebView
Demo Application:
I will be using a demo application for this post. The application has one WebActivity which has WebView loaded inside it. The html page loaded in the WebView has 2 buttons. ( See Image 1)
- Click for showing Toast Message button- This button will make a javascript callback along with a string which will be shown as a Toast in the client. (See Image 2)
- Click for Loading Text in WebView button- This button will make a javascript callback in the client. Upon receiving the callback, the client will call a Javascript function which will set the text inside the html. (See Image 3).
Introduction
To use WebView, declare the following the following code in the xml file.
WebView has a plethora of settings and understanding all of these settings at first can be a little daunting. So, in this post I will cover the bare minimum settings required to load any WebView.
setJavaScriptEnabled(boolean enabled)
This function determines whether the client can receive callbacks from Javascript and client can make calls to the Javascript functions. If set to false, there will be no communication between the client and the Js/html page.
setCacheMode(int mode)
This function is one of the most important functions for determining how the WebView will perform. If the html page being rendered is a static html or an html with resources which are less likely to change over time, then it is very much advisable to enable Cache for the html page. Refer this method to see the various types of caching available for the Web Pages.
setVerticalScrollBarEnabled(boolean enabled)
As the name suggests, this function will enable or disable the vertical scrolling in the WebView.
setHorizontalScrollBarEnabled(boolean enabled)
As the name suggests, this function will enable or disable the horizontal scrolling in the WebView.
setUseWideViewPort(boolean enabled)
When set to true, the html page will take the size of its own. i.e the width and height declared in the the html page. If set to false, the page will contain within the dimensions of the device.
Based on the above settings, we initialise our WebView.
Client Receiving Callbacks from Javascript:
For the client, to receive callbacks from Javascript there must be a Javascript interface class inside it which will implement the callbacks. The callbacks must have the same name and same number of arguments as called through Javascript. Additionally, all these callbacks should be annotated with @JavascriptInterface annotation. Without this annotation, the methods will not be invoked. In the below class, I have declared two functions handleMessage() and setWebViewTextCallback() which will be invoked by Javascript.
The WebView adds the Javascript interface like this.
webView.addJavascriptInterface(new WebViewJsInterface(webView), "handler");The second argument to the addJavascriptInterface will be a handler through will Javascript will call the functions implemented in the client.
The following functions are implemented in the Javascript:
So as soon as the user clicks on the first button, the following piece of code will be executed in the javascript.
handler.handleMessage(‘This is a toast message from Javascript !!’)
Since handleMessage() is implemented in the client, this method will be invoked and a Toast message will be displayed.
Client making function calls to Javascript
There are instances when the client wants to call Javascript functions. Let’s consider we have a function setText() implemented in our Javascript file.
To invoke that function, we need to build a String and then call a WebView function with the string argument. The string is constructed as follows
functionName(Object… params).
So if we need to call the above function, then we must pass setText(‘This is a text from Android which is set in the html page.’) as the argument.
I have written a utility function which takes the name of the function to be invoked and the parameters and which returns a script.
Finally when we get the string, we call the WebView function. Now based on the API Level, there are two different functions which we need to call.
For API Level 18 and below: we need to call loadUrl function.
webView.loadUrl(“javascript:” + script);
For API Level 19 and above: we need to call evaluateJavascript method. This function takes the argument and additionally returns a value returned by the calling method.
I have written a utility function which takes String argument to be called and based on the Android API Level, calls the appropriate function.
Set WebViewClient to the WebView
With the help of WebViewClient, the client gets more control of the web page that is being loaded. The client can receive various callbacks like when the WebView has started loading, when the WebView has loading etc. It is always a good practice to extend WebViewClient and then attach it to the WebView.
For the purpose of demonstration, I am overriding few functions of the WebViewClient and putting logs around them. In real applications, these overridden functions will be used for much more.
Now set the WebView client as follows:
webView.setWebViewClient(new CustomWebViewClient());Debugging of WebView
We can debug the WebView in the Chrome Developers Tools as a normal web page. To enable WebView debugging we need to add the following code.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}Now when the application is run, open chrome://inspect/#devices and select the appropriate WebView and you are good to go. For more on WebView Debugging, follow this article.
The project is hosted at Github.
Thanks for reading the article. If you find the article useful, please recommend it.
Check out my other Github projects here and my other medium articles here. Also, let’s get connected on LinkedIn.
For more about programming, follow Mindorks , so you’ll get notified when we write new posts.
