html5怎么做到applicationcache

这篇文章给大家分享的是有关html5怎么做到application cache的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

10年积累的网站设计、做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计制作后付款的网站建设流程，更有迁安免费网站建设让你可以放心的选择与我们合作。

在HTML5之前，我们必须连接网络才能访问页面。但随着移动互联网的兴起，设备终端的位置不在固定。而移动设备非常依赖无线信号，可无线网络的可靠性并不稳定，比如在过隧道或是信号强度弱的地方，无法访问网站，这无疑对用户体验是不好的，所以HTML5中的离线缓存（applicationCache）就解决了这个问题。

一：什么是离线缓存
HTML5离线缓存又名applicationCache，为Html5新特性之一，简单理解就是第一次加载后将数据缓存，在没有清除缓存前提下，下一次没有网络也可以加载，用在静态数据的网页或游戏比较好用。当然，Html5新的特性都不是所有浏览器都能支持的，离线缓存也一样。反正IE9（包括）及IE9以下的浏览器目前是不支持的。如果用在移动端，应该都能支持。检测是否支持离线缓存也是比较简单的。

二：使用方法

HTML5离线缓存，是从浏览器的缓存中分出来的一块缓存区，若要在这个缓存中保存数据，需要使用描述文件（.manifest），列出需要下载和缓存的资源。

1.引入manifest文件

2.引入完了之后，接下来就是test.mainfest文件代码的编写了。

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：
   ①CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
   ②NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
   ③FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

完整的代码

CACHE MANIFEST//必须以这个开头
version 1.0 //最好定义版本，更新的时候只需修改版本号
CACHE:
    m.png
    test.js
    test.css
NETWORK:
    *
FALLBACK
    online.html offline.html

manifest文件需要配置正确的MIME-type，即“text/cache-manifest”，这个是在web服务器上进行配置。

解析一下：
   以#开头的行表示的是注释。CACHE下面的都是缓存的文件，NETWORK表示每次都从网络请求，然后缓存，指定的文件总是从网络上请求最新的。FALLBACK：指定的文件若是找不到，会被重定向到新的地址。规范都是大写。

3.通过JS动态控制更新

应用在离线后将保持缓存状态，除非发生以下某种情况：
用户清除了浏览器对您网站的数据存储。
清单文件经过修改。

请注意：更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改。

1）缓存状态：window.applicationCache 对象是对浏览器的应用缓存的编程访问方式。其 status 属性可用于查看缓存的当前状态。

applicationCache.status的值如下：
         0 === 未缓存
   　　1 === 空闲（缓存为最新状态）
   　　2 === 检查中
   　　3 === 下载中
   　　4 === 更新就绪
   　　5 === 缓存过期

var appCache = window.applicationCache; 
switch (appCache.status) { 
　　case appCache.UNCACHED: // UNCACHED == 0 
　　　　return 'UNCACHED'; 
　　　　break; 
　　case appCache.IDLE: // IDLE == 1 
　　　　return 'IDLE'; 
　　　　break; 
　　case appCache.CHECKING: // CHECKING == 2 
　　　　return 'CHECKING'; 
　　　　break; 
　　case appCache.DOWNLOADING: // DOWNLOADING == 3 
　　　　return 'DOWNLOADING'; 
　　　　break; 
　　case appCache.UPDATEREADY: // UPDATEREADY == 4 
　　　　return 'UPDATEREADY'; 
　　　　break; 
　　case appCache.OBSOLETE: // OBSOLETE == 5 
　　　　return 'OBSOLETE'; 
　　　　break; 
　　default: 
　　　　return 'UKNOWN CACHE STATUS'; 
　　　　break; 
　　};

2）主动更新缓存：applicationCache.update()

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

var appCache = window.applicationCache;
appCache.update(); // Attempt to update the user's cache.
...
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache();  // The fetch was successful, swap in the new cache.

4.一个简单的离线缓存的应用

建一个web工程AppCache,包括四个文件：
appcache_offline.html

manifest文件：test.manifest

CACHE MANIFEST
#VERSION 1.0
CACHE:
test.css

test.css

output { font: 2em sans-serif; }

test.js

setTimeout(function () {
document.getElementById('test').value = new Date();
}, 1000);

感谢各位的阅读！关于html5怎么做到application cache就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！