083_html5应用程序缓存

最新推荐文章于 2021-07-04 04:50:13 发布

自由与束缚JavaJavaScript

最新推荐文章于 2021-07-04 04:50:13 发布

阅读量174

点赞数

分类专栏： html学习文章标签： html5 web前端

本文链接：https://blog.csdn.net/aihiao/article/details/109019043

版权

html学习专栏收录该内容

89 篇文章 2 订阅

订阅专栏

1. 使用html5, 通过创建cache manifest文件, 可以轻松地创建web应用的离线版本。

2. 什么是应用程序缓存(Application Cache)?

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

2.2. 应用程序缓存为应用带来三个优势:

2.2.1. 离线浏览: 用户可在应用离线时使用它们。

2.2.2. 速度: 已缓存资源加载得更快。

2.2.3. 减少服务器负载: 浏览器将只从服务器下载更新过或更改过的资源。

3. 浏览器支持

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

4. Cache Manifest基础

4.1. 如需启用应用程序缓存, 请在文档的<html>标签中包含manifest属性:

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

4.2. 每个指定了manifest的页面在用户对其访问时都会被缓存。如果未指定manifest属性, 则页面不会被缓存(除非在manifest文件中直接指定了该页面)。

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

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

4.5. 在Tomcat的web.xml里已经自动配置了:

5. Manifest文件

5.1. manifest文件是简单的文本文件, 它告知浏览器被缓存的内容(以及不缓存的内容)。

5.2. manifest文件可分为三个部分:

5.2.1. CACHE MANIFEST: 在此标题下列出的文件将在首次下载后进行缓存。

5.2.2. NETWORK: 在此标题下列出的文件需要与服务器的连接, 且不会被缓存。

5.2.3. FALLBACK: 在此标题下列出的文件规定当页面无法访问时的回退页面(比如: 404页面)。

5.3. CACHE MANIFEST

5.3.1. 第一行, CACHE MANIFEST, 是必需的:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

5.3.2. 上面的manifest文件列出了三个资源: 一个CSS文件, 一个GIF图像, 以及一个JavaScript文件。当manifest文件加载后, 浏览器会从网站的根目录下载这三个文件。然后, 无论用户何时与因特网断开连接, 这些资源依然是可用的。

5.4. NETWORK

5.4.1. 下面的NETWORK小节规定文件"login.jsp"永远不会被缓存, 且离线时是不可用的:

NETWORK:
login.jsp

5.4.2. 可以使用星号来指示所有其他资源、文件都需要因特网连接:

NETWORK:
*

5.5. FALLBACK

5.5.1. 下面的FALLBACK小节规定如果无法建立因特网连接, 则用"404.html"替代myhtml/目录中的所有文件:

FALLBACK:
/myhtml/ 404.html

5.5.2. 第一个URI是资源, 第二个是替补。

6. 更新缓存

6.1. 一旦应用被缓存, 它就会保持缓存直到发生下列情况:

6.1.1. 用户清空浏览器缓存。

6.1.2. manifest文件被修改。

6.1.3. 由程序来更新应用缓存。

6.2. 实例 - 完整的Manifest文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.jsp

FALLBACK:
/myhtml/ 404.html

6.3. 重要的提示: 以"#"开头的是注释行, 但也可满足其他用途。应用的缓存会在其manifest文件更改时被更新。如果您编辑了一幅图片, 或者修改了一个JavaScript函数, 这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

7. 浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点5MB)。

8. 例子

8.1. 编写manifest.html

<!DOCTYPE html>
<html manifest="demo.appcache">
	<head>
		<meta charset="utf-8" />
		<title>应用程序缓存</title>
	</head>
	<body>
		<script type="text/javascript" src="demo.js"></script>

		<p id="timePara"><button onclick="getDateTime()">获得日期和事件</button></p>
		<p><img src="w3school_banner.gif" /></p>
		<p>请打开<a href="manifest.html" target="_blank">这个页面</a>, 然后脱机浏览, 重新加载页面。页面中的脚本和图像依然可用。</p>
	</body>
</html>

8.2. demo.js

function getDateTime() {
	var d = new Date();
	document.getElementById('timePara').innerHTML=d;
}

8.3. demo.appcache

CACHE MANIFEST
/demo.js
/w3school_banner.gif

8.4. 新建一个名为ApplicationCache的动态Web工程

8.5. 启动服务器, 访问manifest.html

8.6. 关闭服务器, 访问manifest.html

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
083_html5应用程序缓存

1. 使用html5, 通过创建cache manifest文件, 可以轻松地创建web应用的离线版本。2. 什么是应用程序缓存(Application Cache)?2.1. html5引入了应用程序缓存, 这意味着web应用可进行缓存, 并可在没有因特网连接时进行访问。2.2. 应用程序缓存为应用带来三个优势:2.2.1. 离线浏览: 用户可在应用离线时使用它们。2.2.2. 速度: 已缓存资源加载得更快。2.2.3. 减少服务器负载: 浏览器将只从服务器下载更新过或更改过的资源
复制链接

扫一扫

专栏目录