Android開發HTML5應用-總結

在做這個總結之前呢看過一些優秀文章和文檔，在此時間過於久遠原因，引用了原作者大段的摘抄而沒有寫明出處

原因別無其他，享受這么好社區文獻，飲水思源一把。呵呵。

在Android上做HTML5應用用到了Webkit這個瀏覽器內核，這里具體不討論Webkit for Android。

HTML5如何在安卓上開發HTML5應用

Android開發HTML5應用實際項目面臨的問題1：

Android的HTML5應用程序概述 如何適配多分辨率的Android設備？

如何在Android中構建HTML5應用程序？

如何在Android中調試HTML5應用程序？

如何在Android中使用HTML5的本地儲存？

如何在Android中使用HTML5的本地數據庫？

如何在Android中使用HTML5的地理定位？

如何在Android中構建HTML5離線應用？

如何使用Canvas進行繪圖？

上述問題這里提供一個ppt和參考代碼

package com.example.androidwebview;

import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;

import android.view.KeyEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;

import android.webkit.GeolocationPermissions;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebStorage;
import android.webkit.WebView;
import android.webkit.WebSettings.RenderPriority;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {

    private WebView mWebView;

    private WebViewClient mWebViewClient = new WebViewClient() {
        // 處理頁面導航
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            mWebView.loadUrl(url);
            // 記得消耗掉這個事件。給不知道的朋友再解釋一下，
            // Android中返回True的意思就是到此為止吧,事件就會不會冒泡傳遞了，我們稱之為消耗掉
            return true;
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
        }
    };

    // 瀏覽網頁歷史記錄
    // goBack()和goForward()
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
            mWebView.goBack();
            return true;
        }

        return super.onKeyDown(keyCode, event);
    }

    private WebChromeClient mChromeClient = new WebChromeClient() {

        private View myView = null;
        private CustomViewCallback myCallback = null;

        // 配置權限 （在WebChromeClinet中實現）
        @Override
        public void onGeolocationPermissionsShowPrompt(String origin,
                GeolocationPermissions.Callback callback) {
            callback.invoke(origin, true, false);
            super.onGeolocationPermissionsShowPrompt(origin, callback);
        }

        // 擴充數據庫的容量（在WebChromeClinet中實現）
        @Override
        public void onExceededDatabaseQuota(String url,
                String databaseIdentifier, long currentQuota,
                long estimatedSize, long totalUsedQuota,
                WebStorage.QuotaUpdater quotaUpdater) {

            quotaUpdater.updateQuota(estimatedSize * 2);
        }

        // 擴充緩存的容量
        @Override
        public void onReachedMaxAppCacheSize(long spaceNeeded,
                long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {

            quotaUpdater.updateQuota(spaceNeeded * 2);
        }

        // Android 使WebView支持HTML5 Video（全屏）播放的方法
        @Override
        public void onShowCustomView(View view, CustomViewCallback callback) {
            if (myCallback != null) {
                myCallback.onCustomViewHidden();
                myCallback = null;
                return;
            }

            ViewGroup parent = (ViewGroup) mWebView.getParent();
            parent.removeView(mWebView);
            parent.addView(view);
            myView = view;
            myCallback = callback;
            mChromeClient = this;
        }

        @Override
        public void onHideCustomView() {
            if (myView != null) {
                if (myCallback != null) {
                    myCallback.onCustomViewHidden();
                    myCallback = null;
                }

                ViewGroup parent = (ViewGroup) myView.getParent();
                parent.removeView(myView);
                parent.addView(mWebView);
                myView = null;
            }
        }
    };

    @SuppressLint("SetJavaScriptEnabled")
    @SuppressWarnings("deprecation")
    private void initSettings() {

        requestWindowFeature(Window.FEATURE_NO_TITLE); //設置標題欄樣式
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); //全屏
        
        setContentView(R.layout.activity_main);
        mWebView = (WebView) findViewById(R.id.webview);

        WebSettings webSettings = mWebView.getSettings();
        // 開啟Javascript腳本
        webSettings.setJavaScriptEnabled(true);

        // 啟用localStorage 和 essionStorage
        webSettings.setDomStorageEnabled(true);

        // 開啟應用程序緩存
        webSettings.setAppCacheEnabled(true);
        String appCacheDir = this.getApplicationContext()
                .getDir("cache", Context.MODE_PRIVATE).getPath();
        webSettings.setAppCachePath(appCacheDir);
        webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
        webSettings.setAppCacheMaxSize(1024 * 1024 * 10);// 設置緩沖大小，我設的是10M
        webSettings.setAllowFileAccess(true);

        // 啟用Webdatabase數據庫
        webSettings.setDatabaseEnabled(true);
        String databaseDir = this.getApplicationContext()
                .getDir("database", Context.MODE_PRIVATE).getPath();
        webSettings.setDatabasePath(databaseDir);// 設置數據庫路徑

        // 啟用地理定位
        webSettings.setGeolocationEnabled(true);
        // 設置定位的數據庫路徑
        webSettings.setGeolocationDatabasePath(databaseDir);

        // 開啟插件（對flash的支持）
        webSettings.setPluginsEnabled(true);
        webSettings.setRenderPriority(RenderPriority.HIGH);
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

        mWebView.setWebChromeClient(mChromeClient);
        mWebView.setWebViewClient(mWebViewClient);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        this.initSettings();

        mWebView.loadUrl("http://192.168.1.14/Heaven");
    }
}

上述代碼僅作參考，因為有些應用不用開啟地理定位什么的，就可不用開啟（這不是廢話嗎？呵呵）

Android開發HTML5應用實際項目面臨的問題2：

1.支持視頻流的播放，如果要求更具體點就是通過IPC直接或間接的在平板上或手機上呈現監控攝像，包括斷線重連、支持分屏 、固定屏幕橫豎屏、硬件加速和大小屏幕的切換（手機屏太小可以再智能電視上或大一點屏幕的PC機上顯示，手機當遙控器用）。

2.目前Android上不支持HTML5部分特性 WebSockets、WebWorkers。

3.Android上js執行效率慢；比iphone、ipad慢很多，需要長時間等待。 用戶體驗度無線趨近於0，有木有。

4.Webview不支持多點觸摸

 

支持視頻流的播放

大致主流做法是：

1.有一台高吞吐量的流媒體服務器可以將視頻流或視頻文件轉碼以適應各種客戶端播放視頻流

2.就android而言需要做到 斷線重連、支持分屏、固定屏幕橫豎屏、硬件加速、大小屏幕的切換等。

 

流媒體服務器現在主流是linux做服務器，C++編寫服務端

android平板針對特殊的功能也會用到JNI調用郵件、截屏、錄像等 Webkit是提供了js代碼與android的java代碼互相調用的接口 所以這些可以通過js調用java可以通過JNI調用C++寫特殊的功能代碼。

 

這里就請大家參考其他文章。如果有機會會補充這塊內容。

 

Android上不支持HTML5部分特性 WebSockets、WebWorkers

1.HTML5應用程序開發的硬傷呀！WebWorkers基本沒轍，只能改成單線程的了 >|<

2.WebSockets 不支持 這個硬傷 找到一個很好的通訊框架socket.io可以彌補這個缺陷。

 這個有socket.io(客戶端js) +  socketio-netty（socket.io服務器端JAVA實現）

當然原本socket.io 是Node.js中的一套框架輕量級支持通訊多種協議 使用方便，不得不推薦一下。

這里就請大家參考其他文章。如果有機會會補充這塊內容。

 

 

Android上js執行效率慢

硬傷！精簡代碼，寫一些輕量級的應用，期待android越做越好 也可以寫一些重型火炮型的HTML5應用

像這樣的

加載渲染超過一分鍾 

 

Webview不支持多點觸摸

硬傷！ hammer.js可以模擬多點觸摸 但是支持不是太好，不過能用。

 

 

當然在Android開發HTML5應用實際項目面臨的問題還有很多 比如一個很簡單的問題用戶縮放頁面禁用 Canvas重畫頻率過高 圖形型渲染不出來，SVG的內存占用過大等問題，都要給出一個解決方案。

這里就大致總結這么多了。希望有你的好的做法介紹一下 也可以吐槽 如果關於我的，會輕微回擊。

有好的做法請一定留言 請不吝賜教。您的熱心的一句話，就可以幫到我很多。