您的位置：首页 > Web前端 > HTML5

html5 manifest缓存

2016-12-13 21:52 295 查看

html5 manifest缓存

html5给予了一个很好的webapp开发环境，有些时候我们会希望我们的应用像原生应用一般能被完全离线访问，而不同于我们所说的缓存优化，那我们就需要使用到html5 提供的mainfest标签，具体用法如下

index.html

<!DOCTYPE html>
<html lang="en" manifest="manifest.appcache">
<head>
<meta charset="UTF-8">
<title>APP CACHE</title>
<link rel="stylesheet" href="needCache.css">
<link rel="stylesheet" href="noCache.css">
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
window.applicationCache.addEventListener('updateready', function(){
console.log('updateready!');
window.applicationCache.swapCache();
});
</script>
</html>

/manifest.appcache

CACHE MANIFEST
#version 1.0
CACHE:
needCache.css
NETWORK:
*

像上面这样在html标签中添加manifest属性指向离线配置文件即可，其中的配置项的意思如下：

关于index.manifest文件，基本格式为三段： CACHE， NETWORK，与 FALLBACK，其中NETWORK和FALLBACK为可选项，而第一行CACHE MANIFEST为固定格式，必须写在前面。

CACHE:（必须）

标识出哪些文件需要缓存，可以是相对路径也可以是绝对路径。例如：aa.css，http://www.baidu.com/aa.js.

NETWORK:（可选）

这一部分是要绕过缓存直接读取的文件，可以使用通配符＊，,也就是说除了上面的cache文件，剩下的文件每次都要重新拉取。例如＊，login.php。

FALLBACK:（可选）

指定了一个后备页面，当资源无法访问时，浏览器会使用该页面。该段落的每条记录都列出两个 URI—第一个表示资源，第二个表示后备页面。两个 URI 都必须使用相对路径并且与清单文件同源。可以使用通配符。例如*.html /404.html（所有html页面都替换为404页面）。

在此需要注意的：

浏览器限制了每个站点的缓存大小，通常为5MB

修改被缓存的文件后，需要同时修改manifest文件才能使缓存起作用

想要整个应用都能离线访问一定要把NETWORK的选项置空，但并不一定要把所有资源都放在CACHE上（经过简单的chrome offline测试过，如有不同的现象望提出）

测试离线缓存需要使用服务器端访问，如果使用webstorm等直接访问，并不能真正测试manifest

建议使用FALLBACK，可以增加用户体验

在不使用上面的js代码的时候，需要刷新两次才能看到改变的效果，这个也会妨碍到缓存的更新，建议- 配合上面的代码一同使用

站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问

如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存

参考资料

HTML5 离线缓存-manifest简介

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5

相关文章推荐

新的分享

章节导航