HTML5的离线缓存，使用、原理
... 2025-7-10 大约 4 分钟
VuePress 使用 Cache storage 来进行离线缓存
浏览器 Application 中 Cache Storage 及 Application Cache 简介 (opens new window)
本文是基于 Application Cache 实现的离线缓存
# 什么是应用程序缓存（Application Cache)
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
离线缓存：
- 离线缓存可以将站点的一些文件缓存到本地，它是浏览器自己的一种机制，
- 将需要的文件缓存下来，以便后期即使没有连接网络，被缓存的页面也可以展示。
- 即使有网络，优先本地存储的资源
# 应用程序缓存为应用带来的优势
- 离线浏览 - 用户可在应用离线时使用它们
- 在没有网络的时候可以访问到缓存的对应的站点页面，包括 html，js，css，img 等等文件
- 速度 - 已缓存资源加载得更快
- 在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个 200（from cache）头。这跟 HTTP 的缓存使用策略是不同的
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
- 资源的缓存可以带来更好的用户体验，当用户使用自己的流量上网时，本地缓存不仅可以提高用户访问速度，而且大大节约用户的使用流量。
# 如何实现离线缓存
# Cache Manifest 基础
如需启用应用程序缓存，请在文档的
标签中包含 manifest 属性：<!DOCTYPE html>
<html manifest="xxx.appcache">
...
</html>
1
2
3
4
2
3
4
Appcache 是一个控制缓存文件
在同目录下创建 xxx.appcache 文件，幷添加配置项
# Manifest 文件
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面)
CACHE MANIFEST
第一行，CACHE MANIFEST，是必需的：
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
上面 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，一个 JavaScript 文件
NETWORK
NETWORK:
login.php
可以使用星号来指示所有其他资源/文件都需要因特网连接：
NETWORK:
*
FALLBACK
FALLBACK:
/html/ /offline.html
第一个 URI 是资源，第二个是替补。
# 更新缓存
一旦应用被缓存，它就会保持缓存直到发生下列情况：
- 用户清空浏览器缓存
- manifest 文件被修改
- 由程序来更新应用缓存
注意事项
- 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
- 如果 manifest 文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。
- 引用 manifest 的 html 必须与 manifest 文件同源，在同一个域下。
- FALLBACK 中的资源必须和 manifest 文件同源。
- 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
- 站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问。
- 当 manifest 文件发生改变时，资源请求本身也会触发更新
# 配置
在服务器端将.appcache 文件的 mime 类型配置成 text/cache-manifest
# 浏览器对 HTML5 的离线储存资源的管理和加载
在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果 是第一次访问 app ，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行 离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资 源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发 生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存 储。 离线的情况下，浏览器就直接使用离线存储的资源