H5离线缓存

来源：互联网发布：采购要会什么软件编辑：程序博客网时间：2024/05/14 08:42

一、概述：

1.HTML5的离线web应用允许我们在脱机时与网站进行交互。这在提高网站的访问速度和制作一款web离线应用上（如HTML5游戏）有一定的用处。

2.UIWebView和WKWebView都支持H5离线缓存。此功能需要服务器和浏览器本身很好的支持来达到它的稳定性。使用H5离线缓存，不需要客户端增加任何离线缓存相关代码。

二、HTML5应用程序缓存和浏览器缓存的区别。

（有些）浏览器会主动保存自己的缓存文件以加快网站加载速度。但是要实现浏览器缓存必须要满足一个前提，那就是网络必须要保持连接。如果网络没有连接，即使浏览器启用了对一个站点的缓存，依然无法打开这个站点。只会收到一条错误信息。而使用离线web应用，我们可以主动告诉浏览器应该从网站服务器中获取或缓存哪些文件，并且在网络离线状态下依然能够访问这个网站。

三、如何实现HTML5应用程序缓存。

1.离线存储是通过manifest文件来管理的，需要服务器端的支持，不同的服务器开启支持的方式也是不同的。

2.实现HTML5应用程序缓存非常简单，只需三步，并且不需要任何API。只需要告诉浏览器需要离线缓存的文件，并对服务器和网页做一些简单的设置即可实现。

(1)创建一个 cache.manifest 文件，并确保文件具有正确的内容

首先我们需要建立一个名为 cache.manifest 的文件。文件内容如下：

CACHE MANIFEST
#v1 - 2013-09-09
CACHE:
index.html
favicon.ico
css/main.css
…
NETWORK:
 *
FALLBACK
    online.html offline.html

其中:

CACHE: 之后的部分为列出我们需要缓存的文件。

NETWORK: 之后可以指定在线白名单，即列出我们不希望离线存储的文件，因为通常它们的内容需要互联网访问才有意义。另外，在此部分我们可以使用快捷方式：通配符*。这将告诉浏览器，应用服务器中获取没有在显示部分中提到的任何文件或URL。需要特别指出的是，上面例子中的注释 v1 很有必要存在。只有当 cache.manifest 文件发生变化时，浏览器才会去更新应用缓存。如果你要更改缓存资源，你必须同时修改此文件中的内容，以便让浏览器知道它们需要更新缓存。你可以对清单文件做任何改动，但大家都认同的最佳实践则是修正版本号（即v*）。

FALLBACK：每行分别指定在线和离线时使用的文件

(2)在服务器上设置内容类型

假使你使用的事Apache服务器，在.htaccess文件中添加以下代码：

AddType text/cache-manifest .manifest。

(3)所有的HTML文件都指向 cache.manifest。

我们需要将HTML页面指向清单文件。通过设置每一个页面中HTML元素的manifest属性来完成这一步：

完成这一步后，就完成了web离线缓存的所有步骤。由于浏览的文件内容都没有更改且存储在本地，因此现在网页的打开速度会更快（即使是在线状态也如此）。

(4)需要注意的问题：

?网站的每一个html页面都必须设置html元素的manifest属性。一定要这样做；

?在你的整个网站应用中，只能有一个cache.manifest文件（建议放在网站根目录下）；

?部分浏览器（如IE8-）不支持HTML5离线缓存。

四、通过JS动态控制更新

applicationCache对象提供个了一些方法和事件，管理离线存储的交互过程。通过在firefox8.0的控制台中输入window.applicationCache可以看到这个对象的所有属性和事件方法。

applicationCache.onchecking = function(){
   //检查manifest文件是否存在
}

applicationCache.ondownloading = function(){
   //检查到有manifest或者manifest文件
   //已更新就执行下载操作
   //即使需要缓存的文件在请求时服务器已经返回过了
}

applicationCache.onnoupdate = function(){
   //返回304表示没有更新，通知浏览器直接使用本地文件
}

applicationCache.onprogress = function(){
   //下载的时候周期性的触发，可以通过它
   //获取已经下载的文件个数
}

applicationCache.oncached = function(){
   //下载结束后触发，表示缓存成功
}

application.onupdateready = function(){
   //第二次载入，如果manifest被更新
   //在下载结束时候触发
   //不触发onchched
   alert("本地缓存正在更新中。。。");
   if(confirm("是否重新载入已更新文件")){
       applicationCache.swapCache();
       location.reload();
   }
}

applicationCache.onobsolete = function(){
   //未找到文件，返回404或者401时候触发
}

applicationCache.onerror = function(){
   //其他和离线存储有关的错误
}

0 0