Android and HTML5 开发手机应用

一、离线应用缓存 HTML 5 Offline Application Cache

  • 在服务器上添加MIME TYPE支:text/cache-manifest

    如果在Apache下添加:

    1 AddType text/cache-manifest manifest

    如果为Nginx,在添加:

    1 text/cache-manifest                   manifest;

    或者通过动态程序生成:

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

    新建清单文件 manifest

    01 CACHE MANIFEST
    02 # This is a comment.
    03 # Cache manifest version 0.0.1
    04 # If you change the version number in this comment,
    05 # the cache manifest is no longer byte-for-byte
    06 # identical.
    07  
    08 /app/static/default/js/models/prototype.js
    09 /app/static/default/js/controllers/init.js
    10  
    11 NETWORK:
    12 # All URLs that start with the following lines
    13 # are whitelisted.
    14  
    15 http://a.com/
    16  
    17 CACHE:
    18 # Additional items to cache.
    19 /app/static/default/images/main/bg.png
    20  
    21 FALLBACK:
    22 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>

二、Key-Value Storage

三、Using the JavaScript Database

四、Android下使用WebView来做基于HTML5的App

见如下AndroidManifest.xml

01 < ?xml version="1.0" encoding="utf-8"?>
02 <manifest xmlns:android="http://schemas.android.com/apk/res/android"package="com.xinze.joke" android:versioncode="1"android:versionname="1.0">
03     <application android:icon="@drawable/icon"android:label="@string/app_name">
04         <activity android:name=".Joke"android:label="@string/app_name"android:configchanges="orientation|keyboardHidden|navigation"android:theme="@android:style/Theme.NoTitleBar">
05             <intent -filter="">
06                 <action android:name="android.intent.action.MAIN">
07                 <categoryandroid:name="android.intent.category.LAUNCHER">
08             </category></action></intent>
09         </activity>
10     </application>
11     <uses -permission="" android:name="android.permission.INTERNET">
12 </uses></manifest>

注意:

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

, 允许网络应用,必须!!

Android主程序代码:

001 package com.xinze.joke;
002  
003 import android.app.Activity;
004 import android.app.AlertDialog;
005 import android.app.AlertDialog.Builder;
006  
007 import android.content.DialogInterface;
008  
009 import android.os.Bundle;
010 import android.view.KeyEvent;
011 import android.view.View;
012 import android.view.Window;
013 import android.view.WindowManager;
014 import android.webkit.JsPromptResult;
015 import android.webkit.JsResult;
016 import android.webkit.WebChromeClient;
017 import android.webkit.WebView;
018 import android.webkit.WebViewClient;
019  
020 import android.webkit.WebStorage ;
021  
022 public class Joke extends Activity {
023  
024     /** Called when the activity is first created. */
025     @Override
026     public void onCreate(Bundle savedInstanceState) {
027         super.onCreate(savedInstanceState);
028  
029         final WebView wv = new WebView(this);
030  
031         // 覆盖默认后退按钮的作用,替换成WebView里的查看历史页面
032         wv.setOnKeyListener(new View.OnKeyListener() {
033  
034             @Override
035             public boolean onKey(View v, int keyCode, KeyEvent event) {
036                 if (event.getAction() == KeyEvent.ACTION_DOWN) {
037                     if ((keyCode == KeyEvent.KEYCODE_BACK) && wv.canGoBack()) {
038                         wv.goBack();
039                         return true;
040                     }
041                 }
042                 return false;
043             }
044         });
045  
046         // 设置支持Javascript

你可能感兴趣的:(JavaScript,android,html5,String,dialog,手机)