HTML5 manifest离线缓存

时间 2019-11-22

原文原文链接

1、基本概念

离线缓存是HTML5新引入的技术，可以让你的Web应用程序指定哪些文件能够缓存在本地，使得你的网络断开时依然能够经过本地的缓存来进行访问浏览。javascript

2、使用方法

1. MIME type 声明

首先，由于manifest文件必须是一个MIME type为text/cache-manifest类型的存在。文件后缀名能够自定义（建议为.appcache）因此咱们须要如今服务端将.appcache后缀的文件类型声明为text/cache-manifest。以apache为例，咱们须要在httpd.conf中加上：css

AddType text/cache-manifest .appcache

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

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

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

3. manifest文件语法

CACHE MANIFEST
# 上面这行是必须的

# 这是一行注释
# 在这个文件中的任何地方均可以添加
# 它们所有都会被忽略
  # 在注释以前能够有空格
  # 但必须是在单行前

# 空行也会被忽略

# 这些列在最开始的文件都是须要被缓存的
# 或者是那些列在"CACHE:"里的， "CACHE"头必须写在这些文件以前，如同
# 下面写好的那样
images/sound-icon.png
images/background.png
# 注意，每一个文件必须单独一行

# 在线白名单中出现的这个文件，它不会被缓存，而且，
# 对该文件的引用，将绕过缓存，老是会
# 从网络中获取目标（或在用户离线时，尝试从网路上获取）
NETWORK:
comm.cgi

# 这是另外一块要缓存的文件，此次只有一个css文件
CACHE:
style/default.css

咱们也能够书写成这样：java

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

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

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

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

开启离线缓存后，咱们能够在chrome中打开f12来看看资源加载有啥区别

能够看出，使用离线缓存后的资源，资源请求的状态码都变为200，而且在size栏中都被标明为(form cache)，加载速度也是显而易见的。后端

4. 缓存如何更新？

资源被离线缓存后，不管咱们在后端如何更改资源文件，客户端都不会拉取到修改过的文件。浏览器

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

另外，在服务端修改manifest文件后，客户端第一次访问页面须要再刷新一次才能获取最新的资源。由于对于浏览器来讲,manifest的加载是要晚于其余资源的. 这就致使check manifest的过程是滞后的。发现manifest改变，全部浏览器的实现都是紧随这作静默更新资源，以保证下次pv,应用到更新。（这一点很蛋疼，但仍是有解决办法，请继续往下看）。网络

5. 离线缓存对象和事件处理

在javascript中咱们能够经过window.applicationCache来访问缓存对象，对象中包含了一个status属性以及若干的待监听的事件处理器。

其中status属性表明的是当前离线应用的状态，它可能的值为：

UNCACHED (0)：未启用离线应用

IDLE (1)：已开启离线应用，但本地缓存的资源是最新的，而且未标记为废弃资源

CHECKING (2)：当前更新缓存的状态为“检查中”

DOWNLOADING (3)：当前更新缓存的状态为“下载资源中”

UPDATEREADY (4)：当前更新缓存的状态为“更新完毕”

OBSOLETE (5)：已开启离线应用，但缓存资源都已标记为废弃

离线缓存事件：

checking：在第一次下载manifest文件时，或者检查是否须要更新时触发

noupdate：manifest文件未修改，不须要下载新的缓存文件时触发

downloading：准备更新缓存以前，或者第一次下载资源以前触发

progress：下载资源时触发，每下载一个资源都会触发一次

cached：页面首次启用离线缓存，而且离线缓存下载完毕时触发

updateready：资源更新完毕时触发

obsolete：加载manifest文件时遇到401或404错误时触发

errorEvent加载manifest文件时遇到401或404错误时触发

这样，咱们就能够经过updateready事件来让离线缓存更新后自动刷新页面了，虽然仍是比较挫：

applicationCache.addEventListener(‘updateready’, function(){
       location.href=”test.html”;
}, false);

6. 离线缓存的下线

要将离线缓存下线，咱们只须要将服务端的manifest文件删除便可，同时也要将HTML中的 manifest="manifest.appcache" 删除（不删也能够，会在console控制台报错，但不会影响页面访问），删除后用户再第一次访问仍是原来的缓存页面，还须要再刷新一次。。。蛋疼吧。