首页 >web前端 >H5教程 >html5 如何做到application cache?离线储存技术的简要说明

html5 如何做到application cache?离线储存技术的简要说明

青灯夜游
青灯夜游原创
2018-09-08 17:07:421618浏览

本章我们给大家介绍用html5 如何做到application cache?简要说明离线储存技术。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

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

<script>
    if(window.applicationCache){
        alert("支持离线缓存");
    }
    else{
        alert("不支持离线缓存");
    }
</script>

二:使用方法

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

1.引入manifest文件

<!DOCTYPE html>
<html>
<head>
<!--就是在这里引入,注意引入也是讲究路劲跟文件名的,
      这里文件名是test,后缀是mainfest,路劲在当前的html下面
     (一般放在html当前文件夹下面也没什么问题,我是这么放的)-->
<html manifest="test.manifest">
<meta charset="UTF-8">
<title>html5 离线缓存</title>
</head>
<body>
</body>
</html>

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 &#39;UNCACHED&#39;; 
    break; 
  case appCache.IDLE: // IDLE == 1 
    return &#39;IDLE&#39;; 
    break; 
  case appCache.CHECKING: // CHECKING == 2 
    return &#39;CHECKING&#39;; 
    break; 
  case appCache.DOWNLOADING: // DOWNLOADING == 3 
    return &#39;DOWNLOADING&#39;; 
    break; 
  case appCache.UPDATEREADY: // UPDATEREADY == 4 
    return &#39;UPDATEREADY&#39;; 
    break; 
  case appCache.OBSOLETE: // OBSOLETE == 5 
    return &#39;OBSOLETE&#39;; 
    break; 
  default: 
    return &#39;UKNOWN CACHE STATUS&#39;; 
    break; 
  };

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

<script>    //利用定时器隔一定时间自动更新一下缓存
    setInterval(function(){
            applicationCache.update();
    },50000);</script>

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

var appCache = window.applicationCache;
appCache.update(); // Attempt to update the user&#39;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

<html manifest="test.manifest">
<head>
<title>AppCache Test</title>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
</head>
<body>
<p><output id="test"></output></p>
<div id="log"></div>
</body>
</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(&#39;test&#39;).value = new Date();
}, 1000);



以上是html5 如何做到application cache?离线储存技术的简要说明的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn