乐趣区

前端培训中级阶段23-Manifest-ApplicationCache-应用程序缓存20191031期

jiezi

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

Manifest

一种应用缓存机制，基于它可以实现 离线访问 。
已被 web 标准废弃 ，当然浏览器还是支持的。
https://www.caniuse.com/#feat=mdn-html_elements_html_manifest
测试地址 - 打印在控制台中

Manifest 的能力

  1. 离线访问
  2. 更快的加载速度
  3. 更低的流量损耗

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 缓存状态

  1. _UNCACHED_(未缓存): 一般用于表示未指定 manifest 文件
  2. _IDLE_(空闲): 用于表示已指定 manifest 文件，并已缓存可用
  3. _CHECKING_(检查): 正在检查是否存在更新.
  4. _DOWNLOADING_(下载): 清单更新后, 重新下载全部资源。
  5. _UPDATEREADY_(更新就绪): 新版本的缓存下载完成, 全部就绪, 随即触发事件 updateready。
  6. _OBSOLETE_(废弃): 应用缓存已被废弃。

applicationCache

是用于操作应用缓存的接口。

  1. status 对应缓存状态。
  2. on* 对应所有可以监听的事件，也对应各个阶段
  3. update() 为主动触发更新，当然这个更新也是去检测 manifest 文件。
  4. abort() 为主动终止更新
  5. 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)}

注意事项

  1. manifest 缓存与浏览器缓存不一样
  2. 不同 manifest 缓存的也不一样
  3. 更新机制依赖于 manifest 文件的更改
  4. 因为 manifest 缓存依赖 manifest 更改，所以尽可能少的缓存资源，否则每次更新都会大量更新资源。
  5. manifest 会缓存当前的 HTML。

微信公众号：前端 linong

参考文献

  1. 前端培训目录、前端培训规划、前端培训计划
退出移动版