文档章节

页面离线缓存

S
 Sinxc
发布于 2017/08/13 14:46
字数 720
阅读 11
收藏 0

页面缓存

问题:当处于断网状态,页面未能加载成功,出现白屏。

解决: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.csdn.net/talking12391239/article/details/17114907

© 著作权归作者所有

S
粉丝 0
博文 2
码字总数 2184
作品 0
南京
私信 提问
如何在SSR架构中实现离线可用?(一)

本系列文章将以一个实际项目作为研究对象,探讨离线可用这个 PWA 的重要特性在 SSR 架构中的应用思路。最后结合 Vue SSR 进行实际应用。 本文作为第一部分,以 PWA-Directory_ 为例。这是一个...

BrilliantOpenWeb
2017/11/07
0
0
H5应用程序缓存 - Cache manifest

一、作用 离线浏览 - 根据文件规则把资源缓存在本地,脱机依然能够访问资源,联网会直接使用缓存在本地的文件。优化加载速度,节约服务器资源。 二、适用场景 正如 manifest 英译的名字:离线...

后除
2018/06/02
0
0
html5离线储存,application cache,manifest使用体验

最近在APP里新增一个论坛模块,为了快速地完成,决定将整个论坛模块做成WEB APP,WEB APP最致命的就是用户体验问题,页面跳转和过多的请求,大大影响了加载速度和用户体验,这时候我想到了H...

pureboys
2013/09/07
2.4K
0
浅谈如何实现HTML5的离线存储

关于HTML5离线存储原理及实现,笔者找到一篇介绍离线缓存的,感觉比之前看到的解释的更透彻,新的知识点记录如下: 大家都知道Web App是通过浏览器来访问的,所以离线状态下是无法使用app的。...

小欣妹妹
2018/04/19
22
0
HTML5离线缓存

HTML5的离线存储是基于一个新建的文件的,通过这个文件上的离线存储资源,这些资源就会像cookie一样被存储了下来,之后当网络在处于离线状态下时,浏览器会通过离线存储的数据进行页面展示。...

学习也休闲
2016/04/12
81
0

没有更多内容

加载失败,请刷新页面

加载更多

从AnnotationTransactionAspect开始rushSpring事务

0. Spring 事务 with LTW 0.1. Spring 事务 With LTW的原因: Pure Proxy-base mode有缺陷,其失效原因分析及使用方法及运行机制(LoadTimeWeaverBeanDefinitionParser和 AspectJWeavingEnable......

Aruforce
17分钟前
3
0
mac 安装protobuf 2.5.0

下载安装包 目前protobuf的最新版本是3.9.1,但是hadoop等好多框架依然依赖的是2.5.0,因此,最好不要安装最新的。 https://github.com/protocolbuffers/protobuf/releases/tag/v2.5.0 编译安...

hexiaoming123
21分钟前
4
0
Qt编写自定义控件52-颜色下拉框

一、前言 这个控件写了很久了,元老级别的控件之一,开发之初主要是自己的好几个项目要用到,比如提供一个颜色下拉框设置对应的曲线或者时间颜色,视频监控项目中经常用到的OSD标签设置,这个...

飞扬青云
29分钟前
4
0
Shell脚本应用 – for、while循环语句

通过Shell脚本应用(二)学习到了if条件条件语句的使用方法等。Shell作为一种脚本编程语言,同样了包含了循环,分支等其他程序控制结构,从而能够轻松完成更加复杂、强大的功能。我们今天就来...

Linux就该这么学
34分钟前
5
0
Sqoop之导入到Hive时特殊字符导致数据变乱

问题是这样的: Sqoop从关系型数据库导入数据到Hive时,发现数据量增多了,查找之后发现是由于源数据中含义\r\t\n特殊字符的数据,这样Hive遇到之后就将其视为换行,所以导入到Hive后数据条数...

克虏伯
36分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部