1, What is WebView? What can WebView do?

2, Play WebView

Commonly used API

Basic use

1. Add network permission

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

2. Instantiate WebView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    
    <com.seven.webview.SevenWebView
        android:layout_weight="9"
        android:id="@+id/seven_web"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <Button
        android:text="call js Method"
        android:layout_weight="1"
        android:id="@+id/call_js"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

Here, the WebView is encapsulated separately. Cooperate with WebSetting to set some parameters for WebView, such as supporting js, etc

package com.seven.webview;

import android.content.Context;
import android.util.AttributeSet;
import android.webkit.WebSettings;
import android.webkit.WebView;

/**
 * Time:2020/3/13
 * <p>
 * Author:seven
 * <p>
 * Description:
 */
public class SevenWebView extends WebView {
    public SevenWebView(Context context) {
        super(context);
        init(context);
    }



    public SevenWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    /**
     *  Initialization settings, used with WebSettings
     * @param context
     */
    private void init(Context context) {

        WebSettings webSettings = getSettings();
        if (webSettings == null) return;
        // Support the use of Js
        webSettings.setJavaScriptEnabled(true);
        // Enable DOM cache. LocalStorage is not supported by default
        webSettings.setDomStorageEnabled(true);
        // Enable database caching
        webSettings.setDatabaseEnabled(true);
        // Set the caching mode of WebView
        webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
        // Support zoom
        webSettings.setSupportZoom(true);
        // Set UserAgent properties
        webSettings.setUserAgentString("");
        // Allow to load local html file / false
        webSettings.setAllowFileAccess(true);
        // Javascript loaded through file url is allowed to read other local files. Before Android 4.1, it is true by default, and after Android 4.1, it is false by default, that is, it is forbidden
        webSettings.setAllowFileAccessFromFileURLs(false);
        // Javascript loaded through file url can access other sources, including other files, http, https and other sources,
        // Before Android 4.1, it is true by default, and after Android 4.1, it is false by default, that is, it is forbidden
        // If this setting is allowed, setAllowFileAccessFromFileURLs does not work
        webSettings.setAllowUniversalAccessFromFileURLs(false);
        //Setting background
        setBackgroundColor(getResources().getColor(android.R.color.transparent));
    }


}

3. Set up WebClient

package com.seven.webview;

import android.graphics.Bitmap;
import android.net.http.SslError;
import android.util.Log;
import android.webkit.SslErrorHandler;
import android.webkit.WebResourceError;
import android.webkit.WebResourceRequest;
import android.webkit.WebResourceResponse;
import android.webkit.WebView;
import android.webkit.WebViewClient;

/**
 * Time:2020/3/13
 * <p>
 * Author:seven
 * <p>
 * Description:
 */
public class SevenWebClient extends WebViewClient {
    private String TAG=getClass().getSimpleName();

    /**
     * Callback when the page Scale value of WebView changes
     */
    @Override
    public void onScaleChanged(WebView view, float oldScale, float newScale) {
        super.onScaleChanged(view, oldScale, newScale);
        Log.d(TAG, "onScaleChanged:oldScale="+oldScale+",newScale="+newScale);
    }

    /**
     *  By default, the system will open the web page through the mobile browser,
     *  In order to display web pages directly through WebView, you must set
     *  Whether to load the page in WebView
     *
     * @param view
     * @param url
     * @return
     */
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        Log.d(TAG, "shouldOverrideUrlLoading: "+url);
        view.loadUrl(url);
        return true;
    }

    /**
     * WebView Callback at the beginning of page loading, one Frame load corresponding to one callback
     *
     * @param view
     * @param url
     * @param favicon
     */
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        Log.d(TAG, "onPageStarted: "+url);
    }

    /**
     * WebView Callback when the page is loaded, one Frame load corresponds to one callback
     *
     * @param view
     * @param url
     */
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        Log.d(TAG, "onPageFinished: "+url);
    }

    /**
     * WebView When a page resource is loaded, it will be recalled. Every network load generated by a resource will be loaded unless there is a cache corresponding to the current url locally.
     *
     * @param view WebView
     * @param url  url
     */
    @Override
    public void onLoadResource(WebView view, String url) {
        super.onLoadResource(view, url);
        Log.d(TAG, "onLoadResource: "+url);
    }

    /**
     * WebView We can intercept a certain request to return our own loaded data. This method will play a great role in later caching.
     *
     * @param view    WebView
     * @param request Request request is currently generated
     * @return WebResourceResponse
     */
    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
        return super.shouldInterceptRequest(view, request);
    }

    /**
     * WebView Error accessing url
     *
     * @param view
     * @param request
     * @param error
     */
    @Override
    public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
        super.onReceivedError(view, request, error);
        Log.d(TAG, "onReceivedError: "+error);
    }

    /**
     * WebView ssl Error accessing certificate, handler.cancel() cancels loading, handler. Processed() continues to load even if there is an error
     *
     * @param view
     * @param handler
     * @param error
     */
    @Override
    public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
        super.onReceivedSslError(view, handler, error);
        Log.d(TAG, "onReceivedSslError: "+error);
    }
}

4. Set up WebChromeClient

package com.seven.webview;

import android.content.Context;
import android.graphics.Bitmap;
import android.util.Log;
import android.webkit.ConsoleMessage;
import android.webkit.JsPromptResult;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;

/**
 * Time:2020/3/13
 * <p>
 * Author:seven
 * <p>
 * Description:
 */
public class SevenWebChromeClient extends WebChromeClient {

    private String TAG=getClass().getSimpleName();
    private Context mContenxt;

    public SevenWebChromeClient(Context context) {

        this.mContenxt = context;
    }

    /**
     *  Js Log printing for
     * @param consoleMessage
     * @return
     */
    @Override
    public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
        Log.d(TAG, "onConsoleMessage: "+consoleMessage.message());
        return super.onConsoleMessage(consoleMessage);
    }

    /**
     * Current WebView load page progress
     *
     * @param view
     * @param newProgress
     */
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        super.onProgressChanged(view, newProgress);
        Log.d(TAG, "onProgressChanged: "+newProgress);

    }

    /**
     * Js Call the alert() function to generate the dialog box.
     *
     * @param view
     * @param url
     * @param message
     * @param result
     * @return
     */
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        Log.d(TAG, "onJsAlert: "+message);
        return super.onJsAlert(view, url, message, result);
    }

    /**
     * Handling the Confirm dialog in Js
     *
     * @param view
     * @param url
     * @param message
     * @param result
     * @return
     */
    @Override
    public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
        Log.d(TAG, "onJsConfirm: "+message);
        return super.onJsConfirm(view, url, message, result);
    }

    /**
     * Handling Prompt dialog in JS
     *
     * @param view
     * @param url
     * @param message
     * @param defaultValue
     * @param result
     * @return
     */
    @Override
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {

        Log.d(TAG, "onJsPrompt: "+message);
        return super.onJsPrompt(view, url, message, defaultValue, result);
    }

    /**
     * Receive icon of web page
     *
     * @param view
     * @param icon
     */
    @Override
    public void onReceivedIcon(WebView view, Bitmap icon) {
        super.onReceivedIcon(view, icon);
    }

    /**
     * Receive Title of web page
     *
     * @param view
     * @param title
     */
    @Override
    public void onReceivedTitle(WebView view, String title) {
        super.onReceivedTitle(view, title);
        Log.d(TAG, "onReceivedTitle: "+title);
    }

}

5. How to interact with JS

package com.seven.webview;

import android.content.Context;
import android.webkit.JavascriptInterface;
import android.widget.Toast;

/**
 * Time:2020/3/13
 * <p>
 * Author:seven
 * <p>
 * Description:
 */
public class NativeJsInterface {

    private Context mContext;

    public NativeJsInterface(Context context) {
        mContext = context;
    }

    @JavascriptInterface
    public void helloAndroid() {
        Toast.makeText(mContext, "Hello Android!", Toast.LENGTH_SHORT).show();
    }


    @JavascriptInterface
    public String getAndroid() {
        Toast.makeText(mContext, "getAndroid", Toast.LENGTH_SHORT).show();
        return "Android data";
    }

}

package com.seven.webview;

import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;

public class MainActivity extends AppCompatActivity {

    private String TAG=getClass().getSimpleName();

    @BindView(R.id.seven_web)
    WebView webView;

    private WebViewClient webViewClient;

    private WebChromeClient webChromeClient;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        loadUrl();
        supportJs();

    }
    /**
     * Loading webpage
     */
    private void loadUrl() {
        webViewClient = new SevenWebClient();
        webChromeClient = new SevenWebChromeClient(this);
        webView.setWebViewClient(webViewClient);
        webView.setWebChromeClient(webChromeClient);
        webView.loadUrl("file:///android_asset/html/ts.html");
    }

    /**
     * Extend JS object, the page can directly use NativeObject object to call Android provided methods
     */
    private void supportJs() {
        NativeJsInterface nativeJsInterface = new NativeJsInterface(this);
        webView.addJavascriptInterface(nativeJsInterface, "NativeObject");

    }

    /**
     * Method calling JS
     */

    @OnClick(R.id.call_js)
    public void onViewClicked() {
        String jsMethod="javascript:androidCallJs()";
        if(Build.VERSION.SDK_INT< Build.VERSION_CODES.KITKAT){
            webView.loadUrl(jsMethod);
        }else {
              webView.evaluateJavascript(jsMethod, new ValueCallback<String>() {
                  @Override
                  public void onReceiveValue(String value) {
                      Log.d(TAG, "onReceiveValue: "+value);
                  }
              });
        }
    }
}

6. Write a simple web page

</html>


<html>
<head>
    <meta charset="utf-8">
    <title>test page</title>
    <script>
        function callAndroid(){
            NativeObject.helloAndroid();
        }

        function getAndroid(){
            NativeObject.getAndroid();
        }

       function androidCallJs(){
        alert('js Method is executed!!!')
       }
       function jumpApp(){

       }
    </script>

</head>
<body background="images/ts.png">



<center>
    <button type="button" id="button" onclick="callAndroid()">helloAndroid</button>
</center>
<center>
    <button type="button" id="button2" onclick="getAndroid()">getAndroid</button>
</center>

</center> <a href="scheme://host/path?query">Reopen yourself</a></center>

</body>
</html>

Through the above six steps, you can complete the basic loading web page, and support the function of java and js calling each other.

Web pages jump to other applications through Scheme

1. What is scheme?

2. If the web page jumps to app?

    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        Log.d(TAG, "shouldOverrideUrlLoading: "+url);

        if (url.startsWith("scheme")) {
            Log.d(TAG, "shouldOverrideUrlLoading: Handle customization scheme-->" + url);
            try {
                // The following fixed writing
                final Intent intent = new Intent(Intent.ACTION_VIEW,
                        Uri.parse(url));
                intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK
                        | Intent.FLAG_ACTIVITY_SINGLE_TOP);
                mContext.startActivity(intent);
            } catch (Exception e) {
                // Prevent non installation
                e.printStackTrace();
                Toast.makeText(mContext,"Third party you open App Not installed!",Toast.LENGTH_SHORT).show();
            }
            return true;
        }
        view.loadUrl(url);
        return true;
    }

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.seven.webview">

    <uses-permission android:name="android.permission.INTERNET"/>
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:usesCleartextTraffic="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>

            <intent-filter>
                <action android:name="android.intent.action.VIEW"/>
                <category android:name="android.intent.category.DEFAULT"/>
                <category android:name="android.intent.category.BROWSABLE"/>
                <data android:scheme="scheme"/>
            </intent-filter>
        </activity>

    </application>

</manifest>

3. Recommended practices

3, Some small pits

 // For Android < 3.0
    public void openFileChooser(ValueCallback<Uri> valueCallback) {
        if(null!=valueCall){
            valueCall.onValueSelect(valueCallback);
        }
        openImageChooserActivity();
    }

    // For Android  >= 3.0
    public void openFileChooser(ValueCallback valueCallback, String acceptType) {
        if(null!=valueCall){
            valueCall.onValueSelect(valueCallback);
        }
        openImageChooserActivity();
    }

    //For Android  >= 4.1
    public void openFileChooser(ValueCallback<Uri> valueCallback, String acceptType,  String capture) {
//        uploadMessage = valueCallback;
        if(null!=valueCall){
            valueCall.onValueSelect(valueCallback);
        }
        openImageChooserActivity();
    }

    // For Android >= 5.0
    @Override
    public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {
        if(null!=valueCall){
            valueCall.onValuesSelectAboveL(filePathCallback);
        }

        openImageChooserActivity();
        return true;
    }
    private void openImageChooserActivity() {
        Intent i = new Intent(Intent.ACTION_GET_CONTENT);
        i.addCategory(Intent.CATEGORY_OPENABLE);
        i.setType("image/*");
        mContenxt.startActivityForResult(Intent.createChooser(i, "Image Chooser"),     FILE_CHOOSER_RESULT_CODE);
    }

4, Divergent learning

       super.removeJavascriptInterface("searchBoxJavaBridge_");
       super.removeJavascriptInterface("accessibility");
       super.removeJavascriptInterface("accessibilityTraversal");

Five. Conclusion