离线应用（2）

最新推荐文章于 2024-07-25 17:08:25 发布

Ahren_ye

最新推荐文章于 2024-07-25 17:08:25 发布

阅读量351

点赞数

分类专栏： HTML5 文章标签： cache function html5 服务器浏览器 network

HTML5 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

HTML5离线缓存应用

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

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

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

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

其实它实现起来很简单。

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

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

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

1	<mime-mapping>

2	<extension>manifest</extension>

3	<mime-type>text/cache-manifest</mime-type>

4	</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的位置就行了：

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

下面介绍下事件

需要注意的是，只有manifest文件发生改变的时候才被认为需要更新。

首先我们获取DOMApplicationCache对象

var cache = window.applicationcache;

接下来我们将触发cache对象的一些事件来检测我们的缓存是否成功

/*oncached事件表示：当更新已经处理完成，并且存储。
  * 如果一切正常，这里cache的状态应该是4
  */
       cache.addEventListener('cached', function(){
            console.log('Cached,Status:' + cache.status);
        }, false);

/*onchecking事件表示：检查更新  * 如果一切正常，这里cache的状态应该是2
  */
        cache.addEventListener('checking', function(){
            console.log('Checking,Status:' + cache.status);
        }, false);

/*ondownloading事件表示：开始下载最新的资源。
  * 如果一切正常，这里cache的状态应该是3
  */
        cache.addEventListener('downloading', function(){
            console.log('Downloading,Status:' + cache.status);
        }, false);

/*onerror事件表示：有错误发生，manifest文件找不到或服务端有错误发错或资源找不到都会触发onerror事件。
  * 如果一切正常，这里cache的状态应该是0
  */
        cache.addEventListener('error', function(){
            console.log('Error,Status:' + cache.status);
        }, false);

/*onnoupdate事件表示：无需更新  * 如果一切正常，这里cache的状态应该是1
  */
        cache.addEventListener('noupdate', function(){
            console.log('Noupdate,Status:' + cache.status);
        }, false);

/*onupdateready事件表示：更新已经处理完成，新的缓存可以使用。
  * 如果一切正常，这里cache的状态应该是4
  */
        cache.addEventListener('updateready', function(){
            console.log('Updateready,Status:' + cache.status);
            cache.swapCache();
        }, false);

通过以上代码我们可以发现，当DOMApplicationCache对象触发了updateready事件时，才真正的更新了缓存文件。

要以编程方式更新缓存，请先调用 applicationCache.update()。此操作将尝试更新用户的缓存（前提是已更改清单文件）。最后，当 applicationCache.status 处于 UPDATEREADY 状态时，调用applicationCache.swapCache() 即可将原缓存换成新缓存。

Ahren_ye

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
离线应用（2）

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

扫一扫

专栏目录