HTML5新增离线缓存Manifest

Jackson Mseven

已于 2023-06-20 18:21:47 修改

阅读量378

点赞数

分类专栏： HTML 文章标签： html 缓存前端 html5 开发语言

于 2023-06-19 21:43:19 首次发布

本文链接：https://blog.csdn.net/Jackson_Mseven/article/details/131295721

版权

4 篇文章 0 订阅

订阅专栏

为什么要引入Manifest？

在 HTML5 之前都是无连接的，即必须要联网才能访问，这对于 PC 来说问题并不大，但是对于移动端来说影响很大，比如：坐高铁过隧道时突然网络断开，此时你正通过网站看一本书，网站就会立即崩溃，体验很不好。

为了解决这个问题，因此 HTML5 引入了 Cache Manifest 文件。

Cache Manifest 是一个后缀名为 .minifest 的文件，在文件中定义那些需要缓存的文件，支持 Cache Manifest 的浏览器，会将按照 .manifest 文件的规则，将文件保存在本地，从而在没有网络链接的情况下，也能访问页面。

当第一次正确配置 app cache 后，再次访问该应用时，浏览器会首先检查 .manifest 文件是否有变动，如果有变动就会把相应的变动更新下来，同时改变浏览器里面的 app cache，如果没有变动，就会直接把 app cache 的资源返回，基本流程是这样的。

所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。可以去can i use查看。

HTML5 中的 html 标签新增了一个 manifest 属性，可以用来指定当前页面的 .manifest 文件。

创建一个和 html 文件同名的 manifest 文件，比如页面为 index.html，那么可以建一个 index.manifest 的文件，然后给 index.html 的 html 标签添加如下属性即可：

<html lang="en" manifest="index.manifest">

一个典型的 .manifest 文件代码结构像下面这样：

CACHE MANIFEST
# version 1.3

CACHE:
    index.css

NETWORK:
	*

.manifest 文件，基本格式为三段： CACHE、NETWORK、 FALLBACK，其中 CACHE 为必填项，NETWORK 和 FALLBACK 为可选项。

而第一行 CACHE MANIFEST 为固定格式，必须写在前面。

以 # 号开头的是注释，一般会在第二行写个版本号，用来在缓存的文件更新时，更改 .manifest 的作用，可以是版本号，时间戳或者 md5 码等等。

CACHE 用于标识哪些文件需要缓存，可以是相对路径也可以是绝对路径。

如下：

CACHE:
    index.css
    D:/index.css

NETWORK 用于标识要绕过缓存直接读取的文件，可以使用通配符＊（表示全部都直接读取）。

如下：

NETWORK:
	*

FALLBACK 用于指定了一个后备页面，当资源无法访问时，浏览器会使用该页面。

该段落的每条记录都列出两个 URL，第一个表示要替代的资源，第二个表示后备页面。两个 URI 都必须使用相对路径并且与清单文件同源。可以使用通配符。

如下：

# 用 404.html 替代 所有的 html 文件
FALLBACK:
	*.html /404.html

浏览器是怎么对离线的资源进行管理和加载的呢？

这里需要分两种情况来讨论：

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 .manifest 文件。
- 如果是第一次访问 app，那么浏览器就会根据 .manifest 文件的内容下载相应的资源并且进行离线存储。
- 如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 .manifest 文件与旧的 .manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。

如果 .manifest 文件内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器会继续全部使用老的缓存
.manifest 中列出的文件都要同源，在一个域下
即使某些 html 页面没有设置 .manifest 属性，如果其在列出的缓存文件中，那么对它进行请求时，也会直接从缓存中访问
如果离线资源发生了更改，需要通过更新 .manifest 文件重新下载新的离线资源，否则会使用原来的离线资源
.manifest 文件最好不要设置缓存，因为如果对 .manifest 文件进行了更新，但是由于 .manifest 文件设置了缓存，此时 hppt 会认为 .manifest 文件还未过期，并不会下载新的离线资源

关注