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

站长资源综合门户

当前位置:首页 > 站长学院 > 建站经验 > HTML5::初学者使用 Application Cache 指南

HTML5::初学者使用 Application Cache 指南

时间:2012-03-19 18:23:57   作者:   来源:   点击:

对于web app来说,离线应用功能已经越来越重要。诚然,浏览器本身就有缓存机制,但是,这些缓存机制不够可靠,可能并不会按你所想要的方式运行。HTML5 则通过 Application Cache 接口处理了离线应用中的一些问题。

使用这个接口让你的应用拥有三方面的优势:

离线浏览——用户在不能联网的时候依然能浏览整个站点

高速——缓存资源是存储在本地的,因此能更快加载。

更小的服务器负载——浏览器只需要从服务器端下载有改变的资源即可,相同资源不需要重复下载。

Application Cache(或 AppCache)让一个开发者可以指定浏览器需要保存哪个文件。当用户在离线情况下时,即使他们按了刷新按钮,你的应用也能正确加载和工作。

CACHE MANIFEST 文件

cache manifest文件是一个简单的文本文件,其中列出了浏览器需要缓存的资源。

引用一个MANIFEST文件

为了让一个应用能启用application cache,需要在文档的html标签中包含manifest属性,如下所示:

<html manifest=”example.appcache”>

</html>

 

你需要在你想要缓存的web app的每一页中都包含 manifest 属性。如果一个页面没有 manifest属性,它将不会被缓存(除非在manifest文件中显式指定了这 个页面)。这意味着只要用户访问的页面包含manifest属性,它都将会被加入application cache中。这样,就不用在manifest文件中指定需要缓存哪些页面了。

Manifest属性可以指定一个绝对URL或是一个相对路径,但是,一个绝对URL需要和web app是同源的。一个manifest文件可以是任何扩展文件类型,但必须有正确的mime-type。如下所示:

 

<html manifest=”.example/example.mf”>

</html>

 

一个manifest文件需要正确的mime-type,即text/cache-manifest。你可以在你的web服务器中加入一个定制文件类型(a custom file type),或者加入一个 .htaccess 配置。

例如,为了在Apache中能够解析这种mime-type,可以在你的配置文件中加入如下代码:

AddType text/cache-manifest .appcache

或者,如果你的应用是在Google App Engine中,那么在app.yaml文件中加入代码:

- url: /mystaticdir/(.*.appcache)

static_files: mystaticdir/1

mime_type: text/cache-manifest

upload: mystaticdir/(.*.appcache)

MANIFEST FILE的结构

一个简单的manifest文件看起来可能是下面这样的:

CACHE MANIFEST

index.html

stylesheet.css

images/logo.png

scripts/main.js

这个示例将会缓存指定使用这个manifest的页面中的四个文件。

有几点是需要注意的:

必须在第一行包括 CACHE MANIFEST 字符串。

站点所能缓存的数据上限是5MB 。但是,如果你是在为Chrome Web Store做开发的话,你可以使用unlimitedStorage 来去除这个限制。

如果manifest文件或者是其中指定的某个资源下载失败的话,整个cache的更新都会失败。在这种情况下,浏览器将会使用老的application cache。

下面来看一个更复杂的例子:

CACHE MANIFEST

# 2010-06-18:v2

# Explicitly cached ‘master entries’.

CACHE:

/favicon.ico

index.html

stylesheet.css

images/logo.png

scripts/main.js

# Resources that require the user to be online.

NETWORK:

login.php

/myapi

http://api.twitter

# static.html will be served if main.py is inaccessible

# offline.jpg will be served in place of all images in images/large/

# offline.html will be served in place of all other .html files

FALLBACK:

/main.py /static.html

images/large/ images/offline.jpg

*.html /offline.html

以“#”开头的都是注释,这些注释还可以起到另外的作用。一个应用只有在manifest文件发生变化时才会更新 cache。例如,如果你编辑了图像或是改写了一个Javascript函数,cache并不会发生更新。你必须改写manifest文件本身来通知浏览 器需要更新cache文件了。通过在manifest文件中添加一行注释,在其中写上版本号,或者文件hash值,或者时间戳,你都可以确保用户拥有你的 软件的最新版本。如果有新版本出现,你同样可以以编程的方式更新cache,就跟在Updating the cache 中所讨论的那样。

一个manifest文件可能包括三个部分:CACHE, NETWORK 以及 FALLBACK.

CACHE:

这是默认部分,列在这个条目下的文件(或者紧跟在CACHE MANIFEST字符串之后的)都会在第一次被下载后进入cache。

分享到:

网友评论

热门建站经验