会员登录 | 会员注册 | 意见建议 | 网站地图

站长资源综合门户

当前位置:首页 > 站长学院 > 建站经验 > 让我们使用离线吧(HTML5离线存储)

让我们使用离线吧(HTML5离线存储)

时间:2012-05-07 18:46:48   作者:   来源:   点击:

这例子完整么?不。Wikipedia不仅仅是HTML文件。它在每个页面上使用了通常的CSS,JavaScript,和图片。为了页面在离线时正确的显示和执行,这些资源都需要被明确的列入名单文件的“CACHE:”段中。但“fallback”段的意图是你可以拥有一个开放的离线网络应用程序,而不仅仅限于名单文件中明确列出的资源。

事件流

到目前为止,我已经用模糊,半迷惑的术语谈及了离线网络应用程序,缓存名单,和离线应用程序缓存。资源被下载,浏览器做出判断,且一切运行正常。你懂的,对吧?我是说,这就是我们谈及的网络开发。什么也没有,仅仅是正常运行。

首先,让我们谈一下事件流。特别是DOM事件。当你的浏览器访问一个指向了缓存名单的页面时,它在window.applicationCache对象上触发了一连串的事件。我想这看起来很复杂,但相信我,这是我能提供的含有所有重要信息的最简版本。

1. 一旦你的浏览器注意到元素含有manifest属性,它将触发一个checking 事件。(所有这儿列出的事件均在window.applicationCache对象上触发。)checking事件总是被触发的,不管你之前是否访问过此页面,或者任何其它指向同一缓存名单的页面。

2. 如果你的浏览器不曾遇见过此缓存名单…

o 它将触发一个downloading事件,然后开始下载此缓存名单中列出的资源。

o 在下载的同时,你的浏览器将会周期性的触发progress事件,此事件包含了诸如多少文件已被下载,多少文件仍然处于下载队列等信息。

o 当缓存名单中所有列出的资源被成功下载后,浏览器触发最后的一个事件,cached。 这是你的离线网络应用程序被完整缓存并以备离线使用的标志。就这样,你完工了。

3. 另一方面,如果你之前访问过此页面或者其他页面指向了相同的缓存名单,那么你的浏览器已经知道这个缓存名单。可能已经有一些资源在应用程序缓存中。可能全部工作的网络应用程序已在应用程序缓存中。现在的问题是,你的浏览器上次检测之后,缓存名单是否已经更改?

o 如果答案是没有,缓存名单没有更改,你的浏览器将会立即触发一个noupdate事件。就这样,你完工了。

o 如果答案是有,缓存名单已有更改,你的浏览器将会触发一个downloading事件,并开始重新下载缓存名单中列出的每个资源。

o 在下载的同时,你的浏览器将会周期性的触发progress事件,此事件包含了诸如多少文件已被下载,多少文件仍然处于下载队列等信息。

o 当缓存名单中所有列出的资源被成功重新下载后,浏览器触发最后的一个事件,updateready。这是你新版本的离线网络应用程序被完整缓存并以备离线使用的标志。新版本不会立即被使用。为了即刻使用新版本而不强制用户重载页面,你可以手动调用window.applicationCache.swapCache()函数。

如果此过程中的任何一点出现可怕的错误,你的浏览器将会触发一个error事件,并立即终止。这是一个可能引发错误的完整且简短的列表:

• 缓存名单返回一个HTTP404错误(页面未找到),或者410错误(永久消失)。

• 缓存名单被找到且没有更改,但指向名单的HTML页面没有正确下载。

• 缓存名单被找到且被更改,但浏览器没有下载某个缓存名单中列出的资源。

调试的艺术

我想在此说出两件重要的事情。第一件事是你刚刚阅读过的,但我猜想你没有真正的充分理解,所以再说明一下:如果任何一个在你缓存名单中列出的资源没有正确下载,整个获取离线网络应用程序的进程将会失败。你的浏览器将会触发一个error事件,但不会有迹象表明具体是哪种问题。这可能让调试离线网络应用程序变得十分崩溃。

第二件重要的事情从技术层面说,并不是一个错误,但它看起来像是一个严重的浏览器错误直到你明白发生了什么。它与你浏览器怎样检测缓存名单是否被更改有点确切的关系。这是一个三相的进程。这令人烦恼,但很重要,所以要注意。

1. 通过标准的HTTP语义,你的浏览器将会检测缓存名单是否已经过期。就像任何其他由HTTP服务的文件,你的网络服务器将会包含典型的关于此文件在HTTP响应头中的元信息。这些HTTP头中的一些(Expires和Cache-Control)将告诉你的浏览器如何允许缓存文件而不询问服务器此文件是否已更改。此种类型的缓存和离线网络应用程序没有任何关系。它发生在几乎每个HTML页面,样式表,图片或者其他网络资源。

分享到:

网友评论

热门建站经验