HTML5 离线缓存

栏目: Html5 · 发布时间: 6年前

内容简介:第一次加载后将数据缓存,如果没有清除缓存,下一次没有网络也能加载。2.注意:这并不会重新载入应用程序:所有已经载入的html文件、图片、脚本等资源都不会改变。但是,之后的请求将从最新的缓存中获取。这会导致“版本错乱”的问题,因此一般不推荐使用,除非应用程序设计得很好,确保这样的方式没有问题。

离线缓存

applicationCache

第一次加载后将数据缓存,如果没有清除缓存,下一次没有网络也能加载。

使用

1. 使用 manifest 属性,引入 .appcache 文件

  • 每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)
  • manifest 文件的 建议 的文件扩展名是: .appcache
<!DOCTYPE html>
<html lang="en" manifest="demo.appcache">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    </body>
</html>

2. 编写 demo.appcache 文件

  • CACHE MANIFEST 必须的,下面写需要缓存的文件,将在首次下载后进行缓存
  • NETWORK:下面的文件永远不会被缓存,且离线时是不可用的

    可以使用星号来指示所有其他资源/文件都需要因特网连接

    NETWORK:
    *
  • FALLBACK: 如果无法建立因特网连接,则用 "offline.html" 替代 /html5/ 目录中的所有文件,第一个 url 是资源,第二个是替补
CACHE MANIFEST
logo.png
main.js

NETWORK:
index.css

FALLBACK:  
# 访问失败后 重定向
/html5/ /404.html

目前为止就实现了离线缓存

缓存状态

window.applicationCache.status 查看缓存的当前状态

  • 0 == UNCACHED === 未缓存
  • 1 == IDLE === 空闲(缓存为最新状态)
  • 2 == CHECKING === 检查中
  • 3 == DOWNLOADING === 下载中
  • 4 == UPDATEREADY === 更新就绪
  • 5 == OBSOLETE === 缓存过期

相关方法

1. applicationCache.update() 主动更新缓存

//利用定时器隔一定时间自动更新一下缓存
setInterval(function(){
    applicationCache.update();
},10000);

2. swapCache() 所有的请求都从新缓存中获取

注意:这并不会重新载入应用程序:所有已经载入的html文件、图片、脚本等资源都不会改变。但是,之后的请求将从最新的缓存中获取。这会导致“版本错乱”的问题,因此一般不推荐使用,除非应用程序设计得很好,确保这样的方式没有问题。

缓存相关事件

1. updateready当有新的缓存,并更新完以后,触发此事件

window.applicationCache.onupdateready = function(){
    alert("缓存更新完成");
},false);

2. progress有新的缓存,在下载过程中,会间断性触发

event包含:loaded和total。loaded代表当前已经加载完成的文件,total为总共需要更新的文件数

applicationCache.onprogress = function(e){
    alert(applicationCache.status); //3...    3表示正在下载
},false);

3. cached下载完成并且首次将应用程序下载到缓存中时触发

4. updaterady更新完成,下载完成并将缓存中的应用程序更新后触发

触发此事件的时候,用户任然可以看到老版本的应用程序

5. error浏览器处于离线状态,检查清单列表失败

当一个未缓存的应用程序引用一个不存在的清单文件,也会触发此事件

6. obsolete如果一个缓存的应用程序引用一个不存在的清单文件会触发

7. checking正在检查,每次载入一个设置了manifest属性的html文件,浏览器都会触发

8. downloading正在下载

9. noupdate检查更新结束,没有需要更新


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

信息检索导论

信息检索导论

Christopher D.Manning、Hinrich Schütze、Prabhakar Raghavan / 王斌 / 人民邮电出版社 / 201008 / 69.00元

封面图片为英国伯明翰塞尔福瑞吉百货大楼,其极具线条感的轮廓外型优美,犹如水波的流动。其外表悬挂了1.5万个铝碟,创造出一种极具现代气息的纹理装饰效果,有如夜空下水流的波光粼粼,闪烁于月光之下,使建筑的商业氛围表现到极致。设计该建筑的英国“未来系统建筑事物所”,将商场内部围合成一个顶部采光的中庭,配以交叉的自动扶梯,使购物环境呈现出一种凝聚的向心力和商业广告的展示效应。作为英国第二商业城市伯明翰的建......一起来看看 《信息检索导论》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具