WebView实战与设计

WebView实战与设计

1、简述

现在纯Native的应用越来越少，即使一个使用Native开发的应用，有些模块也需要用WebView加载h5页面，比如新年活动之类生命周期很短的模块，那么使用WebView+H5的模式开发将成为首选，一来可以节约成本，再者，h5页面可以频繁更改，非常适合做活动类的模块。当然hybrid应用中，WebView的使用更是频繁。

WebView是Android SDK中内置的一个控件，可以理解为内置的浏览器。

WebView：Android SDK中内置的一个控件，可以理解为浏览器。常用的API有：

加载一个页面：

/**
     * Loads the given URL.
     *
     * @param url the URL of the resource to load
     */
    public void loadUrl(String url) {
      //
    }

给Js注入对象，在注入对象中，可以写方法让Js调用Native的逻辑，实现Js与Native的交互：

/**
         * Injects the supplied Java object into this WebView. The object is
         * injected into the JavaScript context of the main frame, using the
         * supplied name. This allows the Java object's methods to be
         * accessed from JavaScript. 
         * @param object the Java object to inject into this WebView's JavaScript
         *               context. Null values are ignored.
         * @param name the name used to expose the object in JavaScript
         */
        public void addJavascriptInterface(Object object, String name) {
           //
        }

设置WebViewClient：

/**
     * Sets the WebViewClient that will receive various notifications and
     * requests. This will replace the current handler.
     *
     * @param client an implementation of WebViewClient
     */
    public void setWebViewClient(WebViewClient client) {
        checkThread();
        mProvider.setWebViewClient(client);
    }

设置WebChromeClient：

 /**
     * Sets the chrome handler. This is an implementation of WebChromeClient for
     * use in handling JavaScript dialogs, favicons, titles, and the progress.
     * This will replace the current handler.
     *
     * @param client an implementation of WebChromeClient
     */
    public void setWebChromeClient(WebChromeClient client) {
        checkThread();
        mProvider.setWebChromeClient(client);
    }

CookieManager：WebView的Cookie管理类，可以把Native的登录态传给WebView，让H5页面也是登录态：

/**
     * 设置Cookie
     */
    private void setCookie4WebView() {
        //获取Cookie
        List<Cookie> cookies = NetUtil.getInstance().getCookieStore().getCookies();
        if (cookies != null) {
            //The CookieSyncManager is used to synchronize the browser cookie store
            // between RAM and permanent storage. To get the best performance, browser cookies are
            //saved in RAM. A separate thread saves the cookies between, driven by a timer.
            CookieSyncManager.createInstance(this);
            //Manages the cookies used by an application's {@link WebView} instances.
            // Cookies are manipulated according to RFC2109.
            CookieManager cookieManager = CookieManager.getInstance();
            cookieManager.setAcceptCookie(true);
            for (int i = 0; i < cookies.size(); i++) {
                Cookie cookie = cookies.get(i);
                String cookieString = cookie.getName() + "=" + cookie.getValue();
                //Sets a cookie for the given URL. Any existing cookie with the same host,
                //path and name will be replaced with the new cookie. The cookie being set
                //will be ignored if it is expired.
                cookieManager.setCookie(NetUrlConstant.Url_Base + "/", cookieString);
            }
            //sync() forces sync manager to sync now
            CookieSyncManager.getInstance().sync();
        }
    }

WebChromeClient：主要辅助WebView处理JavaScript的对话框、网站图标、网站title、加载进度条等：

 public class WebChromeClient extends android.webkit.WebChromeClient {
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            //页面加载中进度条的变化
            if (newProgress == 100) {
                progressBar.setVisibility(View.GONE);
            } else {
                if (progressBar.getVisibility() == View.GONE)
                    progressBar.setVisibility(View.VISIBLE);
                progressBar.setProgress(newProgress);
            }
            super.onProgressChanged(view, newProgress);
        }

    

WebViewClient：主要帮助WebView处理各种通知、请求事件：

        setWebChromeClient(new WebChromeClient() {
            @Override
            public void onReachedMaxAppCacheSize(long requiredStorage, long quota, WebStorage.QuotaUpdater quotaUpdater) {
                quotaUpdater.updateQuota(requiredStorage * 2);
            }
        });

        setWebViewClient(new WebViewClient() {

            @Override
            public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
                handler.proceed();  // 接受所有网站的证书
            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                if (!url.contains("tel:")) {
                    if (url.contains(context.getPackageName())) {
                        view.loadUrl(url);
                    } else if (url.equals("local://redo")) {
                        if (!StringHelper.isEmpty(failUrl)) {
                            view.loadUrl(failUrl);
                        }
                    } else {
                        view.loadUrl("file:///android_asset/noWifi.html");
                    }
                }
                return true;
            }

            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                isLoad = false;
//                if (!url.contains("noWifi.html") && !url.contains("txt.pingan.com.cn")) {
//                    activity.showLoading(true);
//                }
                if (!url.contains("http")) {
                    activity.showLoading(true);
                }
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
//                if (url.contains("noWifi.html") || url.contains("fs-txt.pingan.com.cn")) {
//                    activity.showLoading(false);
//                }
                if (url.contains("http")) {
                    activity.showLoading(false);
                }
                isLoad = true;
            }

            @Override
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                //缓存错误页面
                failUrl = failingUrl;
                view.stopLoading();
                view.clearView();
                view.loadUrl("javascript:document.body.innerHTML=\"" + "" + "\"");
                view.loadUrl("file:///android_asset/noWifi.html");
                activity.showLoading(false);
                super.onReceivedError(view, errorCode, description, failingUrl);
            }
        });

WebViewSetting：管理WebView的设置状态。官方介绍：

Manages settings state for a WebView. When a WebView is first created, it
* obtains a set of default settings. These default settings will be returned
* from any getter call. A WebSettings object obtained from
* WebView.getSettings() is tied to the life of the WebView.

 webSettings = getSettings();
        webSettings.setJavaScriptEnabled(true);//允许调用JavaScript
        webSettings.setUseWideViewPort(true); //设置内容自适应屏幕大小
        webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);//提高渲染的优先级
        webSettings.setSupportZoom(false);//页面禁止缩放
        webSettings.setDomStorageEnabled(true);//允许使用本地缓存

        int sdk = Build.VERSION.SDK_INT;

        if (sdk > 10) {
            setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        }
        webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
        webSettings.setSaveFormData(true);
        webSettings.setAppCacheMaxSize(1024 * 5);

        //存储H5
        String appCacheDir = context.getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath() + APP_CACAHE_DIRNAME;
//        String appCacheDir = context.getFilesDir().getAbsolutePath() + APP_CACAHE_DIRNAME;
        webSettings.setAppCachePath(appCacheDir);
        webSettings.setAllowFileAccess(true);
        webSettings.setAppCacheEnabled(true);

//       //存储url
        webSettings.setDatabaseEnabled(true);
//        String appData = context.getApplicationContext().getDir("databases", Context.MODE_PRIVATE).getPath() + APP_DB_DIRNAME;
        webSettings.setDatabasePath(appCacheDir);

WebViewJsInjection：Js注入类，该该类中，可以写方法给H5页面调用：

/**
 * the Java object to inject into this WebView's JavaScript
 */
public class WebViewJS {

    @JavascriptInterface
    public void linkRecord(int recordid) {
       //
    }
   
    @JavascriptInterface
    public void linkThing(long thingid) {
      //
    }

    @JavascriptInterface
    public void linkUser(int userid) {
       //
    }

    public void linkLogin(){
      //
    }
}

2、整体的设计：

废话不多说，先上UML类图：

WebApp1Activity：普通的Activity界面，放一个WebView，加载h5；

ProgresswebView：自定义的WebView，带进度条

MyWebChromeClient：自定义的WebChromeClient，处理页面变化过程中进度条的变化，需要风行Progressbar，作为ProgresswebView内部类出现

MyWebViewClient：自定义的WebViewClient，处理加载页面的相关事件

INativeJsInjection：Native给Js的注入类接口，抽象，让ProgressView依赖抽象，不依赖具体实现

DetailNativeJsInjection1：Native给Js注入类的具体实现

附：Github地址

参考：WebViewClient与WebChromeClient的区别