`
流浪鱼
  • 浏览: 1632843 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML5的离线存储applicationCache

 
阅读更多

html5离线应用接口规范

网址:https://html.spec.whatwg.org/#applicationcache

interface ApplicationCache : EventTarget {

  // update status
  const unsigned short UNCACHED = 0;
  const unsigned short IDLE = 1;
  const unsigned short CHECKING = 2;
  const unsigned short DOWNLOADING = 3;
  const unsigned short UPDATEREADY = 4;
  const unsigned short OBSOLETE = 5;
  readonly attribute unsigned short status;

  // updates
  void update();
  void abort();
  void swapCache();

  // events
  attribute EventHandler onchecking;
  attribute EventHandler onerror;
  attribute EventHandler onnoupdate;
  attribute EventHandler ondownloading;
  attribute EventHandler onprogress;
  attribute EventHandler onupdateready;
  attribute EventHandler oncached;
  attribute EventHandler onobsolete;
};

 

1.离线资源的缓存

离线应用将使用manifest类型的文件作为需要配置缓存文件的配置文件

2.ApplicationCache

ApplicationCache对象记录着web应用程序的缓存状态,开发者可以通过该缓存状态手动更新资源文件的缓存。

3.在线状态监测

html5标准提供online方法用于检测当前网络是否在线。

window.navigator.online

监听事件

applicationCache.addEventListener('updateready',function(){
    alert("离线文件下载完毕");
});

 包含的事件名为:

checking

noupdate

downloading

progress

cached

updateready

obsolete

error



 

 

 

 

 

 

 

 

 

 

 

  • 大小: 462.6 KB
分享到:
评论

相关推荐

    HTML5离线存储

    我通过Application Cache+localStorage+web sql构建了一个离线应用,同时我也把逻辑按照Application cache+localStorage+indexedDB写了一次,有兴趣的同学可以下载,同时代码...可以让大家很快理解HTML5离线存储技术

    HTML5实现应用程序缓存(Application Cache)

    为什么要使用Application Cache技术? 在HTML5之前,我们需要接入网络才能访问,这毫无疑问是网站多...离线存储技术 实际开发中,主要是使用Application Cache和LocalStorage技术,它们来自HTML5技术。 (1)Applicati

    moodoco:MooTools Core 等的 HTML5 离线文档

    它使用从存储库中获取所有 Markdown 文档文件,并将它们离线存储在。 然后,页面和相关的 CSS/JS 文件通过离线缓存。 截至目前,Firefox 3.5+、Chrome 4+、Safari 4+、Opera 10.5+ 和 Internet Explorer 8+ 支持 ...

    html5应用缓存_动力节点Java学院整理

    什么是Application Cache HTML5引入了应用程序缓存技术,意味着web...HTML5提出了两大离线存储技术:localstorage与Application Cache,两者各有应用场景;传统还有离线存储技术为Cookie。 经过实践我们认为localsto

    HTML5高级程序设计

    10.3.4 检查applicationcache的支持情况 210 10.3.5 为update按钮添加处理函数 211 10.3.6 添加geolocation跟踪代码 211 10.3.7 添加storage功能代码 212 10.3.8 添加离线事件处理程序 212 10.4 小结 213 第11...

    完整版《HTML5高级程序设计》2

    10.3.4 检查applicationCache的支持情况 210 10.3.5 为Update按钮添加处理函数 211 10.3.6 添加Geolocation跟踪代码 211 10.3.7 添加Storage功能代码 212 10.3.8 添加离线事件处理程序 212 10.4 小结 213 第11章 ...

    完整版《HTML5高级程序设计》5

    10.3.4 检查applicationCache的支持情况 210 10.3.5 为Update按钮添加处理函数 211 10.3.6 添加Geolocation跟踪代码 211 10.3.7 添加Storage功能代码 212 10.3.8 添加离线事件处理程序 212 10.4 小结 213 第11章 ...

    完整版《HTML5高级程序设计》4

    10.3.4 检查applicationCache的支持情况 210 10.3.5 为Update按钮添加处理函数 211 10.3.6 添加Geolocation跟踪代码 211 10.3.7 添加Storage功能代码 212 10.3.8 添加离线事件处理程序 212 10.4 小结 213 第11章 ...

    HTML5程序设计(第2版).[荷]Peter Lubbers(带详细书签).pdf

    《深入HTML5编程(第 2版)》后探索了离线Web应用并展望了HTML5未来的发展前景。  《深入HTML5编程(第 2版)》面向有一定经验的Web应用开发人员,对HTML5及未来Web应用技术发展有浓厚兴趣的读者也可以学习参考。 第1...

    HTML5高级程序设计.part5

    10.3.4 检查applicationCache的支持情况 210 10.3.5 为Update按钮添加处理函数 211 10.3.6 添加Geolocation跟踪代码 211 10.3.7 添加Storage功能代码 212 10.3.8 添加离线事件处理程序 212 10.4 小结 213 第11...

    完整版《HTML5高级程序设计》3

    10.3.4 检查applicationCache的支持情况 210 10.3.5 为Update按钮添加处理函数 211 10.3.6 添加Geolocation跟踪代码 211 10.3.7 添加Storage功能代码 212 10.3.8 添加离线事件处理程序 212 10.4 小结 213 第11章 ...

    HTML5高级程序设计.part4

    10.3.4 检查applicationCache的支持情况 210 10.3.5 为Update按钮添加处理函数 211 10.3.6 添加Geolocation跟踪代码 211 10.3.7 添加Storage功能代码 212 10.3.8 添加离线事件处理程序 212 10.4 小结 213 第11...

    HTML5高级程序设计.part1

    10.3.4 检查applicationCache的支持情况 210 10.3.5 为Update按钮添加处理函数 211 10.3.6 添加Geolocation跟踪代码 211 10.3.7 添加Storage功能代码 212 10.3.8 添加离线事件处理程序 212 10.4 小结 213 第11...

    HTML5高级程序设计.part2

    10.3.4 检查applicationCache的支持情况 210 10.3.5 为Update按钮添加处理函数 211 10.3.6 添加Geolocation跟踪代码 211 10.3.7 添加Storage功能代码 212 10.3.8 添加离线事件处理程序 212 10.4 小结 213 第11...

    HTML5高级程序设计.part3

    10.3.4 检查applicationCache的支持情况 210 10.3.5 为Update按钮添加处理函数 211 10.3.6 添加Geolocation跟踪代码 211 10.3.7 添加Storage功能代码 212 10.3.8 添加离线事件处理程序 212 10.4 小结 213 第11...

    html5本地存储 localStorage操作使用详解

     离线缓存(application cache)  indexedDB 和 webSQL 2、localStorage && sessionStorage  过期时间:localStorage 永久存储,永不失效除非手动删除  sessionStorage 浏览器重新打开后就消失了  大小:每个...

    HTML5用户指南

     applicationcache  使用清单来检测连接性  清除缓存  小结 第8章 拖放  深入拖动  拖动数据的互操作性  如何拖动任意元素  添加定制的拖动图标  可访问性  小结 第9章 geolocation  为访问者标记一个...

    mindmaps:利用HTML5技术的开源,离线功能,思维导图应用程序

    100%离线功能归功于ApplicationCache 将思维导图存储在LocalStorage中 FileReader API从硬盘驱动器读取存储的思维导图 Canvas API绘制思维导图 主持你自己 您只需要一台用于静态文件的Web服务器。 将所有文件从/ ...

    详解前端HTML5几种存储方式的总结

    本篇文章主要介绍了前端HTML5几种存储方式的总结 ,主要包括本地存储localstorage,本地存储sessionstorage,离线缓存(application cache),Web SQL,IndexedDB。有兴趣的可以了解一下。

    从入门到精通HTML5——PDF——网盘链接

     1.3 HTML的基本结构 5  1.3.1 HTML文件的编写方法 5  1.3.2 文件开始标签<html> 7  1.3.3 文件头部标签<head> 7  1.3.4 文件标题标签<title> 7  1.3.5 文件主体标签<body> 7  1.3.6...

Global site tag (gtag.js) - Google Analytics