照常上图,欢迎来到老夫课堂
温馨提示:文章结构如下,阅读完可能需要花费3分钟
一、 AppCache缓存基础知识以及实现原理
二、 AppCache缓存使用步骤
三、 AppCache缓存优缺点以及使用场景
进入正文
一、 AppCache缓存基础知识以及实现原理
什么是AppCache ?
AppCache是应用缓存,可以这用这个功能实现用户离线访问应用,妈妈再也不用担心没有网啦。
核心基础知识有2点:
1.掌握manifest文件配置,使用html的属性加载文件
mainfest文件说明,分为五个部分
- A.CACHE MANIFEST - 固定格式,必须写在前面
- B.VERSION: 1.0.0 版本号 决定缓存是否需要更新
- C.CACHE: 缓存的文件的绝对路径或者相对路径,绝对路径必须是同源
- D.NETWORK: 需要即时从服务器请求的文件通常是会使用通配符 *, * 代表除CACHE以外的文件都进行在线请求
- E.FALLBACK: 缓存请求失败时需要跳转的页面, 一般是失败404页面
2.掌握js的 applicationCache ,以及常用API
- status 缓存的状态
- update() 发起应用缓存下载进程,发起缓存请求
- abort() 取消正在进行的缓存下载
- swapcache() 切换成本地最新的缓存环境
- updateready() 可以监听manifest中列举的文件下载状态等其他API,如果需要了解更多请自行到js里面查看
AppCache的实现原理
1.浏览器访问APPCache缓存是否有资源,有资源直接就返回渲染页面;
- 检查服务器manifest版本是否有更新,如果没有更新就结束;
- 如果manifest版本有更新,就会把manifest指定的文件从服务器全部拉取,并更新到APPCache
4.浏览器第二次访问APPCache缓存直接返回资源渲染
二、 AppCache缓存使用步骤
-
创建缓存清单,新增manifest.appcache文本文件,后缀名可以自定义,建议使用.appcache
CACHE MANIFEST # VERSION 1.0.0 CACHE: ./index.html NETWORK: * FALLBACK: ./error.html
-
<html>标签引用manifest.appcache文件
<html manifest="manifest.appcache"></html>
3.js 监听缓存刷新
window.applicationCache.addEventListener('updateready', function (e) {
// 缓存的状态
if(window.applicationCache.status === window.applicationCache.UPDATEREADY){
//切换成本地最新的缓存环境事件
window.applicationCache.swapCache();
// 刷新页面
window.location.reload();
}
},false);
注意事项:
- 请求的mime-type 必须是 text/cache-manifest
- 必须以“CACHE MANIFEST”固定行开始。
- (#)后面表示注释,和我们常用的注释方式一样
请求缓存之后有可能会用到更新缓存,更新缓存方式如下:
- 更新manifest文件 - 文件版本号
- 通过javascript操作-window.applicationCache.update()
- 清除浏览器缓存-用户手动清除浏览器缓存
三、 AppCache缓存优缺点以及使用场景
AppCache的兼容性:兼容IE9, 老夫重点关注万恶的IE版本,其他都基本兼容
优点:
- 1.完全离线,没有网络也可以使用
- 2.资源被缓存,加载更快
- 3.降低网络请求频率,降低serve负载
缺点:
- 1.含有manifest属性的页面都会被缓存
- 2.更新是建立在manifest文件的更新,文件更新之后才能更新相对应的页面,必须2次刷新
- 3.更新是全局的,是检测版本号全局更新,不能单点更新
- 4.对链接的参数敏感,index.html 与 index.html?type =1 被认为是不同的页面,不同的缓存
使用场景:
-
1.单地址页面
-
2.对实时请求数据不高的业务
-
3.离线webApp
H5系列
Web前端基础篇-HTML-01-BOM浏览器对象模型
Web前端基础篇-HTML-02-HTML的生命周期
Web前端基础篇-HTML-03-事件处理系统
Web前端基础篇-HTML-04-HTML 渲染流程
Web前端基础篇-HTML5-05-最全本地存储总结
Web前端基础篇-HTML5-06-离线缓存AppCache
Web前端基础篇-HTML5-07-浏览器缓存机制