h5牛牛平台开发制作教程HTML5离线Web应用

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

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

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

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

JavaScript Code复制内容到剪贴板

function supports_offline(){

return !!window.applicationCache;

}

function supports_offline(){

return !!window.applicationCache;

}

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

JavaScript Code复制内容到剪贴板

if(Modernizr.applicationcache){

//window.applicationCache is available

} else {

//no native support for offline

//maybe try Gears or another third-party solution

}

if(Modernizr.applicationcache){

//window.applicationCache is available

} else {

//no native support for offline

//maybe try Gears or another third-party solution

}

本文版权归黑马程序员H5+全栈学院所有，欢迎转载，转载请注明作者出处。谢谢！

作者：黑马程序员H5+全栈学院

首发：http://stack.itheima.com/