[翻译]基于WebView开发Web APP

作者：zhanhailiang 日期：2015-01-30

原文链接：Building Web Apps in WebView

基于Android视图类WebView，可以直接在Activity Layout中展示Web页面，这样可以增强更新的灵活性。简单理解，WebView展示HTML页面，但是其本身并不支持浏览器的常用功能，诸如浏览进度控制，地址栏等。

使用场景&实现

场景1

对于应用程序中需要频繁更新的模块，可以使用WebView来实现，这样更新内容即可实时更新，诸如用户协议页面，新手引导等。

场景2

对于需要实时拉取服务器信息来更新视图的应用程序，可以使用WebView来实现。

实现

在Android应用中，创建一个包含WebView的Activity，直接加载Web url即可展示相应页面。如需使用Javascript，只需要开启Javascript即可。

应用程序添加WebView

在Activity Layout中添加WebView元素，如下：

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
/>

在WebView中使用loadUrl加载页面，如下：

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://www.example.com");

为了使用WebView功能，你需要在manifest文件中申请网络访问权限，如下：

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

WebView使用Javascript

1. 在WebView中开启Javascript；
2. 创建Java与Javascript通信的接口；

开启Javascript

WebView默认未开启Javascript，需要通过WebView.getSettings().setJavaScriptEnabled(true)来开启Javascript，如下：

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

WebSettings提供了修改一系列设置的方法，如自定义User-Agent头等，有兴趣请查看WebSettings API

如何在Javascript中调用Android应用程序的接口

应用程序可以提供接口给Javascript调用，如Javascript调用Android原生的Toast接口展示提示，而不是简单的使用alert()接口。其原理是在WebView中定义了接口，并调用addJavascriptInterface添加该接口，此时WebView中的代码就可以直接调用该接口，如下：

定义如下类：

public class WebAppInterface {
    Context mContext;

    /** Instantiate the interface and set the context */
    WebAppInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

注：若你使用targetSdkVersion>=17，则需要添加注释@JavascriptInterface到你想要在Javascript中使用的方法中，否则将无法在Javascript中调用该方法。如上定义将暴露showToast方法给Javascript调用。

WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");

按以上初始化后，即可在Javascript直接调用Android.showAndroidToast('Hello Android!')：

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>

注：以上Anroid对象运行在独立的线程中，并不在初始化的线程中。

注：通过addJavascriptInterface()即可实现Javascript调用原生的Android API来控制原生应用程序。权利越大，责任就越大。addJavascriptInterface特性即是相当有用的特性，也会造成巨大的安全问题。当WebView中的HTML文本是不可信时（如劫持代码恶意插入非法的Javascript代码），此时攻击者就可以调用你的客户端代码来实施攻击行为。

WebView处理页面浏览

当用户在WebView中点击超链接时，应用程序的默认行为是调用默认处理url的程序来处理。通常是调用浏览器打开相应链接。但是你可以在WebView中覆盖该行为，使用自定义行为（如在当前WebView中打开该链接）。这样就可以实现WebView浏览历史功能。

只需要设置WebViewCleint()对象即可实现在当前WebView中打开链接功能：

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new WebViewClient());

也可以通过继承WebViewCleint类来自定义更丰富的自定义点击行为：

private class MyWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if (Uri.parse(url).getHost().equals("www.example.com")) {
            // This is my web site, so do not override; let my WebView load the page
            return false;
        }
        // Otherwise, the link is not for a page on my site, so launch another Activity that handles URLs
        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
        startActivity(intent);
        return true;
    }
}

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new MyWebViewClient());

WebView实现浏览历史功能

当在WebView中覆盖默认的URL加载行为，此时WebView将自动记录浏览历史，这样就可以基于WebView的goBack()和goForward()来实现浏览功史的前进和后退功能，如下:

如下自定义设备的返回按钮为若当前WebView可回退，即回退当前WebView；否则使用系统默认的返回功能：

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    // Check if the key event was the Back button and if there's history
    if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {
        myWebView.goBack();
        return true;
    }
    // If it wasn't the Back key or there's no web page history, bubble up to the default
    // system behavior (probably exit the activity)
    return super.onKeyDown(keyCode, event);
}

更多阅读

1. Building Web Apps in WebView(需翻墙)
2. Android WebView中的JavaScript代码使用