05-HTML5强大的新 API，06-应用程序缓存

L鹿先生

于 2020-03-09 23:32:37 发布

阅读量149

点赞数

分类专栏： HTML5 文章标签： html5 前端 api

本文链接：https://blog.csdn.net/weixin_44077629/article/details/104764251

版权

HTML5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

HTML5 API：

1、文件 API （规范与本地文件进行交互的标准方法）

2、拖放 API （提供了直接支持拖放操作的API）

3、地理定位 （获取地理位置信息）

4、web 存储 （在本地存储用户的浏览数据）	

5、Web SQL	（在浏览器上模拟数据库，可以使用JS来操作SQL完成对数据的读写）

6、应用程序缓存 （创建 web 应用的离线版本。可以在没有网络连接的情况下进行访问。）

7、Web Sockets （在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。）

8、SSE	（网页自动获取来自服务器的更新）

9、Web Workers （web worker 是运行在后台的 JavaScript，不会影响页面的性能）

......

6、应用程序缓存

内容概要:

离线应用程序详解
manifest文件
浏览器与服务器的交互过程
applicationCache对象
html5 提供了一个供本地缓存使用的API，通过这个API，我们可以实现离线Web应用程序的开发

1、离线应用程序详解
新增的本地缓存：
今天web应用程序已经变得越来越复杂，越来越成熟，很多领域都在利用着Web应用程序。但是，它有一个致命的缺点：如果用户没有和Internet建立连接，他就不能利用这个Web应用程序了。
因此，在html5中新增了一个API，它使用一个本地缓存机制很好的解决了这个问题，为离线Web应用程序的开发的开发提供了可能性。
为了让Web应用程序在离线状态下也能正常工作，就必须要把所有构成Web应用程序的资源文件，诸如HTML文件、CSS文件、JavaScript脚本文件等放在本地缓存中，当服务器没有和Internet建立连接的时候，也可以利用本地缓存中的资源文件来正常运行Web应用程序。

本地缓存与浏览器网页缓存的区别：
首先，本地缓存为整个Web应用程序服务的，而浏览器的网页缓存只服务于单个页面。任何网页都具有网页缓存，而本地缓存只缓存那些你指定缓存的网页。
其次，网页缓存也是不安全，不可靠的，因为我们不知道在网站中到底缓存了哪些网页，以及缓存了网页上的哪些资源。而本地缓存是可靠的，我们可以控制对哪些内容进行缓存，不对哪些内容进行缓存，开发人员还可以用编程的手段来控制缓存的更新，利用缓存对象的各种属性、状态和事件来开发出更加强大的离线应用程序。

2、manifest文件
Web应用程序的本地缓存是通过每个页面的mainfest文件来管理的。manifest文件是一个简单地文件，在该文件中以清单的形式列举了需要被缓存或不需要被缓存的资源文件的文件名称，以及这些资源文件的访问路径。你可以为每个页面指定一个manifest文件，也可以对整个Web应用程序指定一个总的manifest文件。

hello.html网页的manifest文件：

CACHE MANIFEST
#文件的开头必须要书写CACHE MANIFEST
#整个manifest文件的版本号
#version 7
CACHE:
other.html
hello.js
images/myphoto.jpg

NETWORK:
*
FALLBACK:
online.js locacle.js

CACHE:
newhello.html
newhello.js

第一行"CACHE MANIFEST"文字，就是把文件的作用告诉浏览器，即对本地缓存中的资源文件进行具体设置。
同时，真正运行或测试离线Web应用程序的时候，需要对服务器进行配置，让服务器支持text/cache-manifest这个MIME类型（在html5中规定manifest文件的MIME类型是text/cache-manifest）。
例如对Apache服务器进行配置的时候，需要找到{apache_home}/conf/mime.types这个文件，并在文件最后添加如下代码：
text/cache-manifest manifest
但是，根据下面代码块中关于应用缓存最新版本知道manifest 文件的建议文件扩展名是：".appcache"。文件最后添加的代码也应该是：text/cache-manifest appcache

Cache Manifest 基础
如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。

manifest 文件的建议文件扩展名是：".appcache"。

注意：manifest 文件需要设置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。

在微软的IIS服务器中的步骤如下所示。
1、右键选择默认网站或需要添加类型的网站，弹出属性对话框。
2、选择“HTTP”标签
3、在MIME映射下，单击文件类型按钮。
4、在打开的MIME类型对话框中单击新建按钮。
5、在关联扩展名文本框输入“manifest”，在内容类型文本框中输入“text/cache-manifest”,然后单击确认按钮。

在manifest文件中最好加上一个版本号，版本号可以是任何形式，譬如“version 201012341108”，更新manifest文件的时候一般也会对这个版本号进行更新。

接下来，指定资源文件，可以把资源文件分为三类： CACHE 、 NETWORK 、FALLBACK
CACHE类别中指定需要被缓存在本地的资源文件。为某个页面指定需要本地缓存的资源文件时，不需要把这个页面本身指定在CACHE类别中，因为如果一个页面有manifest文件，浏览器会自

动对这个页面进行本地缓存。
NETWORK类别为显式指定不进行本地缓存的资源文件，这些资源文件只有当客户端与服务器端建立连接的时候才能访问。本示例该类别中的“*”为通配符，表示没有在本manifest文件中指

定的资源文件都不进行本地缓存。
FALLBACK类别中的每行中指定两个资源文件，第一个资源文件为能够在线访问时使用的资源文件，第二个资源文件为不能在线访问时使用的备用资源文件。

每个类别都是可选的。但是如果文件开头没有类别而直接书写资源文件的时候，浏览器把这些资源视为CACHE类别。

为了然浏览器能够正常阅读该文本文件，需要咋web应用程序页面上的html标签的manifest属性中指定manifest文件的URL地址。指定方法如下：
//你可为每个页面单独指定一个manifest文件

<html manifest="hello.manifest">
...
</html>

//也可为整个Web应用程序制定一个总的manifest文件

<html manifest="flobal.manifest">
...
</html>

通过这些操作步骤，将资源文件保存到本地缓存去的基本操作就完成了。当要对本地缓存区的内容进行修改时，只要修改manifest文件就可以了。文件被修改后，浏览器可以自动检查manifest文件，并自动更新本地缓存区中的内容。

3、浏览器与服务器的交互过程

当使用离线Web应用程序进行工作的时候，有必要了解一下浏览器与服务器之间的交互过程，
例如：访问 www.baidu.com 网站，以index.html为主页，该主页使用 index.manifest 文件为manifest文件，在该文件中请求本地缓存 index.html hello.js hello1.jpg hello2.jpg这几个文件

首次访问：

(1)浏览器发送请求访问网页

(2)服务器返回 index.html 网页

(3)浏览器解析 index.html网页，请求页面上所有资源，包括HTML文件，图像文件，CSS文件，JavaScript脚本文件，以及manifest文件

(4)服务器返回所有资源文件

(5)浏览器处理manifest文件，请求manifest文件中所有要求本地缓存的文件，包括index.html文件本身。即使刚才已经请求过这个文件。如果本地缓存所有文件，这是一个比较大重复过程。

(6)服务器返回所有要求本地缓存的文件。

(7)浏览器对本地缓存更新，存入包括页面本身在内的所有要求本地缓存的资源文件，并且触发一个事件，通知本地缓存被更新。

再次打开，而且manifest没有被修改过，他们的交互过程如下：

(1)浏览器再次请求网页

(2)浏览器发现这个页面被本地缓存，于是使用本地缓存中的index.html文件

(3)浏览器解析index.html文件，使用所有本地缓存中资源文件

(4)浏览器向服务器请求manifest文件

(5)服务器返回一个304代码，通知浏览器manifest没有发生变化

只要页面上的资源文件被本地缓存过，下次浏览器打开这个页面时，总是先使用本地缓存中的资源，然后请求manifest文件。

如果再次打开，manifest文件已经被更新过：

(1)浏览器请求网页

(2)浏览器发现这个网页被本地缓存，于是使用本地缓存中的index.html

(3)浏览器解析index.html页面，使用所有本地缓存中的资源文件

(4)浏览器向服务器请求manifest文件

(5)服务器返回更新过的manifest文件

(6)浏览器处理manifest文件，发现该文件已经被更新，于是请求所有要求进行本地缓存的资源文件，包括index.html页面本身。

(7)浏览器返回要求进行本地缓存的的资源文件

(8)浏览器对本地缓存进行更新，存入所有新的资源文件。并且触发一个事件，通知本地缓存更新。

需要注意：更新后的资源不会立刻发生变化。更新过后本地缓存中的内容还不能被使用，只有重新打开这个网页的时候才会使用更新过后的资源文件。
另外，如果你不想修改manifest文件中对于资源文件的设置，但是你对服务器上请求缓存的资源文件进行了修改，那么你可以通过修改版本号的方式来让浏览器认为manifest文件已经被更新过了，以便重新修改过的资源文件。

4、applicationCache对象

applicationCache对象代表了本地缓存，可以用来通知用户本地缓存已经被更新，也允许用户手工更新本地缓存。

当浏览器对本地缓存进行更新，装入新的资源文件，会触发applicationCache对象的updateready事件，通知本地缓存已被更新。你可以利用这个事件告诉用户本地缓存已经被更新，用户需要

手动刷新页面来得到最新版本的应用程序。这部分代码如下：
applicationCache.onUpdateReady = function(){
//本地缓存一杯更新，通知用户
alert(“本地缓存已经更新，您可以刷新页面来得到本程序的最新版本。”);

};
另外，你可以通过applicationCache的swapChche 方法来控制如何进行本地缓存的更新及更新的时机。

swapCache方法用来手工执行本地缓存的更新，它只能在applicationCache对象的updateReady事件被触发时调用，updateReady事件只有在服务器上的manifest文件被更新，并且把manifest文

件中所要求的资源下载到本地后触发。顾名思义，这个事件的含义是“本地缓存准备被更新。下面，我们来见一下哪些场合需要这个方法。
首先，如果本地缓存的容量非常大（假如超过100M），本都缓存的更新工作将需要相对较长的时间，而且还会把浏览器给锁住。这时最好有一个提示，告诉用户正在进行本地缓存的更新，该

部分代码如下所示：
applicationCache.onUpdateReaduy = function(){
//本地缓存已经更新，通知用户
alert(“正在更新本地缓存。。。”);
applicationCache.swapCache();
alert(“本地缓存已经被更新，您可以刷新页面来得到本程序的最新版本。”);
}
这时候，让我们考虑一个问题，在上面代码中，如果不调用swapCache方法会怎么样？本地缓存不会被更新了吗？答案否，但是更新的时间不一样。如果不调用swapCache方法，本地缓存将在下一次打开页面时被缓存；如果调用swapCache方法的话，本地缓存将会立刻被更新。因此，你可以使用confirm方法让用户自己选择更新的时机，是立刻更新，还是在下一次打开画面时再更新，特别是当他们有可能正在页面上执行一个较大的操作的候。另外尽管使用swapCache方法立刻更新了本地缓存，但是并不意味着我们页面上的图像和脚本文件也会被立刻更新，她们都是在重新打开页面时才会生效。
接下来我们看一个完整的使用swapCache方法的示例。在该示例中使用到了applicationCache对象的另一个方法applicationCache.update,该方法的作用是检查服务器上的manifest文件是否有更新。在打开画面时设定每5秒钟执行一次该方法，检查服务器上的manifest文件是否更新。如果有更新，浏览器会自动下载manifest文件中所有请求本地缓存的资源文件，当这些资源文件下载完毕时，会触发updateReady事件，询问用户是否立刻刷新页面以使用最新版本的应用程序，如果用户选择立刻刷新，则调用swapCache方法手工更新本地缓存，更新完毕后刷新页面。

<!DOCTYPE HTML>
<html manifest="swapCache.manifest">
<head>
	<meta charset = 'UTF-8'>
	<title></title>
	<script src='script.js'></script>
</head>
<body onload = 'init()'>
  ...
</body>
</html>
script.js如下：
function init(){
	setInterval(function(){
		//手工检查是否有更新
		applocationCache.update();
	}, 5000)
	applicationCache.addEventListerner("updateready", function(){
		if(confirm("本地缓存已被更新，需要刷新画面来获取应用程序最新版本，是否刷新？"));
		//手工更新本地缓存
		location.reload();


	}, true )

}
swapCache.manifest 如下：
CACHE MANIFEST
#version 1.20
CACHE:
script.js

applicationCache 对象的事件
applicationCache对象除了具有update方法与swapCache方法之外，还有一系列的事件，现在我们对前面讲过的浏览器与服务器的交互过程的内容进行扩充，看看在这个过程里这些事情是如何

触发的。

首次访问http://www.baidu.com网站：
1、浏览器请求访问http://www.baidu.com
2、服务器返回index.html网页
3、浏览器发现该网页具有manifest属性，触发checking事件，检查manifest文件是否存在。不存在时触发error事件，表示manifest文件未找到，不执行步骤6开始交互过程。
4、浏览器解析index.html网页，请求页面上的所有资源文件
5、服务器返回所有资源文件。
6、浏览器处理manifest文件，请求manifest中所要求本地缓存的文件，包括index.html页面本身，及时刚才已经请求过该文件。如果你要求本地缓存所有文件，这将是一个比较大的重复的请

求过程。
7、服务器返回所要求本地缓存的文件。
8、浏览器触发downloading 事件看，然后开始下载这些资源。在下载的同时，周期性地触发progress事件，开发人员可以用编程的手段获取多少文件已被下载，多少文件仍然处于下载队列等

信息。
9、下载结束后触发cached事件，表示首次缓存成功，存入所有要求本地缓存的资源文件。
再次访问http://www.baidu.com网站，步骤1-5同上，在步骤5执行完之后，浏览器将核对manifest文件是否被更新，若没有被更新，触发noupdatade事件，步骤6开始的交互过程不会被执行，如果

被更新了，将继续执行后面的步骤，在步骤9中不触发cached事件，而是触发updateready事件，这表示下载结束，可以通过刷新页面来使用更新后的本地缓存，或调用swapCache方法来立刻使

用更新后的本地缓存。
另外，在访问缓存名单时如果返回一个HTTP404错误（页面未找到），后者410错误（永久消失），则触发obsolete事件。
在整个过程中，如果任何与本地缓存有关的处理中发生错误的话，都会触发error事件。可能会触发error事件的情况分为以下几种：
1、缓存名单返回一个HTTP404错误（页面未找到），或者410错误（页面永久消失）
2、缓存名单被找到且没有更改，但引用缓存名单的HTTP页面不能正确下载。
3、缓存名单被找到且被更改，但浏览器不能下载某个缓存名单中列出的资源。
4、开始更新本地缓存时，缓存名单再次被更改
为了说明这个事件流程，我们在下列代码中，将浏览器与服务器在交互过程中所触发的一系列事件用文字的形式显示在页面上，从这个页面中我们可以看出这些事件发生的先后顺序。

<!DOCTYPE html>
<html lang="en" manifest="applicationCacheEvent.manifest">
<head>
    <meta charset="UTF-8">
    <title>applicationCache事件流程示例</title>
    <script>
        function init(){
            var msg = document.getElementById('msg');
            applicationCache.addEventListener("checking", function(){
                msg.innerHTML += " checking<br>"
            }, true)
            applicationCache.addEventListener("noupdate", function(){
                msg.innerHTML += " noupdate<br>"
            }, true)
            applicationCache.addEventListener("downloading", function(){
                msg.innerHTML += " downloading<br>"
            }, true)
            applicationCache.addEventListener("progress", function(){
                msg.innerHTML += " progress<br>"
            }, true)
            applicationCache.addEventListener("updateready", function(){
                msg.innerHTML += " updateready<br>"
            }, true)
            applicationCache.addEventListener("cached", function(){
                msg.innerHTML += " cached<br>"
            }, true)
            applicationCache.addEventListener("error", function(){
                msg.innerHTML += " error<br>"
            }, true)
        }
    </script>
</head>
<body onload="init()">
    <h1>applicationCache事件流程示例</h1>
    <p id="msg"></p>
    <img src="./image/flower.jpg" alt="牡丹">
</body>
</html>
applicationCacheEvent.manifest文件里面的内容是：
CACHE MANIFEST
#version 1.20
CACHE:
./image/flower1.jpg

首次打开会出现： checking downloading progress progress cached
再次打开网页（且manifest文件没有更新时）会出现noupdate
再次打开网页（且manifest文件已经更新时）会出现downloading progress progress updateready

想知道浏览器处于在线状态还是离线状态，你可以通过检查navigator对象的onLine属性，或者处理特定的在线和离线事件来判断。
上面这句话出自这个链接https://www.cnblogs.com/lyweb/archive/2013/04/18/3029120.html

参考阅读：

L鹿先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05-HTML5强大的新 API，06-应用程序缓存

HTML5 API：1、文件 API （规范与本地文件进行交互的标准方法）2、拖放 API （提供了直接支持拖放操作的API）3、地理定位（获取地理位置信息）4、web 存储（在本地存储用户的浏览数据） 5、Web SQL （在浏览器上模拟数据库，可以使用JS来操作SQL完成对数据的读写）6、应用程序缓存（创建 web 应用的离线版本。可以在没有网络连接的情况下进行访问...
复制链接

扫一扫

专栏目录