使用HTML5开发手机离线应用

haocxy 2015-05-16

使用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

相关推荐