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

站长资源综合门户

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

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

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

FAQ:

问:我需要在我的缓存名单中列出我的HTML页面么?

答:是或者不是。如果你所有的网络应用程序被包含在一个单页面,只需要确认页面通过使用manifest属性指向了缓存名单。当你访问一个含有manifest属性的HTML页面,页面本身被假设为网络应用程序的一部分,所以你不需要将它本身列入名单文件。尽管如此,如果你的网络应用程序包含多个页面,你应该在名单文件中列出所有的HTML页面,否则浏览器将不会知道有其他的HTML页面需要下载并缓存。

NETWORK段

这儿是一个稍微复杂一点的例子。Here is a slightly more complicated example. 如果你需要你的计时器应用程序跟踪用户,使用一个从属性动态加载的tracking.cgi脚本。缓存这个资源会使跟踪的目的落空,所以此资源需永不缓存,且在离线时绝对无效。你该这样做:

CACHE MANIFEST

NETWORK:

/tracking.cgi

CACHE:

/clock.css

/clock.js

/clock-face.jpg

此缓存名单文件包含了段落头。写着“NETWORK:”的那一行就是“online whitelist”段的开始。在此段落里的资源将永远不会被缓存,且离线时无效。(尝试在离线时加载他们会返回一个错误。)写着“CACHE:”的那一行是“explicit”段的开始。缓存名单文件中剩余的部分和上一个例子一模一样。列出的三个资源都将被缓存切离线时有效。

FALLBACK段

这儿还有另一个缓存名单文件的段落类型:“fallback”段。在一个“fallback”段中,你可以为由于任何原因不能被缓存或没有成功被缓存的在线资源定义一个替代文件。HTML5规范提供了一个使用“fallback”段的牛逼例子:

CACHE MANIFEST

FALLBACK:

/ /offline.html

NETWORK:

*

这玩意儿干了些啥?首先,考虑一个包含了无数页面的站点,比如Wikipedia。你当然不能下载整个站点,你也应该不想这样。但假设你需要使站点的部分页面在离线时有效,你如何决定缓存哪些页面呢?这样如何:你在一个假定支持离线的Wikipedia站点访问过的每个页面将被下载并缓存。它将包含每个你曾经访问的百科全书条目,每个话题页面(用于对特定百科全书条目的临时讨论),和每个编辑页面(用于修改特定的条目)。

这就是此缓存名单做的事情。假设Wikipedia的每个HTML页面(条目,话题页面,编辑页面,历史页面)指向一个缓存名单,你的浏览器说道“嘿,此页面是一个离线网络应用程序的一部分,是我知道的那一个么?”如果你的浏览器没有下载这个特定的缓存名单文件,它将建立一个新的离线应用程序缓存,下载缓存名单中列出的所有资源,然后将当前页面加入应用程序缓存。如果你的浏览器识别此缓存名单,它将简单的把当前页面加入已存在的应用程序缓存。总之,你刚访问的页面会在应用程序缓存中结束。这个很重要。这意味着你可以拥有一个在访问时“慢吞吞”添加页面的离线网络应用程序。你不需要在缓存名单中列出你的每一个单独HTML页面。

现在,看看这个“fallback”段。此缓存名单中的“fallback”段只有一行。此行中的第一部分(空格前)并不是一个URL。它实际上是一个URL模板。此单字符(/)将匹配你站点中的任何页面,不仅仅是首页。当你在离线时尝试访问一个页面,你的浏览器会在应用程序缓存中查找。如果你的浏览器在应用程序缓存中找到此页面(因为你于在线时访问过,且此页面在那时被暗中加入了应用程序缓存中),那么你的浏览器将会显示此页面的缓存副本。如果你的浏览器没有在应用程序缓存中找到此页面,它将显示在“fallback”段那一行第二部分定义的“/offline.html”页面,而不是显示错误信息。

最后,让我们仔细看看“network”段。此缓存名单中的“network”段也只有一行,只含有一个单字符(*)的一行。此字符在“network”段含有特殊的意义。它被称为“在线白名单通配符”。这个精心设计的方法用于指明,只要你有网络连接,任何不在应用程序缓存中的资源将仍然从原网络地址下载。这对“开放的”离线网络应用程序非常重要。这意味着,当你在线浏览这个假设支持离线的Wikipedia时,你的浏览器将正常的获取图片,视频和其他嵌入的资源,即使他们在另一个域名下。(这在大型网站中很常见,即使它不是离线网络应用程序的一部分。当图片和视频在另一个域的CDN中被执行的同时,HTML页面在本地被生成并工作。)如果没有此通配符,当你在线时,我们设想支持离线的Wikipedia将会行为诡异——它将不会加载任何不同域名下的图片或者视频。

分享到:

网友评论

热门建站经验