html5：离线存储：application cache

最新推荐文章于 2021-06-09 16:48:33 发布

mkmin

最新推荐文章于 2021-06-09 16:48:33 发布

阅读量618

点赞数

分类专栏： html5 文章标签： html5 离线缓存 application cahce

本文链接：https://blog.csdn.net/HUSHILIN001/article/details/88615614

版权

html5 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

1.什么是应用程序缓存（Application Cache）？

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

（以上文本摘选自w3school，以下文本也是）

所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。

扯回正题，application cache是html5新增的，主要作用就是在离线的时候可以访问网页，当然，兼容性也是要考虑的

2.怎么使用

第一步，我们需要创建一个文件，当然后缀的名（文件格式）为appache；即a.appache；

第二步，我们要剖析下文件的结构组成：

CACHE MANIFEST
	# version xx.xx.xx
	CACHE:#需要缓存的文件的相对路径
	a.png
	a.js
	 
	NETWORK:#不缓存的文件的相对路径
	b.html
	b.css
	 
	FALLBACK:#缓存失败后的页面路径
	a.html

大体的结构就是上面这样的，然后再来一段w3school的文字：

需要注意的是其中的fallback，其他的都好说

第三步：

我们需要在页面中去使用他，比如：

	<html mainfest='cache.appache'></html>

第四步：

既然有使用的方法，那么肯定会提供事务监听的功能，即：

触发事件：
	//离线资源存储完成
	window.applicationCache.addEventListener('cached', function () {	});
	//离线资源更新检查完成
	window.applicationCache.addEventListener('checking', function () {	});
	//离线资源下载
	window.applicationCache.addEventListener('downloading', function () {});
		//下载每一个资源的时候会触发
	window.applicationCache.addEventListener('progress', function () {});
			//离线资源更新完成之后
	window.applicationCache.addEventListener('updateready', function () {});
	//检查更新之后发现没有资源更新的时候触发
	window.applicationCache.addEventListener('noupdate', function () {});
	//更新错误的时候触发
	window.applicationCache.addEventListener('error', function () {});

差不多就是这样子了

3.加载的过程：

当浏览器访问包含该manifest属性的文档时，如果不存在应用程序缓存，浏览器将加载该文档，然后获取清单文件中列出的所有条目，从而创建应用程序缓存的第一个版本。
对该文档的后续访问会导致浏览器从应用程序缓存（而不是从服务器）加载清单文件中指定的文档和其他资产。此外，浏览器还会向对象发送checking事件window.applicationCache，并根据相应的HTTP缓存规则获取清单文件。
如果清单的当前缓存副本是最新的，则浏览器会向对象发送noupdate事件applicationCache，并且更新过程完成。请注意，如果更改服务器上的任何缓存资源，则还必须更改清单文件本身，以便浏览器知道需要再次获取所有资源。
如果清单文件已更改，则清单中列出的所有文件以及通过调用applicationCache.add()-are 添加到缓存中的文件都将按照相应的HTTP缓存规则提取到临时缓存中。对于提取到此临时缓存中的每个文件，浏览器会向对象发送一个progress事件applicationCache。如果发生任何错误，浏览器将发送一个error事件，并且更新将停止。
成功检索完所有文件后，它们将自动移入实际的脱机缓存中，并将cached事件发送到该applicationCache对象。由于文档已从缓存加载到浏览器中，因此在重新加载文档（手动或以编程方式）之前，不会呈现更新的文档。

备注：

1.注意！每个浏览器的缓存的大小都是不一致的。比如通常都是5mb。所以最好不要乱来

2.必须要全部加载完成才会进入到永久性的缓存，所以要注意了；

3.如果你已经预加载了a.png。然后后面版本又换了这个图片，那你就要小心了。哈哈

4.必须使用text/cache-manifestMIME类型提供缓存清单文件

参考资料：w3school关于application cache的介绍

mdn使用application cache

mkmin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5：离线存储：application cache

1.什么是应用程序缓存（Application Cache）？HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。应用程序缓存为应用带来三个优势：离线浏览 - 用户可在应用离线时使用它们速度 - 已缓存资源加载得更快减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。（以上文本摘选自w3school，...
复制链接

扫一扫