Manifest
一种应用缓存机制,基于它可以实现离线访问。
已被web标准废弃,当然浏览器还是支持的。
https://www.caniuse.com/#feat=mdn-html_elements_html_manifest
Manifest 的能力
- 离线访问
- 更快的加载速度
- 更低的流量损耗
Manifest 如何使用
html 文件部分
<html manifest="1190000020779678.appcache>
在 <html>
标签上指定 manifest
属性,值为文件地址。
manifest 文件部分
CACHE MANIFEST # v1.0.0 /static/js/public_header.js /static/js/falseReport.js /static/js/utils.js /static/css/normalize-8.0.0.css /static/img/wx-linong.jpg NETWORK: * FALLBACK: / /404.html
CACHE MANIFEST
需要缓存的请求。
NETWORK:
需要访问网络的请求。可以是使用通配符*
,也就是除了需要缓存的都访问网络。
FALLBACK:
为异常请求处理,使用替代。
manifest 缓存状态
- _UNCACHED_(未缓存): 一般用于表示未指定 manifest文件
- _IDLE_(空闲): 用于表示已指定 manifest文件,并已缓存可用
- _CHECKING_(检查): 正在检查是否存在更新.
- _DOWNLOADING_(下载): 清单更新后, 重新下载全部资源。
- _UPDATEREADY_(更新就绪): 新版本的缓存下载完成, 全部就绪, 随即触发事件
updateready
。
- _OBSOLETE_(废弃): 应用缓存已被废弃。
applicationCache
是用于操作应用缓存的接口。
status
对应缓存状态。
on*
对应所有可以监听的事件,也对应各个阶段
update()
为主动触发更新,当然这个更新也是去检测manifest
文件。
abort()
为主动终止更新
swapCache()
将cache源切换到最新版本。比如一个页面开始只缓存 a.js。调用update()
之后,新增了 b.js,但是默认规则下并无 b.js。所以可以使用swapCache()
来切换。
applicationCache 的事件监听
applicationCache.oncached = function(){console.log('oncached', arguments)} applicationCache.onchecking = function(){console.log('onchecking', arguments)} applicationCache.ondownloading = function(){console.log('ondownloading', arguments)} applicationCache.onerror = function(){console.log('onerror', arguments)} applicationCache.onnoupdate = function(){console.log('onnoupdate', arguments)} applicationCache.onobsolete = function(){console.log('onobsolete', arguments)} applicationCache.onprogress = function(){console.log('onprogress', arguments)} applicationCache.onupdateready = function(){console.log('onupdateready', arguments)}
注意事项
- manifest 缓存与浏览器缓存不一样
- 不同 manifest 缓存的也不一样
- 更新机制依赖于 manifest 文件的更改
- 因为 manifest 缓存依赖 manifest 更改,所以尽可能少的缓存资源,否则每次更新都会大量更新资源。
- manifest 会缓存当前的 HTML。