It’s not easy for WebView to say I love you

[[189802]]

Why use WebView?

With the continuous development of app business, it is unrealistic to rely solely on native code to pile up functions. After all, the development time will increase, and both iOS and Android need to be developed at the same time. Moreover, if the UI is changed a little bit, a package needs to be moved (although Android can now perform hot updates, hot updates are not 100% effective. Anyone who has understood the principle will know it). In the end, we will choose to use native nested H5 for development. In this way, we can change the UI at any time and expand functions arbitrarily. Then, we will use Android's WebView, the control that makes us both sad and happy.

Nowadays, mobile phones are highly customized, and the native code of the system will be modified and added to a certain extent. The effects presented by WebView of different mobile phones are also different, which can be said to be colorful, so I understand the pain of Android developers. Next, I will explain my experience of using WebView in the project in detail. If you don't like it, please don't criticize me.

use

At the beginning, I believe everyone added the WebView control directly to the layout file. Of course, I did the same at the beginning, just for simplicity, and I didn’t know what problems would arise.

 <WebView 
 
    android:id= "@+id/web_view"       
 
    android:layout_width= "match_parent"       
 
    android:layout_height= "match_parent" />

Just add a WebView like this, and you will find that there is no problem, it can be displayed as usual, and everything is normal. When you repeatedly open the page with WebView, you will find that the memory of the application will continue to increase, and it will not drop after being destroyed, and it will not drop even if you click GC. This is a memory leak. At this time, you will find that it is incorrect to use WebView in this way, so what is the best way to use it?

That is to add it dynamically in the code.

First, declare a parent layout in the layout file

 <LinearLayout 
 
 android:id= "@+id/web_view"   
 
 android:layout_width= "match_parent"   
 
 android:layout_height= "wrap_content"   
 
 android:orientation= "horizontal"   
 
 android:scrollbars= "none" />

Then in the code, add WebView as its child View

 WebView webView = new WebView(context); 
 
 webViewLayout.addView(webView);

Many people on the Internet say that this context should use the application. I think it is wrong. What if your WebView needs to pop up a dialog? There are other unpredictable problems. It is best to use the Context of the current activity.

The above is about how to add WebView for use, and then what properties of it do we need to use in development?

 webView.loadUrl( "www.baidu.com" ); //WebView loads the webpage using loadUrl 
 
 WebSettings webSettings = webView.getSettings(); //Get WebView settings 
 
 webSettings.setUseWideViewPort( true ); // Set this property to scale at any ratio 
 
 webSettings.setLoadWithOverviewMode( true );//Adaptation 
 
 webSettings.setJavaScriptEnabled( true ); //Support js 
 
 webSettings.setCacheMode(WebSettings.LOAD_DEFAULT); //Set cache mode 
 
 webSettings.setDomStorageEnabled( true ); // Enable DOM storage API function 
 
 webSettings.setDatabaseEnabled( true ); // Enable database storage API function 
 
 webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW); //HTTPS, note that this is called above LOLLIPOP 
 
 webSettings.setAppCacheEnabled( true ); // Enable Application Caches 
 
 webSettings.setBlockNetworkImage( true ); //Turn off loading network images. Set this to true at the beginning of loading , and set it to false when the web page is finished loading.  

The above are the most basic settings for using WebView. I believe that the above settings will be performed during the development process.

 webView.setWebChromeClient(new WebChromeClient() { 
 
 @Override 
 
 public void onProgressChanged(WebView view , int newProgress) { 
 
 //Loading progress 
 
 } 
 
 @Override 
 
 public void onReceivedTitle(WebView view , String title) { 
 
 //Get the title of the WebView 
 
 } 
 
 @Override 
 
 public boolean onJsAlert(WebView view , String url, String message, final JsResult result) { 
 
 return super.onJsAlert( view , url, message, result); 
 
 //Js pop-up box 
 
 } 
 
 @Override 
 
 public boolean onJsConfirm(WebView view , String url, String message, final JsResult result) { 
 
        AlertDialog.Builder b = new AlertDialog.Builder(IllegalQueryActivity.this); 
 
 b.setTitle( "Delete" ); 
 
        b.setMessage(message); 
 
        b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() { 
 
 @Override 
 
 public void onClick(DialogInterface dialog, int which) { 
 
                result.confirm(); 
 
 } 
 
 }); 
 
        b.setNegativeButton(android.R.string.cancel, new DialogInterface.OnClickListener() { 
 
 @Override 
 
 public void onClick(DialogInterface dialog, int which) { 
 
                result.cancel(); 
 
 } 
 
 }); 
 
 b.create ().show(); 
 
 return   true ; 
 
 } 
 
 }); 
 
 webView.setWebViewClient(new WebViewClient() { 
 
 @Override 
 
 public boolean shouldOverrideUrlLoading(WebView view , String url) { 
 
 //You need to set the web page to be displayed in the current WebView so that it will not jump to the default browser for display 
 
 return   true ; 
 
 } 
 
 @Override 
 
 public void onReceivedError(WebView view , WebResourceRequest request, WebResourceError error) { 
 
        super.onReceivedError( view , request, error); 
 
 //Loading error 
 
 } 
 
 @Override 
 
 public void onPageFinished(WebView view , String url) { 
 
        super.onPageFinished( view , url); 
 
 //Loading completed 
 
 } 
 
 }); 
 
 webView.setDownloadListener(new DownLoadListener()); //Download listener 
 
 private class DownLoadListener implements DownloadListener { 
 
 @Override 
 
 public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength) { 
 
 } 
 
 }

Then there is the interaction between WebView and JS

 webView.addJavascriptInterface(new WebAppInterface(this), "WebJs" ); 
 
 public class WebAppInterface { 
 
 Context mContext; 
 
 public WebAppInterface(Context c) { 
 
 mContext = c; 
 
 } 
 
 @JavascriptInterface 
 
 public void method() { 
 
 } 
 
 } 
 
 webView.loadUrl( "javascript:jsMethod()" ); //This is the simplest way to call JS in WebView

When the activity executes the life cycle, it is important to note that WebView needs to be destroyed during onDestroy, otherwise memory leaks will occur.

 @Overrideprotected void onPause() { 
 
 super.onPause(); 
 
 if (webView != null ) { 
 
 webView.onPause(); 
 
 } 
 
 } 
 
 @Override 
 
 protected void onResume() { 
 
 super.onResume(); 
 
 if (webView != null ) { 
 
 webView.onResume(); 
 
 } 
 
 } 
 
 @Override 
 
 protected void onDestroy() { 
 
 if (webView != null ) { 
 
 webView.clearCache( true ); // Clear the cache 
 
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) { 
 
            if (webViewLayout != null ) { 
 
                webViewLayout.removeView(webView); 
 
 } 
 
        webView.removeAllViews(); 
 
 webView.destroy(); 
 
 } else { 
 
        webView.removeAllViews(); 
 
 webView.destroy(); 
 
        if (webViewLayout != null ) { 
 
            webViewLayout.removeView(webView); 
 
 } 
 
 } 
 
 webView = null ; 
 
 } 
 
 }

You can see that the system version is judged in the onDestroy method above. That's because I tested it in different versions. If the WebView version is lower than 5.0, if the WebView is removed from the parent first, the WebView will not be destroyed, which will cause memory leaks. You can try it yourself to see if this statement is correct.

Another problem we are facing now is that when WebView is nested in ScrollView, some models will have screen flashing problems, which will not happen when using WebView alone. After turning off hardware acceleration, the user experience is not good. Therefore, we have not thought of a better solution yet, so it is recommended not to nest controls such as WebView in ScrollView.