html5离线缓存不起效果，难道manifest属性废弃了吗？

最新推荐文章于 2024-05-10 17:03:15 发布

程宇寒

最新推荐文章于 2024-05-10 17:03:15 发布

阅读量1.3k

点赞数

文章标签： html5 离线缓存前端开发浏览器 manifest

本文链接：https://blog.csdn.net/czh500/article/details/112452588

版权

html5中的离线缓存不起效果，什么原因？知道的小伙伴麻烦留言一下。

以下是火狐浏览器的效果：

IE浏览器效果

火狐浏览器效果

IE浏览器效果

cache.html

tomcat7目录下\conf\web.xml文件

<mime-mapping>
    <extension>appcache</extension>
    <mime-type>text/cache-manifest</mime-type>
</mime-mapping>

test.appcache文件

CACHE MANIFEST
#######2020-12-31 v1.0.0
#指明缓存入口
CACHE:
cache.html
test.js
../css/inputAndDiv.css
#以下资源必须在线访问
NETWORK:
../img/panda4.jpg
#如果index.html无法访问则用404.html代替
FALLBACK:
index.html  ../404.html

test.js文件

/**
 * 
 */
window.onload = function() {
	var divNode = document.getElementById("show");
	divNode.onclick = function() {
		alert("哈哈，我老家在江西于都.....赣南脐橙是我家乡的特产");
	}
	
}

cache.html文件

<!DOCTYPE html>
<html manifest="test.appcache">
<head>
<meta charset="UTF-8">
<title>html5学习(离线缓存)</title>
<link rel="stylesheet" type="text/css" href="../css/inputAndDiv.css">
<script type="text/javascript" src="test.js"></script>
</head>
<body style="background-color: #CCE8CF;">
<h3>html5学习(离线缓存)</h3>
<div id="show" style="height: 260px;">
江西省赣州市于都县
</div>
<img src="../img/panda4.jpg">
</body>
</html>

在网上搜索了一番，看到2个可能性比较大的原因：

1.服务器设置不当有关

2.HTML5废弃manifest属性

目前，我还不清楚到底是什么原因导致缓存不起效果，我先记录一下。

html5中离线缓存的实现

工作原理：

是基于一个新建的.appcache文件的缓存机制。解析清单离线存储资源，这些资源就像cookies一样存储起来。

如何实现呢？

在html的头部加入manifest属性，并在cache.manifest文件中编写离线存储的资源。在离线状态时，操作window.applicationCache进行实现

浏览器是如何对离线资源进行管理和加载的呢？

在线状态时，浏览器发现html头部有manifest属性，就会请求manifest文件，如果是第一次访问，则会根据manifest文件中请求的资源进行下载并离线存储。如果不是第一次访问，且资源已经离线存储了，浏览器就会通过离线存储的资源加载页面。并且对比新的manifest文件和旧的manifest文件，如果未更改，就不做任何操作了。如果更改了，就重新下载文件中的资源并离线存储。

离线状态时，就直接使用离线资源。

html5中manifest特性测试

HTML <html> manifest 属性

HTML5 manifest缓存为什么我用就这么多坑

傻傻分不清的Manifest

HTML5 manifest离线缓存