htm5应用程序缓存appcache

最新推荐文章于 2025-04-19 06:02:36 发布

学也无涯

最新推荐文章于 2025-04-19 06:02:36 发布

阅读量458

点赞数 1

分类专栏： h5 文章标签： h5离线缓存离线缓存 appcache

本文链接：https://blog.youkuaiyun.com/weixin_41002312/article/details/79380981

版权

h5 专栏收录该内容

1 篇文章

订阅专栏

本文介绍HTML5应用程序缓存的功能及其实现方法，包括让应用支持离线浏览、提高加载速度和减轻服务器负载等优势。通过示例代码展示了如何配置HTML文件及其manifest文件来启用离线缓存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

h5的应用程序缓存，为应用带来了三大优势：1，可以让用户离线浏览；2，提高加载速度；3，减少服务器负载。这么好的东西，IE对它的支持自然不是很友好，要IE10+才支持。IE9以下对离线缓存的不兼容虽然让人有些遗憾，但这并不妨碍appcache的魅力。下面，让我们看看如何实现离线缓存。直接上代码：

html5代码：

<!DOCTYPE html>
<html lang="en" manifest="manifest.appcache">  <!--manifest属性不可少，指定了该属性的页面在用户访问时都会被缓存。manifest.appcache的文件名和扩展名都是任意的，但是必须在服务器上设置文件的mine-type为text/cache-manifest。
<head>
	<meta charset="UTF-8">
	<title>learn Application Cache</title>
</head>
<body>
	<img src="test.jpg"/>
	<script src="test.js"></script>
</body>
</html>

manifest.appcache文件内的代码：

CACHE MANIFEST    此处必不可少

#VERSION 1.0   2018-01-01   此处为注释内容，通过更新注释可以提醒浏览器更新缓存

CACHE:    标示要缓存的文件，可以使相对路径也可以是绝对路径
test.js
test.jpg


NETWORK:    绕过缓存直接读取的文件，通常为*，表示除了CACHE中的文件都要通过联网访问
*

FALLBACK:    可选，资源无法访问时的替代页面
/html5/ /404.html  无法建立因特网连接，则用404.html替代/html5/中所有文件
*.html /404.html   任何页面无法访问时跳转到404.html

个人笔记，如有错误之处，望指正。