HTML5 发展如火如荼,随着各大浏览器对 HTML5 技术支持的不断完善以及 HTML5 技术的不断成熟,未来 HTML5 必将改变我们创建 Web 应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具,帮助你更高效的编写…
使用HTML5开发手机离线应用
本来这篇文章想叫《挺起你的HTML5》或者《让HTML5飞》或者神马其他的,但是为了更好的体现主题,我就用这个直白点的题目吧 ~
随着各种智能手机(iPhone、Android)大行其道,App模式的应用开发变得热火朝天,反观Web领域则黯然失色。然而即将(或者说已 经)到来的HTML5,又为Web注入了新鲜的鸡血,让我等Web码农再次激动不已——我们可以用HTML、CSS、JavaScript开发手机应用 了!可以实现绝大部分Native App的功能,跨平台,自动更新,即需即取……亲,只需要有浏览器哟!而且没有恶心的IE6 ~
做任何一个应用都离不开两种东西:文件和数据。下面我就以一个简单的小应用来介绍一下如何开发一个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();
操作结果可以在“开发人员工具”中看到
一些LocalStorage的注意事项:
- localStorage要通过域名访问的方式才能起作用,直接打开本地文件是不行滴哟~
- 俺们保存的都是string,如果是int或者float的话,get回来之后记得转换一下;
- 本地存储数据在同样域名下的网页间是共享的,即便是在多个浏览器标签页中;
- 使用http://连接的页面是看不到使用https://连接会话中的数据库的。
有了Cache Manifest和LocalStorage这两个利器,是不是觉得HTML5开发手机离线应用开始有这么点眉目了?
原文:http://rolfzhang.com/articles/522.html