HTML5使用manifest缓存

最新推荐文章于 2021-09-20 21:05:39 发布

QQ_286115751

最新推荐文章于 2021-09-20 21:05:39 发布

阅读量1.9k

点赞数 2

文章标签： html5 缓存测试控制台

本文链接：https://blog.csdn.net/qq_35515563/article/details/58585936

版权

因考虑到需要HTML5使用到web缓存网上找到了看到关于manifest方式来进行web本地化的缓存效果。

在自己的项目案例中引用并谈谈自己的感受：

1.首先我们需要在我们的文件目录中新建一个manifest文件“test.manifest”

2.这是一个简单的manifest文件。文件内开始的时候需要“CACHE MANIFEST”是声明这是一个manifest文件。“CACHE:”是操作类型，指我们需要通过它进行前期加载并缓存下来的文件。ps：

CACHE MANIFEST
#test.manifest本文件名字的注释
CACHE:
js/jquery-2.1.4.min.js
js/zepto.js
js/common.js
js/jquery.SuperSlide.2.1.1.js
css/reset.css
css/style.css
css/swiper-3.2.7.min.css
images/2yuan.png
images/10yuan.png
images/30yuan.png
images/50yuan.png
images/100yuan.png
images/300yuan.png
images/bomb.png
images/btn_01.png
images/decorate_M.png
images/explain_btn.png
images/explain_wrap_bg.png
images/font_01.png
images/font_02.png
images/font_03.png
images/font_04.png
images/footer_bg.png
images/fuse.png
images/index_bg.jpg
images/logo.png
images/notice_bg.png
images/on_font_02.png
images/package_btn.png
images/pallet.png
images/spark.png
images/start_btn.png

3.上述步骤完成后，我们要把这个manifest文件在我们需要的html文件中引入。

<!DOCTYPE html>
<html manifest="test.manifest">
<head>
	<meta charset="UTF-8">
	<title>xxxx</title>

	<meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/style.css">
	<script type="text/javascript" src="js/zepto.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
	<script type="text/javascript" src="js/weixin.js"></script>
</head>

这时候我们打开浏览器测试看看~可以看到控制台打印出manifest的工作信息。下列的话说明路径都找到并进行本地化存储了。

当然，manifest的操作类型还有另外的几种：

CACHE:设置后面的文件为缓存
NETWORK:置后面的文件为不缓存（无法设置自身页面）
FALLBACK:置后面的文件错误或不存在的时候使用另一个文件
SETTINGS:可以设置fast或prefer-online两种模式

他们的使用方式和我的截图demo相同，小伙伴可以自行测试看看。

感受：

1.manifest缓存之后的路径文件只有在manifest文件的内容发生变化时才会更新。

2.例如若某个css文件内容修改，但是css文件名又未修改的话，其不会重新刷新加载，manifest引用的依旧是第一次的css文件的内容。非常不利于开发阶段的测试工作。并且该基础的manifest缓存技术个人认为较适合页面不加载后台数据并且后期代码不进行变动的页面。请结合利弊进行使用！

本人前端菜鸟，以上是个人使用HTML5的manifest缓存的个人感受，如有上述内容有错，敬请谅解。

未经过本人许可，请勿私自转载，谢谢！

QQ_286115751

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
HTML5使用manifest缓存

因考虑到需要HTML5使用到web缓存网上找到了看到关于manifest方式来进行web本地化的缓存效果。在自己的项目案例中引用并谈谈自己的感受：1.首先我们需要在我们的文件目录中新建一个manifest文件“test.manifest”2.这是一个简单的manifest文件。文件内开始的时候需要“CACHE MANIFEST”是声明这是一个manifest文件。“CACHE:
复制链接

扫一扫