作用
- 用户可以离线访问你的内容
- 提高访问速度
- 仅仅加载被修改过的资源，避免同一资源对服务器多次请求，降低服务器访问压力
实现
- 在 html 标签里通过 manifest 属性引用一个 cache.manefest 文件，该文件里声明了浏览器需缓存的所有文件资源：
<!DOCTYPE html>
<html lang="en" manifest="cache.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
2.关于 chache.manifest 文件的定义：
CACHE MANIFEST
# 注释：上面一句必须
# v1.0.0
# 需要缓存的文件，无论在线与否，均从缓存里获取
CACHE:
cache.js
cache.css
# 不缓存的文件，无论缓存中存在与否，均重新获取
NETWORK:
uncache.js
uncache.css
# 获取不到资源时的备选路径，如 index.html 访问失败，则返回404页面
FALLBACK:
index.html 404.html
关注细节
- cache.manifest 文件的 MIME 类型是 text/cache-manifest
- cache.manifest 文件以CACHE MANIFEST 开头，文件编码格式必须是utf-8
- 引用 cache.manifest 的 html 文档会被默认包含进缓存清单
归纳步骤
- 配置服务器支持 cache.manrfest 的 Content-type: text/cache-manifest
- 编写 cache.manifest 文件
- html 页面应用 cache.manifest 文件
网友评论