web离线缓存

web应用程序本地缓存:通过每个页面的manifest文件来管理;

manifest

:文件是一个简单的文件夹,在该文件中,列举出需要被缓存或不需要缓存的文件资源的文件名称,文件的资源路径;可以为每个页面单独指定一个manifest文件,也可以为web应用程序指定总的manifest文件;
cache:指定需要缓存在本地的资源文件;
network:指定不进行本地缓存的文件 只有当客户端与服务器建立连接时才能访问;
fallback:指定两个资源文件,第一个在线访问时使用的资源文件,第二个不在线访问的资源文件;

浏览器和服务器交互过程

首次访问http://luling(index.html 主页 ,manifest文件为index.manifest文件请求缓存index.html,hello.js,hello1.jpg)
1.浏览器请求http://luling;
2.服务器返回给浏览器index.html;
3.浏览器解析index.html网页,请求网页上的所有资源(html,css,js,图片,以及manifest文件);
4.服务器返回浏览器所有资源;
5.浏览器处理manifest文件,请求需要被缓存的资源;
6.服务器返回浏览器需要请求的缓存资源;
7.浏览器对缓存资源进行更新;存入缓存 触发事件通知本地缓存被更新;
再次访问http://luling(manifest没有变化)
1.浏览器请求http://luling
2.浏览器发现index.html在缓存中有;
3.浏览器解析index.html网页,使用缓存中的资源
4.浏览器请求manifest文件
5.服务器返回304给浏览器;
再次访问http://luling(manifest发生变化)
1.浏览器请求http://luling
2.浏览器发现index.html在缓存中有;
3.浏览器解析index.html网页,使用缓存中的资源;
4.浏览器请求manifest文件;
5.服务器返回给浏览器更新过的manifest文件;
6.浏览器解析manifest文件,请求所有要缓存的资源;
7.服务器返回浏览器所有要缓存的资源;
8.浏览器缓存所有新的资源,触发事件通知本地缓存被更新;

applicationCathe对象代表了本地缓存
applicationCathe对象的updateready事件通知本地缓存已经被更新
applicationCathe对象swapCache手工执行本地缓存的更新;
1.只能在updateready事件调用后触发,updateready事件只能在manifest文件更新,并且已经下载完成了anifest要求的所有资源;
2.如果不写swapCathe方法,本队缓存将在下一次页面刷新被更新;
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值