`

html5初探——webapp离线策略（本地储存策略）

html5webapp 
阅读更多

今日初探了一下webapp的离线策略。确实好用！建议大家都用上！

（下面会给一个例子，但只是基于safari，chrome和firefox测试。）

开发离线应用的缓存方法大概有4种（如下safari开发工具中的resources所示）

1.cookies（略）：传统储存策略。缺点很明显：储存的容量过小，而且很容易被各种软件当垃圾清除，如360等。

2.Application Cachet资源缓存：在html中指定一个manifest文件，给文件中罗列出需要缓存的资源文件列表。浏览器根据资源列表对资源文件缓存。

3.Dom Storage：这一种基于key/value的格式。

DOM Storage 分为两类：sessionStorage 和 localStorage。除了以下区别外，这两类存储对象的功能是完全一致的。

  1. sessionStorage 用于存储与当前浏览器窗口关联的数据。窗口关闭后，sessionStorage 中存储的数据将无法使用。
  2. localStorage 用于长期存储数据。窗口关闭后，localStorage 中的数据仍然可以被访问。所有浏览器窗口可以共享 localStorage 的数据.
4.web sql Databases:除 了 DOM Storage 以外，HTML5 中还有另外一种数据存储方式 Web SQL Database。它提供了基本的关系数据库功能，支持页面上的复杂的、交互式的数据存储。它既可以用来存储用户产生的数据，也可以作为从服务器获取数据 的本地高速缓存。例如可以把电子邮件、日程等数据存储到数据库中。Web SQL Database 支持数据库事务的概念，从而保证了即使多个浏览器窗口操作同一数据，也不会产生冲突。

示例：（这才是重点啊！）
目前我只尝试过Application Cache，所以也只给出这个例子。
开发环境：Apache+php+（windows下的safari，chrome，firefox）/ipod touch下的safari
目的：缓存我指定的index.html和其中的jquery.js资源文件。index.html中的图片不缓存。
文件目录分布如下：
/jqueryapp/
---------------------------------------------
1.index.html
2.jquery.js
3.tetris.php(可能大家觉得这个文件很奇怪，其实是用来发送manifest的mime type的。不然就要修改apache的mime.types或者用.htaccess，很多人没有这个条件，比如我)
4.tetris.manifest
---------------------------------------------
index.html代码
[plain] view plain copy
  1. <!DOCTYPE html>  
  2. <html manifest="tetris.php">  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  6.     <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>   
  7.     <meta name="apple-mobile-web-app-capable" content="yes" />   
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black" />   
  9.     <link rel="apple-touch-icon" href="iphon_tetris_icon.png"/>   
  10.     <link rel="apple-touch-startup-image" href="startup.png" />  
  11.   
  12.     <title>appdig</title>  
  13.   
  14.     <script src="jquery.js"></script>  
  15.   
  16. <span style="white-space:pre">  </span><style type="text/css">  
  17. <span style="white-space:pre">      </span>body,div,ul,li,p,span,img{  
  18.     <span style="white-space:pre">  </span>margin:0px;  
  19.     <span style="white-space:pre">  </span>padding:0px;  
  20.     <span style="white-space:pre">  </span>}……  
<!DOCTYPE html>是用来声明它是一个html5文档。
<html manifest="tetris.php">加上 manifest="tetris.php"来指定资源列表文件。tetris.php就是指定需要缓存的资源文件列表。
tetris.php代码
[plain] view plain copy
  1. <?php  
  2. header('Content-Type: text/cache-manifest');  
  3. readfile('tetris.manifest');  
先发送header头部，确定这是一个text/cache-manifest类型文件。再把tetris.manifest中的列表都进来。
tetris.manifes代码
[plain] view plain copy
  1. CACHE MANIFEST   
  2.  index.html   
  3.  jquery.js  
有些文章说包涵manifest的html可以不用写自身。我试了，不写真的也可以。
再说说manifest的书写规则吧。
第一行必须写上CACHE MANIFEST，然后每个资源文件一行，注释用#。

后记：关于manifest的mime type声明
html5提供的这种方法必须保证<html manifest="文本文件">中的文本文件（任意名字和任意扩展名）是t ext/cache-manifest类型的。即其header必须声明其类型是t ext/cache-manifest的。

其实如果你有修改apache服务器或者别的web服务器的权限你完全可以不用tetris.php这个文件。在index.html中的直接用 <html manifest="tetris.manifest">就可以。
修改apache的mime.types配置文件，在其中加上下面这句。 
text/cache-manifest            manifest
或者用.htaccess，加添下面那句（我没尝试）。
AddType text/cache-manifest 用我上面的方法的好处就是不用修改和添加任何配置文件。利用php来发送header来告诉浏览器我是text/cache-manifest类型的。
参考资料：
1.http://www.ibm.com/developerworks/cn/web/1011_guozb_html5off/   非常的详细讲解了离线应用的储存策略
3.http://www.yiiyaa.net/1414  详细讲了manifest的用法
 
示例代码下载地址（有错的给我留言）：manifest.rar
分享到：
| [HTML5]配置Ngnix服务器支持manifest 离 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics