使用HTML5开发手机离线应用

本来这篇文章想叫《挺起你的HTML5》或者《让HTML5飞》或者神马其他的，但是为了更好的体现主题，我就用这个直白点的题目吧使用HTML5开发手机离线应用 ~

随着各种智能手机(iPhone、Android)大行其道，App模式的应用开发变得热火朝天，反观Web领域则黯然失色。然而即将（或者说已经）到来的HTML5，又为Web注入了新鲜的鸡血，让我等Web码农再次激动不已——我们可以用HTML、CSS、JavaScript开发手机应用了！可以实现绝大部分Native App的功能，跨平台，自动更新，即需即取……亲，只需要有浏览器哟！而且没有恶心的IE6 使用HTML5开发手机离线应用 ~

做任何一个应用都离不开两种东西：文件和数据。下面我就以一个简单的小应用来介绍一下如何开发一个Web应用，让它能够在Offline的情况下取得文件和数据。

Cache Manifest

首先，请自行实现一个包含图片、JavaScript、CSS的普通HTML页面。

显而易见的，这个页面所包含的文件有HTML、JavaScript、CSS、图片。为了让这个页面能够离线访问，我们必须告诉浏览器，它要缓存那些文件，让我们下次访问的时候直接在本地取即可。

HTML5给我们提供了一种Cache Manifest的机制，让我们实现这样的功能。Cache Manifest是通过一个 .manifest为后缀的文件来配置需要缓存的或者一定要保持联网的文件，格式如下：

CACHE MANIFEST
# VERSION 1.0
 
# 直接缓存的文件
CACHE:
index.html
img.jpg
script.js
stylesheet.css
 
# 需要在时间在线的文件
NETWORK:
/wp-admin/
 
# 替代方案
FALLBACK:
/ajax/ ajax.html

同时，我们要给页面的html标签添加一个manifest属性：

<html manifest="到Manifest文件的路径.manifest">

还有一点要注意的，就是Manifest文件的MIME类型必须正确，对于Apache有两种设置方法（IIS没研究过），一种是在Apache的配置文件mime.types中加上：

text/cache-manifest manifest

一种是在网站的.htaccess文件中加上：

AddType text/cache-manifest manifest

最后，最好重启一下你的服务器~~~

使用了Cache Manifest机制后，浏览器就不会自动更新你所缓存的内容了，如果想更新客户端缓存的内容，修改.manifest文件的任意内容即可。修改版本号是一种推荐的做法，即上面的“#VERSION 1.0”（这是一个注释），甚至可以说是最佳实践。

如果想了解更多，请看这里。

Local Storage

localStorage是Web Storage存储规范中的一部分(虽然大家很喜欢把它归到HTML5的东西里面去)，目前多数浏览器都已经支持了（ie8+也支持喔~）。

这是一个易学易用的东西，用于保存key-value形式的键值对。说到键值对肯定很容易想到Cookie，不过Cookie在每次请求中都会被发送到服务器端，如果使用大数据集合的话会有性能问题，在传输中也会有安全问题。

下面就讲讲localStorage的使用吧。

首先，在召唤localstorage之前当然要检测一下是否可用：

//检测localStorage是否可用
//本段代码来自<Dive Into HTML5>
function supports_html5_storage() {
  try {
    //不懂为啥要写这么复杂
    return 'localStorage' in window && window['localStorage'] !== null;
  } catch (e) {
    return false;
  }
}

使用localstorage的方式很简单, 直接像访问对象一样访问它即可:

//设置数据 setItem
localStorage.setItem("myKey", "myValue");
 
//获取数据 getItem
var data= localStorage.getItem("myKey");
 
//还能用数组这样的格式来访问
localStorage["myKey2"] = "myValue2";
 
var data2 = localStorage["myKey2"];
 
//移除指定数据
localStorage.removeItem("myKey2");
 
//清空数据
localStorage.clear();

操作结果可以在“开发人员工具”中看到

使用HTML5开发手机离线应用

一些LocalStorage的注意事项：

localStorage要通过域名访问的方式才能起作用，直接打开本地文件是不行滴哟~
俺们保存的都是string，如果是int或者float的话，get回来之后记得转换一下；
本地存储数据在同样域名下的网页间是共享的，即便是在多个浏览器标签页中；
使用http://连接的页面是看不到使用https://连接会话中的数据库的。

有了Cache Manifest和LocalStorage这两个利器，是不是觉得HTML5开发手机离线应用开始有这么点眉目了？

原文：http://rolfzhang.com/articles/522.html

justcode.ikeepstudying.com

使用HTML5开发手机离线应用

Cache Manifest

Local Storage

相关推荐