HTML5入门

HTML5 特性的检测:离线Web应用

字号+ 作者: 来源: 2014-11-16 20:49 我要评论( )

查看一个离线的静态web页面是很容易的: 连到internet,载入这个web页面,随后断开网络,躲到一个角落里在你空的时候就可以看这个页面了(你甚至可以为了减少时间,省去躲到一个角落这一步

 查看一个离线的静态web页面是很容易的: 连到internet,载入这个web页面,随后断开网络,躲到一个角落里在你空的时候就可以看这个页面了(你甚至可以为了减少时间,省去”躲到一个角落”这一步).

这对于一个静态的web页面是比较容易实现,可是对于像Gmail 和 Google Docs这样的web应用又是如何做到的呢? 这里就要感谢HTML5了,因为有了它任何人(不仅仅是Google)都可以构建一个离线的web应用了.

离线的web应用从在线的web应用开始.在第一次访问有离线访问功能的web站点的时候, web服务器会告诉你的浏览器哪些文件是为了保证能够让你离线访问该站点所必须的,这些文件可以是任何文件,可以是HTML,也可以是Javascript或者图片,甚至可以是视频.一旦你的浏览器下载了这些必须的文件之后,下次哪怕你没有连接到网络你也可以正常访问该站点.你的浏览器能够识别到你当前是离线状态,然后就会使用之前下载下来的那些文件,而一旦你再次连接到网络,任何你对这些文件做的改动都会同步到远程服务器上.

检测你的浏览器是否支持离线功能可以使用之前介绍过的检测方法中的第一种.如果你的浏览器支持离线web应用的话,在全局的window对象上会有一个叫”applicationCache”的属性,反之该属性值就为undefined.

JavaScript Code复制内容到剪贴板
  1. function supports_offline(){      
  2.     return !!window.applicationCache;      
  3. }     
  4.     
  5. function supports_offline(){    
  6.   return !!window.applicationCache;    
  7. }  

同样的,如果你不想自己亲手去写这个检测方法的话,你可以使用Modernizr(1.1或者更近版本)来检测你的浏览器是否支持离线web应用 

JavaScript Code复制内容到剪贴板
  1. if(Modernizr.applicationcache){      
  2.     //window.applicationCache is available      
  3. else {      
  4.     //no native support for offline      
  5.     //maybe try Gears or another third-party solution      
  6. }     
  7. if(Modernizr.applicationcache){    
  8.     //window.applicationCache is available    
  9. else {    
  10.     //no native support for offline    
  11.     //maybe try Gears or another third-party solution    
  12. }      

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 超级绚丽的html5的页面

    超级绚丽的html5的页面

    2014-11-16 20:49

  • HTML5基础,第4部分:点睛之笔Canvas

    HTML5基础,第4部分:点睛之笔Canvas

    2014-11-16 20:49

  • HTML5基础,第3部分:HTML5 API的威力

    HTML5基础,第3部分:HTML5 API的威力

    2014-11-16 20:49

  • HTML5基础,第2部分:组织页面的输入

    HTML5基础,第2部分:组织页面的输入

    2014-11-16 20:49

网友点评
n