h5 离线存储 manifest

（一）背景

通过离线存储，我们通过把需要离线存储的文件列入manifest的配置文件中，这样即使在离线的情况下，用户也可以正常看见网页

（二）配置

（1）在需要缓存的页面上加上 manifest="缓存配置文件名称" 最好将文件放在根目录下

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

（2）在当前文件夹根目录，新建cache.manifest，

manifest文件，基本格式为三段： cache， network与 fallback，其中network和fallback为可选项。

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

以#号开头的是注释，可以是版本号，时间戳等等。一般会在这写个版本号，用来在缓存的文件更新时，更改manifest，版本号作用：浏览器已经缓存下来的缓存，只有当manifest文件发生了改变才会更新本地缓存，即使你的代码发生了更新，本地浏览器也是不知道的，所以每次发布代码时你可以更改下#后面的信息比如版本号或者时间，告诉浏览器相应的更新本地缓存。

1、cache（必须）标识出哪些文件需要缓存，可以是相对路径也可以是绝对路径。这里列举出来的文件，当第一次加载下来时，会被浏览器缓存在本地。

2、network ：表示它下面列出来的资源只有在在线的情况下才能访问，这些资源不会被离线存储。离线情况下无法使用这些资源，network 联网的时候才能访问

4、fallback （可选）当资源无法访问时，浏览器使用后备资源去替代。第二个表示后备页面。两个 uri 都必须使用相对路径并且与清单文件同源。可以使用通配符。

CACHE MANIFEST
    #v0.1
    CACHE:
      js/index.js
      css/index.css
    NETWORK:
      images/logo.png
    FALLBACK:
      *.html /404.html

（三）查看

在 Application ---- Application cache 里可以看到

（1）需要启动服务端，才能缓存成功

（2）https 开头的网址可以看到 Application cache

h5 离线存储 manifest

猜你喜欢