1.什么是离线缓存
离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示。
2.离线缓存的优势
在没有网络的时候可以访问到缓存的对应的站点页面,包括html,js,css,img等等文件
在有网络的时候,浏览器也会优先使用已离线存储的文件,返回一个200(from cache)头。这跟HTTP的缓存使用策略是不同的
资源的缓存可以带来更好的用户体验,当用户使用自己的流量上网时,本地缓存不仅可以提高用户访问速度,而且大大节约用户的使用流量。
如何实现
以下内容务必在服务器中完成
创建一个html
内容如下
在同一级中创建demo.appcache
demo.appcache的内容如下
在服务器中添加 text/cache-manifest appcache
位置在 里面寻找mime.types
在x-conference/x-cooltalk下面添加text/cache-manifest appcache
格式如下
完成后在控制台效果如下:
提示:可能会因为版本等问题在控制台无法输出结果
可用其他方法来测试是否缓存成功
1.同以上内容一样
2.随后创建一个css文件 引入
3.将原来的css隐藏
4.将网线去掉 点击刷新 看网页是否会发生变化
如果发生变化则说明没有缓存成功
如果没有发生变化就证明已经缓存成功