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的内存占用过大等问题，都要给出一个解决方案。

这里就大致总结这么多了。希望有你的好的做法介绍一下 也可以吐槽 如果关于我的，会轻微回击。

有好的做法请一定留言 请不吝赐教。您的热心的一句话，就可以帮到我很多。