H5使用Manifest离线缓存

最新推荐文章于 2023-01-10 11:56:00 发布

培根芝士

最新推荐文章于 2023-01-10 11:56:00 发布

阅读量544

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/watson2017/article/details/103424985

HTML5 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了HTML5离线缓存机制，包括MIMEtype声明、manifest文件的引入及语法规范，以及缓存更新机制。阐述了如何通过manifest文件实现网页资源的离线可用性，确保在网络不稳定或断网情况下，用户仍能访问到完整的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. MIME type 声明

首先，因为manifest文件必须是一个MIME type为text/cache-manifest类型的存在。文件后缀名可以自定义（建议为.appcache）所以我们需要现在服务端将.appcache后缀的文件类型声明为text/cache-manifest。以apache为例，我们需要在httpd.conf中加上：

AddType text/cache-manifest .appcache

2. 在HTML文件中引入manifest文件

<!-- clock.html -->
<!DOCTYPE html>
<html manifest="clock.appcache">

其中manifest文件的后缀名必须为.appcache，并且和引入该manifest的页面同源

3. manifest文件语法

CACHE MANIFEST
#version 1.0
CACHE:
style/default.css
images/sound-icon.png
images/background.png
NETWORK:
*

CACHE MANIFEST：这个是必须的，并且一定要写在manifest文件开头
CACHE：缓存清单列表，此处列出的为需要进行离线缓存的资源文件
NETWORK: 白名单列表，需要与服务端进行交互获取的资源文件，此处必须列出除缓存清单列表以外所有的资源地址（可以使用通配符*星号代替），否则没有列出的资源文件将加载失败

引入manifest的页面，即使没有被列入缓存清单中，仍然会被用户代理缓存。并且无法通过白名单列表去除。

缓存清单的文件列表可以使用绝对路径或绝对URL地址。

4. 缓存如何更新

资源被离线缓存后，无论我们在后端如何更改资源文件，客户端都不会拉取到修改过的文件。

原来，只有当manifest文件被更新后（修改文件任何地方，包括注释等），客户端才会更新离线缓存文件，并且每次都会更新全部的缓存文件，包括没有被修改的资源文件，但一般这些文件都会走304的缓存策略。

另外，在服务端修改manifest文件后，客户端第一次访问页面需要再刷新一次才能获取最新的资源。因为对于浏览器来说,manifest的加载是要晚于其他资源的. 这就导致check manifest的过程是滞后的。发现manifest改变，所有浏览器的实现都是紧随这做静默更新资源，以保证下次pv,应用到更新。