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

站长资源综合门户

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

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

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

原文:Let’s Take This Offline

什么是离线网络应用程序?乍一看,从以下几个方面来说就像一个矛盾。网页是需下载并呈现的。下载意味着网络连接。你怎能在离线的时候下载?当然,你不能。但你可以在你在线的时候下载。这就是HTML5离线应用程序怎样工作的。

最简单来说,一个离线网络应用程序就是一个URL的列表——HTML,CSS,JavaScript,图片,或者其他类型的资源。离线网络应用程序的注意指向一个叫做名单文件并用于定位网络服务器上任何文本文件的列表。用于执行HTML5离线以用程序的网络浏览器将从名单文件中读取URL列表,下载这些资源,将他们在本地缓存,并自动在这些本地副本改变时保持他们更新。当你尝试在没有网络连接时访问网络应用程序,你的网络浏览器将自动切换并使用本地代替。

从现在开始,大多数的工作要靠你网络开发者了。DOM里有一个标记会告诉你在线还是离线。当你的离线状态改变时将会有事件触发(一时离线,下一时在线,或者反之亦然)。但这非常符合情况。如果你的应用程序创建了数据或者存储状态,你该决定当离线时在本地存储数据,且当你重新在线时与远程服务器同步。更新程序在被创建时连接到存储段。换句话说,HTML5可以使你的网络应用程序离线使用。当你处于那种情况该怎么做由你决定。

离线支持情况

IE Firefox Safari Chrome Opera iPhone Android

× √ √ √ × √ √

谁已经使用离线?

离线网络应用程序的思想其实要早于HTML5,部分实施也要早些。也就是说,HTML5有办法实现离线,但也有其他办法。我将稍后在本章谈谈其中一个办法:Gears。这些早期使用者中的一部分已经换成了HTML5,并且其他的也正在切换中。

• Gmail,Google基于网络的邮箱

• Zoho,在线生产力及合作应用程序online productivity and collaboration apps

• Remember The Milk,在线任务管理系统

• WordPress,一个开源的个人发布平台

缓存名单

离线网络应用程序与缓存名单文件紧密相联。什么是名单文件?它是你的网络应用程序在失去网络连接时需要访问的所有资源的列表。为了引导下载进程并缓存这些资源,你需要在你的元素中使用manifest属性指向名单文件。

<!DOCTYPE HTML>

<html manifest=”/cache.manifest”>

<body>

</body>

</html>

你的缓存名单文件可以放在你网络服务器的任何地方,但他需要type text/cache-manifest内容类别的支持。如果你正使用基于Apache的网络服务器,你大概只需要在你网络根目录的.htaccess文件中添加一个AddType指令:

AddType text/cache-manifest .manifest

然后确认你缓存文件的扩展名为.manifest。如果你使用不同的网络服务器或者不同的Apache配置,请查阅服务器说明文档关于配置Content-Type头的部分。

FAQ:

问:我的网络应用程序包含了很多页面。我是否需要在每个页面都使用manifest属性,或者我可以只在主页中使用?

答:你网络服务器中的每个页面都需要一个指向缓存名单的为全部应用程序准备的manifest属性。

你的每一个HTML页面指向你的缓存名单文件,并且你的缓存名单文件由合适的Content-Type头支持。但名单文件里有些啥?这是有趣的事情。

每个缓存名单文件的第一行都是这样的:

CACHE MANIFEST

然后,所有的名单文件被分为三个部分:“explicit”段,“fallback” 段,和“online whitelist”段。每个部分有一个标头,单独占一行。如果名单文件不含有任何段落标头,所有列出的资源默认为“explicit”段。尽量不要细想这些术语,以免你崩溃。

这儿是一个有效的名单文件。它列出了三个资源:一个CSS文件,一个JavaScript文件,和一个JPEG图片。

CACHE MANIFEST

/clock.css

/clock.js

/clock-face.jpg

此缓存名单文件没有任何段落头,所以所有列出的资源默认为“explicit”段。在“explicit”段中的资源将会被下载并在本地缓存,且会在你没有网络连接时用于代替它们的在线副本。因此,在下载此名单列表的同时,你的浏览器将会从你网络服务器的根目录下载clock.css,clock.js和clock-face.jpg。然后你可以拔掉你的网线并刷新页面,所有这些资源可以在离线时有效。

分享到:

网友评论

热门建站经验