页面缓存
问题：当处于断网状态，页面未能加载成功，出现白屏。
解决：1.首先加载404作为过渡，监听页面网络状态，再做跳转
2.缓存页面，当网络断开的时候直接读取缓存
技术实现(1):
window.addEventListener("online", online, false);
window.addEventListener("offline", offline, false);
技术实现(2):
manifest 缓存清单的编写 服务器端的配置修改
1.页面引入缓存清单(声明)
<html manifest="test.manifest">
2.缓存清单的编写 test.manifest
语法(模板)：
CACHE MANIFEST
# v1
# 指明缓存入口
CACHE:
cache.html
# 以下资源必须在线访问
NETWORK:
login.php
# 如果index.php无法访问则用404.html代替
FALLBACK:
/index.php /404.html
位置：
服务器端，参照引入的地址(相对/绝对)
绝对地址时，遵照同源策略
3.服务器端配置修改(此处正对appache修改)
# wtf强烈要求使用google搜索，百度垃圾。stackoverflow秒解。
xampp\apache\conf\mime.types
添加：text/cache-manifest appcache
4.已上配置基本完成，检测配置生效情况。
完成已上配置后，运行页面(服务器状态)。查看控制台
第一次：
Document was loaded from Application Cache with manifest http://localhost/test/test.manifest
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (0 of 1) http://localhost/test/cache.html
Application Cache Progress event (1 of 1)
Application Cache UpdateReady event
第二次：
Document was loaded from Application Cache with manifest http://localhost/test/test.manifest
Application Cache Checking event
Application Cache NoUpdate event
断开服务器 页面显示
5.更新缓存
1.手动删除
2. window.applicationCache.update() 更新
window.applicationCache.swapCache() 切换到新缓存
注：swapCache方法需要在updateready事件触发后调用
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
//缓存更新完毕
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
//切换为最新缓存
window.applicationCache.swapCache();
if (confirm('新版本已经更新完成，是否重新加载?')) {
window.location.reload();
}
}
}, false);
}, false);
status
0 === 未缓存
1 === 空闲（缓存为最新状态）
2 === 检查中
3 === 下载中
4 === 更新就绪
5 === 缓存过期
3. 修改需要缓存的文件同时，修改 .manifest (如版本号 v1.0)。浏览器检测到 .manifest 的值变化后，会自动更新本地缓存
6.事件
updateready 缓存有更新并且更新已经下载完成，这是可以使用ApplicationCache.swapCache()来将应用切换到最新缓存
7.存储位置与清除离线缓存
清除：chrome://appcache-internals/
位置：C:\Users\PVer\AppData\Local\Google\Chrome\User Data\Default (1)
问题：
1.公司项目均是由iframe加载，以下需要检测 iframe 的部分会不会也被缓存起来
iframe 需要对应的添加 ， 同时缓存清单里面的地址需要相对
2.测试带有地址栏参数能不能缓存？
/test/cache/iframe.html#tttt?test=1111 ok
/test/cache/iframe.html?test=1111 no
3.QT 缓存问题
尝试解决：
1.https://www.zhihu.com/question/28887904
如果想启用缓存，需要调用一个函数。
QWebSettings这个类有个函数叫setOfflineWebApplicationCachePath
2.http://blog.youkuaiyun.com/talking12391239/article/details/17114907
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
