WebView knowledge and WebView knowledge

WebView knowledge and WebView knowledge
I. Basic Introduction

WebView is a component used to display pages.

Ii. Basic use

The network is required to access the webpage. Therefore, the network permission is added to the AndroidManifest. xml file.

<uses-permission android:name="android.permission.INTERNET" />

You can use Intent to jump to a webpage, using the following:

Uri uri = Uri.parse("http://www.baidu.com");Intent intent = new Intent(Intent.ACTION_VIEW, uri);startActivity(intent);

When you use Intent to jump to a webpage, a local browser is called to view the webpage information.

In the onCreate () method, set contentView to webView. The method is as follows:

WebView webView = new WebView(this);setContentView(webView);loadUrl("http://www.baidu.com");

In this way, the entire interface is webpage content.

Another way is to use webView as a component of the entire interface. Add the WebView component in activity_main, as shown below:

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

Use WebView in MainActivity. java. The Code is as follows:

webView = (WebView) findViewById(R.id.web_view);webView.loadUrl("http://www.baidu.com");

Iii. Setting Support for JavaScript

If JavaScript is used in the webpage and JavaScript is not supported, the webpage cannot be displayed normally. if JavaScript is used in the webpage, JavaScript is supported.

// Enable javascriptwebView. getSettings (). setJavaScriptEnabled (true );

4. When you click the return key, you do not want to exit the browser.

If you want to click the return key and navigate to the web page to roll back the page, instead of exiting the browser directly, you need to rewrite the onKeyDown function and call the geBack () method of WebView to roll back the page.

// Rewrite the logic of the Return key. // you do not want to exit the browser @ Override public boolean onKeyDown (int keyCode, KeyEvent event) {if (keyCode = KeyEvent. KEYCODE_BACK) {if (webView. canGoBack () {webView. goBack (); // return the return true on the previous page;} else {System. exit (0); // exit the program} return super. onKeyDown (keyCode, event );}

5. Determine the page loading process

Set the WebChromeClient () method of WebView to determine page loading. When the browser UI changes, for example, progress updates and JavaScript alarms are sent to the WebChromeClient class. You can also intercept the URL to be loaded here (using the shouldoverrideurlloading () method ).

// WebView during webpage loading. setWebChromeClient (new WebChromeClient () {@ Override public void onProgressChanged (WebView view, int newProgress) {Toast. makeText (MainActivity. this, "newProgress =" + newProgress, Toast. LENGTH_SHORT ). show (); if (newProgress = 100) {// webpage load successful // Toast. makeText (MainActivity. this, "webpage loaded successfully", Toast. LENGTH_SHORT ). show ();} else {// Toast. makeText (MainActivity. this, "webpage loading failed", Toast. LENGTH_SHORT ). show ();}}});

However, when newProgress is equal to 10, the web page is displayed. This method is used to determine the loading status. I personally feel that it is not very reliable.

6. Page Cache

There are two cache types for WebView:

First, the browser's webpage data cache.

The browser Cache mechanism controls the File Cache through the Cache-Control (or Expires) and Last-Modified (or Etag) fields in the HTTP Header.

When receiving the response, the browser determines whether the file needs to be cached Based on the Cache-Control (or Expires) browser, or whether the requested field needs to be sent when the file needs to be loaded.

When a request is initiated, the Last-Modified (or Etag) server determines whether the file needs to be updated.

Set the Cache Mode of WebView to make the Protocol effective or invalid.

Cache Mode of WebView:

LOAD_CACHE_ONLY: only local cache data is read without using the network.

LOAD_DEFAULT: determines whether to retrieve data from the Network Based on cache-control.

LOAD_CACHE_NORMAL: API level 17 has been deprecated. The function starting from API level 11 is the same as LOAD_DEFAULT mode.

LOAD_NO_CACHE: no cache is used. Only data is obtained from the network.

LOAD_CACHE_ELSE_NETWORK: cache data is used as long as it exists locally, whether it expires or not, or no-cache. It is obtained from the network only when there is no cache locally.

WebView Cache Usage:

// Set the cache mode of webView to: determines whether to retrieve data from the Network Based on cache-control. webView. getSettings (). setCacheMode (WebSettings. LOAD_NO_CACHE );

Type 2: H5 Cache

To write the Web Page code, specify the manifest attribute to enable the page to use the App Cache.

AppCacheWorking principle:When an html page with the manifest file configured is loaded, the file specified by the cache manifest file will be cached under the App Cache directory of the browser. When this page is loaded next time, a file that has been cached by manifest is first initiated to load xxx. appcache file request to the server, if xxx. if the appcache file is not modified, the server returns304 Not ModifiedTo the browser, if the xxx. appcache file has been modified, the server returns200 OKAnd return the content of the new xxx. appcache file to the browser. After receiving the file, the browser loads the specified content in the new xxx. appcache file for caching.

WebView supports AppCache:

// Supports AppCache WebSettings webSettings = webView. getSettings (); webSettings. setAppCacheEnabled (true); String cachePath = getApplicationContext (). getCacheDir (). getPath (); webSettings. setAppCachePath (cachePath );

Differences between the two methods:

Similarities

Both the cache provided by WebView and AppCache can be used for file-level caching, which is basically better suited for non-overwriting file updates such as js and css.

Differences

The cache provided by WebView is implemented at the protocol layer (Standard Implementation of the browser kernel, which cannot be changed by developers), while AppCache is implemented at the application layer.

The cache directories of WebView may be different on different systems. For AppCache, although the storage paths of AppCache have methods, they are all stored in a fixed private directory.

The cache provided by WebView can be used without sending HTTP requests when the cache takes effect. AppCache must send a manifest file request.

The cache of WebView can be changed by setting CacheMode. The cache policy of AppCache is controlled by the manifest file, that is, it is controlled by the web page developer.

Most of the time, these two types of cache work together. When the manifest file does not control the loading of some resources, these resources will go to the built-in cache mechanism of WebView, combined with the CacheMode of WebView.

 

Full Code address: https://github.com/ZhangMiao147/WebViewCacheDemo

 

Reference: http://cs.szpt.edu.cn/android/reference/android/webkit/WebView.html

Http://unclechen.github.io/2017/05/13/WebView%E7%BC%93%E5%AD%98%E5%8E%9F%E7%90%86%E5%88%86%E6%9E%90%E5%92%8C%E5%BA%94%E7%94%A8/