离线存储manifest

作用

  • 用户可以离线访问你的内容
  • 提高访问速度
  • 仅仅加载被修改过的资源,避免同一资源对服务器多次请求,降低服务器访问压力

实现

  1. 在 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 文件

参考链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容