Android and HTML5 開發手機應用(轉載）

時間 2019-11-20

標籤 android html5 html 開發手機應用轉載欄目 Android 简体版

原文原文鏈接

做爲一個WEB開發者，HTML5讓我興奮，由於它能夠將桌面應用程序功能帶入瀏覽器中。但在國內，看着處處橫行的IE8版本如下的瀏覽器，以爲到能大規模使用HTML5技術的那天，還遙遙無期。但面對iOS及Android等平臺的手機用戶愈來愈多，基於Webkit內核的移動瀏覽器必定能讓HTML5先大規模應用起來。這將對對移動 Web 應用程序開發具備重大影響。

做爲很是看好將來手機網絡的我，也在一直研究Android平臺的應用的開發，也許是由於本身更熟悉HTML及CSS、JS，並受到以前使用HTML和VC開發程序的影響，我也更願意使用HTML來作Android程序的UI….

09年，在開發《華夏風雲》遊戲的時候，使用了基於Google Gear插件來作了不少離線應用，惋惜Gear已經不在更新開發，被HTML5取代。下面介紹基於HTML 5 的Web 應用程序的本地存儲，再也不廢話，例子說明一切。
1、離線應用緩存 HTML 5 Offline Application Cache
•在服務器上添加MIME TYPE支:text/cache-manifest

若是在Apache下添加：
AddType text/cache-manifest manifest
若是爲Nginx，在添加：
text/cache-manifest manifest;
或者經過動態程序生成：

1

header('Content-type: text/cache-manifest; charset=UTF-8');
•建立 NAME.manifest:

新建清單文件 manifest
CACHE MANIFEST
# This is a comment.
# Cache manifest version 0.0.1
# If you change the version number in this comment,
# the cache manifest is no longer byte-for-byte
# identical.

/app/static/default/js/models/prototype.js
/app/static/default/js/controllers/init.js

NETWORK:
# All URLs that start with the following lines
# are whitelisted.

http://a.com/

CACHE:
# Additional items to cache.
/app/static/default/images/main/bg.png

FALLBACK:
demoimages/ images/
•給 <html> 標籤加 manifest 屬性：

創建manifest文件以後，須要在HTML文檔中聲明：
聲明清單文件 manifest
<!doctype html>
<html manifest="notebook.manifest">
<head>
<meta charset="UTF-8" />
<meta name = "viewport" content = "width = device-width, user-scalable = no">
<title>NoteBook</title>
</head>
<body>
</body>
</html>
2、Key-Value Storage

3、Using the JavaScript Database

4、Android下使用WebView來作基於HTML5的App

見以下AndroidManifest.xml
< ?xml version="1.0" encoding="utf-8"?>
<manifest android:versionName="1.0" android:versionCode="1" package="com.xinze.joke" xmlns:android="http://schemas.android.com/apk/res/android">
<application android:label="@string/app_name" android:icon="@drawable/icon">
<activity android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar" android:configChanges="orientation|keyboardHidden|navigation" android:name=".Joke">
<intent -filter="">
<action android:name="android.intent.action.MAIN">
<category android:name="android.intent.category.LAUNCHER">
</category></action></intent>
</activity>
</application>
<uses android:name="android.permission.INTERNET" -permission="">
</uses></manifest>

注意：
<uses android:name="android.permission.INTERNET" -permission=""></uses>
，容許網絡應用，必須！！

Android主程序代碼：
package com.xinze.joke;

import android.app.Activity;
import android.app.AlertDialog;
import android.app.AlertDialog.Builder;

import android.content.DialogInterface;

import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.webkit.JsPromptResult;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import android.webkit.WebStorage ;

public class Joke extends Activity {

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

final WebView wv = new WebView(this);

// 覆蓋默認後退按鈕的做用，替換成WebView裏的查看歷史頁面
wv.setOnKeyListener(new View.OnKeyListener() {

@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
if (event.getAction() == KeyEvent.ACTION_DOWN) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && wv.canGoBack()) {
wv.goBack();
return true;
}
}
return false;
}
});

// 設置支持Javascript
wv.getSettings().setJavaScriptEnabled(true);

wv.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
wv.getSettings().setDatabaseEnabled(true);
wv.getSettings().setDatabasePath("/data/data/com.xinze.joke/databases");

// 建立WebViewClient對象
WebViewClient wvc = new WebViewClient() {

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
wv.loadUrl(url);
// 記得消耗掉這個事件。給不知道的朋友再解釋一下，Android中返回True的意思就是到此爲止吧,事件就會不會冒泡傳遞了，咱們稱之爲消耗掉
return true;
}
};

// 設置WebViewClient對象
wv.setWebViewClient(wvc);

// 建立WebViewChromeClient
WebChromeClient wvcc = new WebChromeClient() {

// 處理Alert事件
@Override
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
// 構建一個Builder來顯示網頁中的alert對話框
Builder builder = new Builder(Joke.this);
builder.setTitle("笑死不償命");
builder.setMessage(message);
builder.setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
builder.setCancelable(false);
builder.create();
builder.show();
return true;
}

// 處理Confirm事件
@Override
public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
Builder builder = new Builder(Joke.this);
builder.setTitle("刪除確認");
builder.setMessage(message);
builder.setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() {

@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}

});
builder.setNeutralButton(android.R.string.cancel, new AlertDialog.OnClickListener() {

@Override
public void onClick(DialogInterface dialog, int which) {
result.cancel();
}

});
builder.setCancelable(false);
builder.create();
builder.show();
return true;
}

// 處理提示事件
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue,
JsPromptResult result) {
// 看看默認的效果
return super.onJsPrompt(view, url, message, defaultValue, result);
}

@Override
public void onExceededDatabaseQuota(String url, String
databaseIdentifier, long currentQuota, long estimatedSize, long
totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {
quotaUpdater.updateQuota(204801);
}

};

wv.loadUrl("http://192.168.1.14/index.html");

// 設置setWebChromeClient對象
wv.setWebChromeClient(wvcc);
setContentView(wv);
}
}
使用 JavaScript Database 的時候，須要特別注意：setDatabaseEnabled 以及 onExceededDatabaseQuota！html