安卓 Web App 打包实践

文章目录

1. 1. 前端部分
2. 2. 后端部分

基于 WebView 的方式，可以在 Android 原生应用中显示网页，并可以利用 JavaScript 与用户交互，利用 XHR 和服务器端通信。WebView 所支持显示的网页可以不仅仅是一个远程的 URL，更可以是打包入 APK 文件的本地 HTML 文件。下面是一个打包 Web App 到 Android 上的基础示例，其实就是为一个 Web 应用加了一层「壳」而已。

Web 应用可以简单地分为前端和后端，这里先将前端部分的 HTML / JS / CSS 文件打包进一个原生 App 里。

前端部分

在 Android Studio 中新建一个项目，选择 Blank Activity 作为项目类型。项目初始化完成后，直接将 MainActivity.java 的代码替换如下即可。注意更改首行的 Package Name 和 mWebView.loadUrl() 方法传入的 URL 地址。打包所需要的本地网页文件可以这样添加：在左侧导航栏上右击 app 目录，依次选择 New -> Folder -> Assests Folder 并确认，添加应用的 Assests 目录后将网页文件复制进去即可。该目录中的 index.html 对应 file:///android_asset/index.html 这一 URL 地址。

package us.ewind.ustctennis;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Window;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends Activity {
    private WebView mWebView;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().requestFeature(Window.FEATURE_NO_TITLE);
        mWebView = new WebView(this);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.getSettings().setAllowFileAccess(true);
        mWebView.getSettings().setAllowContentAccess(true);
        mWebView.getSettings().setAllowFileAccessFromFileURLs(true);
        mWebView.getSettings().setAllowUniversalAccessFromFileURLs(true);
        mWebView.loadUrl("file:///android_asset/index.html");
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        this.setContentView(mWebView);
    }
    @Override
    public boolean onKeyDown(final int keyCode, final KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
}

Web App 的其它部分大体上不需要改动，只需将向后端发送查询的 GET 和 POST 等请求部分的 URL 地址从相对链接改写为绝对链接即可。对 Angular 一类的框架，这些包装好的数据接口可以通过直接修改 Service 一类的服务来变更，并没有太大的问题。如果需要较为频繁地更新迭代新版本，不妨将主要的业务逻辑脚本放置在服务端，仅将 JS 框架脚本打包在本地 APK 文件中。

完成 Java 代码和 JS 代码的变动后，直接进行 Build 和 Run 即可。但这时数据服务多半还无法正常使用，需要对后端服务器进行一些小改动。

后端部分

由于打包后的 Web App 进行 AJAX 请求时，所在的域已经不同于服务端，因此即便修改了请求地址，也会被浏览器的安全策略所阻止。传统的解决方式是通过嵌入服务端的 <script> 标签，通过嵌入的脚本来获取数据。这种被称为 JSONP 的做法虽然可行，但需要修改客户端的 JS 代码。实际上，根据 CORS 跨域资源共享协议，可以通过简单地在服务端响应的 HTTP 报头添加 "Access-Control-Allow-Origin: * 字段的方式，解决跨域请求问题。

打包 Web App 对 Web 前后端原有代码的修改都不大，但可以大大提速 Web App 的加载，并节约网络流量。除了直接修改 MainActivity 以外，还可以视需求将 App 的其它 Activity 替换为 WebView，相当灵活。