HTML5离线缓存应用

导语 打开一个网页,加载完后,如果突然断网了,那么你刷新后那页面就没了。有没有想过,刷新后页面还是刚刚才页面,在新窗口中再打开一个页面,输入相同的网址,在断网的状态下打开还是原来那个页面。。HTML5的离线应

打开一个网页,加载完后,如果突然断网了,那么你刷新后那页面就没了。

有没有想过,刷新后页面还是刚刚才页面,在新窗口中再打开一个页面,输入相同的网址,在断网的状态下打开还是原来那个页面。。HTML5的离线应用正提供了这样一个功能。

在页面中的数据加载时,你可以自己设定一些要缓存的图片、flash、css、js、html等文件,等下次不能联网的情况下,你可以用那些缓存的文件。这就是HTML5的离线应用。

其实它实现起来很简单。

需要服务器。这里用tomcat服务器来讲解。

首先要先把.manifest后缀的文件 的mine类型配置为text/cache-manifest。

一讲到tomcat配置,熟悉的朋友自然就会想到web.xml这个文件,没错,在文件中加入如下配置就行:

  <mime-mapping>
      <extension>manifest</extension>
      <mime-type>text/cache-manifest</mime-type>
  </mime-mapping>

然后写一个xxx.manifest文件,xxx是你自己取的一个名字。这个文件的格式是这样的:

CACHE MANIFEST 

#version 1.5

CACHE:
MyTest.html
CSS/main.css
Javascript/bwH5LS.js
exp-calif-logo.gif

第一行是必须的,它标识这是manifest的配置文件。

#version 1.5

这句是注释,没实际的作用,我在这里只是想让浏览器更新缓存文件。因为当这个manifest文件与原来一样的时候,浏览器是不会去重新加载缓存文件的,所以我们可以通过这个注释,一方面修改版本号,另一方面让浏览器更新缓存。

CACHE:

这行指示出下面的文件是要缓存的。示例中,缓存了当前页面:MyTest.html,以及一些css和js文件 还有图片。

还有几个关键字示例中没提到,就是

NETWORK:

FALLBACK:

NETWORK 指不想缓存的页面;FALLBACK 是指请求的文件 没有找到或该文件的服务器没有响应时的替代方案,比如我们想请求某个嵌套页面,但这个页面的服务器连接不上了,那么我可以转向另外一个指定的页面。

这是第二步,第三步,只要在<html>标签中加上manifest的位置就行了:

<html manifest="NAME.manifest">

到这里,就可以实现简单的离线应用了。

那些缓存的文件放在哪呢?

在chrome上测试,发现它是按自己的机制来分块保存这些文件的,所以我没找不到完整的文件。保存的数据在:

C:\Users\jasonling\AppData\Local\Google\Chrome\User Data\Default 里面,具体怎么存,笔者还不了解。

 

http://www.aseoe.com/ true HTML5离线缓存应用 http://www.aseoe.com/show-10-292-1.html report <?php echo strlen($content) / 2; ?> 打开一个网页,加载完后,如果突然断网了,那么你刷新后那页面就没了。有没有想过,刷新后页面还是刚刚才页面,在新窗口中再打开一个页面,输入相同的网址,在断网的状态下打开还是原来那个页面。。HTML5的离线应
TAG:HTML5
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-10-292-1.html

[前端插件推荐] Plugin

1 2 3 4
  • jQuery实现逐字逐句显示插件l-by-l.min.js
  • jQuery带方向感知的鼠标滑过图片边框特效插件
  • jQuery HotKeys监听键盘按下事件keydown插件
  • 响应式无限轮播jQuery旋转木马插件
响应式无限轮播jQuery旋转木马插件
web前端开发
爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)