前端培训-中级阶段（23）- Manifest ApplicationCache 应用程序缓存（2019-10-31期）

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

Manifest

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

Manifest 的能力

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

Manifest 如何使用

html 文件部分

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. 前端培训目录、前端培训规划、前端培训计划