WebView is an indispensable part of applications, it allows to display web pages on the user interface screen. Here are 5 things that when you first approach WebView, you may not know.
1. Intercepting URLs
By implementing the shouldOverrideUrlLoading
method during the shouldOverrideUrlLoading
initialization WebViewClient,
we can intercept the URL during the site's navigation.
This way, we can control whether that URL should be loaded or open a certain activity
/ service
using the Intent
.
2. Basic Web Authentication
Many websites will ask users to enter their credentials. When we first setup the WebView
, we might miss this and lead to a 401 authentication error when it loads the page.
By implementing the onReceivedHttpAuthRequest
method, we can easily implement basic authentication in the WebView
:
1 2 3 4 5 6 7 8 | <span class="token keyword">override</span> <span class="token keyword">fun</span> <span class="token function">onReceivedHttpAuthRequest</span> <span class="token punctuation">(</span> view <span class="token operator">:</span> WebView <span class="token punctuation">,</span> handler <span class="token operator">:</span> HttpAuthHandler <span class="token punctuation">,</span> host <span class="token operator">:</span> String <span class="token punctuation">,</span> realm <span class="token operator">:</span> String <span class="token punctuation">)</span> <span class="token punctuation">{</span> handler <span class="token punctuation">.</span> <span class="token function">proceed</span> <span class="token punctuation">(</span> <span class="token string">"username"</span> <span class="token punctuation">,</span> <span class="token string">"password"</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> |
3. Setting Listeners for WebView Buttons and EditText
When we want to get data from WebView
forms, or perform an action when a button inside the WebView
is clicked, we can take advantage of Android-JavaScript interoperability.
If we know the view / widget ID in HTML, then executing Android actions based on WebView
interactions is pretty straightforward.
Just use the evaluateJavaScript
method and pass the JS code as a string. Ideally, it should be done in the onPageLoadFinishing
method
The above code is just for getting data from WebView
forms when the button is clicked and passing them to the Android.onWebBtnClick
method. In order for it to work, we need to create a JavaScript interface class and set it up on the WebView
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token keyword">class</span> <span class="token class-name">WebAppInterface</span> <span class="token punctuation">{</span> <span class="token class-name">Context</span> mContext <span class="token punctuation">;</span> <span class="token class-name">WebAppInterface</span> <span class="token punctuation">(</span> <span class="token class-name">Context</span> c <span class="token punctuation">)</span> <span class="token punctuation">{</span> mContext <span class="token operator">=</span> c <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token annotation punctuation">@JavascriptInterface</span> <span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">onWebBtnClick</span> <span class="token punctuation">(</span> <span class="token class-name">String</span> username <span class="token punctuation">,</span> <span class="token class-name">String</span> password <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//handle the data captured from webview</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
We set up on WebView as follows:
1 2 | webView.addJavascriptInterface(new WebAppInterface(this), "Android"); |
4. Trigger JavaScript Alert Prompts from Android
By default, prompts from JavaScript do not display natively in Android. So we need to override the onJsAlert
, onJsPrompt
and onJsConfirm
in the WebChromeClient
interface to display the alert ()
of JavaScript and other methods.
1 2 3 | webView <span class="token punctuation">.</span> <span class="token function">getSettings</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">setJavaScriptEnabled</span> <span class="token punctuation">(</span> <span class="token boolean">true</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> webView <span class="token punctuation">.</span> <span class="token function">setWebChromeClient</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">MyWebChromeClient</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
By implementing the method below you can show the Android alert:
1 2 3 4 5 6 7 8 | <span class="token keyword">final</span> <span class="token keyword">class</span> <span class="token class-name">MyWebChromeClient</span> <span class="token keyword">extends</span> <span class="token class-name">WebChromeClient</span> <span class="token punctuation">{</span> <span class="token annotation punctuation">@Override</span> <span class="token keyword">public</span> <span class="token keyword">boolean</span> <span class="token function">onJsConfirm</span> <span class="token punctuation">(</span> <span class="token class-name">WebView</span> view <span class="token punctuation">,</span> <span class="token class-name">String</span> url <span class="token punctuation">,</span> <span class="token class-name">String</span> message <span class="token punctuation">,</span> <span class="token keyword">final</span> <span class="token class-name">JsResult</span> result <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//implement AlertDialog here</span> <span class="token keyword">return</span> <span class="token boolean">true</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
5. Display Android File Chooser from WebView
We need to implement the onShowFileChooser
method in WebChromeClient
, in which we have to set the native file selector. Using the ValueCallBack interface of WebKit
helps to convert data from Android file picker to JavaScript code. In the
onActivityResult
method, when we get the data, just pass it to the uploadFile
instance in the following way:
1 2 | uploadFile <span class="token punctuation">.</span> <span class="token function">onReceiveValue</span> <span class="token punctuation">(</span> results <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
And now the selected data has been transferred from Android to JavaScript.
Refer
https://betterprogramming.pub/5-android-webview-secrets-you-probably-didnt-know-b23f8a8b5a0c
https://developer.android.com/reference/android/webkit/WebView