manifest离线缓存

HTML5提供一种应用程序缓存机制manifest，使得基于web的应用程序可以离线运行。开发者可以使用Application Cache (AppCache)接口设定浏览器应该缓存的资源并使得离线用户可用。在处于离线状态时，应用也能正常加载与工作。用户可以在离线状态下浏览网站内容, 减轻服务器的负载, 浏览器只会下载在服务器上发生改变的资源。

应用程序缓存的优点

离线浏览: 用户可以在离线状态下浏览网站内容。
更快的速度: 因为数据被存储在本地，所以速度会更快。
减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源
manifest只会缓存静态资源文件, 接口返回的数据还需要使用localstorage进行缓存, 通常将manifest与接口返回的数据进行本地存储才能达到离线访问

Application Cache的特点

Manifest文件有变化才更新
一次必须更新Manifest中的所有文件, 有一个失败则全抛弃
更新内容下一次访问才生效

manifest使用

在页面头部引入manifest文件当第一次打开该页面时，浏览器会解析该页面中mainfest文件，并缓存里面列举的资源
1
2
<html manifest="manifest/recharge.manifest">
</html>

编写manifest缓存清单文件

//manifest/clientHome.manifest
CACHE MANIFEST
#VERSION v6.0.1
#DATE 2020-3-2 14:00:00
CACHE:
../../css/public/public.css
../../css/public/swiper.min.css

../../images/recharge/sprite.png
../../images/recharge/icon-checked.png

../../js/public/autoScale.js
../../js/jquery/jquery.min.js

NETWORK:
*

FALLBACK:
*.html /offline.html

manifest文件组成
1. CACHE MANIFEST 固定格式必须在首行
2. CACHE: (必选)表示需要离线存储的资源列表，在首次加载后会被浏览器缓存到本地可以是相对路径也可以是绝对路径
3. NETWORK: (可选)在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储, 离线时不可用
4. FALLBACK: (可选)表示如访问资源失败，就使用第二个资源来替换它
5. 以#开头的是注释可以是版本号或时间戳一般用更改版本号或时间戳来告诉浏览器更新manifest
manifest文件需要配置正确的MIME-type即text/cache-manifest。必须在服务器上进行配置。

manifest加载过程

manifest

浏览器后次加载页面发现html头部有manifest属性,会请求manifest文件,将manifest中的文件缓存到本地
浏览器在有缓存的情况下, 离线访问应用时, 会直接使用离线缓存的资源
如果已经访问过应用且资源已经离线存储过, 首次加载页面时,会先进行读取缓存, 如果有缓存返回cache中的资源先显示页面,再去server上检查manifest缓存文件是否有更新,无更新则不作任何操作,如果有更新,会下载更新的文件,然后更新app cache.等到用户第二次加载页面时, 才会看到更新后的内容.

manifest使用过程中注意问题

如果服务器对离线的资源进行了更新，那么必须更新manifest文件之后这些资源才能被浏览器重新下载，如果只是更新了资源而没有更新manifest文件的话，浏览器并不会重新下载资源，也就是说还是使用原来离线存储的资源。
对于manifest文件进行缓存的时候需要十分小心，因为可能出现一种情况就是你对manifest文件进行了更新，但是http的缓存规则告诉浏览器本地缓存的manifest文件还没过期，这个情况下浏览器还是使用原来的manifest文件，所以对于manifest文件最好不要设置缓存。
浏览器在下载manifest文件中的资源的时候，它会一次性下载所有资源，如果某个资源由于某种原因下载失败，那么这次的所有更新就算是失败的，浏览器还是会使用原来的资源。
在更新了资源之后，新的资源需要到下次再打开页面才会生效，如果需要资源马上就能生效，那么可以使用window.applicationCache.swapCache()方法来使之生效，出现这种现象的原因是浏览器会先使用离线资源加载页面，然后再去检查manifest是否有更新，所以需要到下次打开页面才能生效。

applicationCache缓存中的事件

事件名称	解释
oncached	当离线资源存储完成后触发
onchecking	当浏览器对离线存储资源进行检查的时候触发
ondownloading	当浏览器开始下载离线资源的时候触发
onerror	当缓存资源失败的时候触发
onnoupdate	浏览器检查manifest文件没有更新时触发
onobsolete	过时的
onprogress	当浏览器下载每一个资源的时候都会触发一次
onupdateready	浏览器更新离线资源完成的时候触发

// 离线资源存储完成之后触发
window.applicationCache.addEventListener('cached', function () {
  console.log('cached');
});

// 离线存储资源进行更新检查的时候会触发 每次刷新页面都会被触发，包括第一次加载
window.applicationCache.addEventListener('checking', function () {
  console.log('checking');
});

// 开始下载离线资源的时候会触发
window.applicationCache.addEventListener('downloading', function () {
  console.log('downloading');
});

// 下载每一个资源的时候会触发
window.applicationCache.addEventListener('progress', function () {
  console.log('progress');
});

// 离线资源更新完成之后
window.applicationCache.addEventListener('updateready', function () {
  console.log('updateready');
});

// 检查更新之后发现没有资源更新的时候触发
window.applicationCache.addEventListener('noupdate', function () {
  console.log('noupdate');
});

// obsolete
window.applicationCache.addEventListener('obsolete', function () {
  console.log('obsolete');
});

// error
window.applicationCache.addEventListener('error', function () {
  console.log('error');
});

如何更新缓存

用户清空浏览器缓存
manifest 文件被修改 利用浏览器缓存机制在第二次访问manifest有更新的页面时更新页面内容

由程序来手动更新应用缓存

window.applicationCache.addEventListener('updateready', function(e) {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    window.applicationCache.swapCache()
    window.location.reload()
  }
}, false)