HTML教程:初学者该如何使用Application Cache_HTML教程_H5之家

HTML教程:初学者该如何使用Application Cache

    今天给大家分享下初学者该如何使用Application Cache，对于web app来说，离线应用功能已经越来越重要。诚然，浏览器本身就有缓存机制，但是，这些缓存机制不够可靠，可能并不会按你所想要的方式运行。HTML5 则通过 Application Cache 接口处理了离线应用中的一些问题；

使用这个接口的应用拥有三方面的优势：
1、离线浏览——用户在不能联网的时候依然能浏览整个站点；
2、高速——缓存资源是存储在本地的，因此能更快加载；
3、更小的服务器负载——浏览器只需要从服务器端下载有改变的资源即可，相同资源不需要重复下载；
    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=””>

　　…

　　</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的页面中的四个文件；

有几点是需要注意的：
1、必须在第一行包括 CACHE MANIFEST 字符串；
2、站点所能缓存的数据上限是5MB 。但是，如果你是在为Chrome Web Store做开发的话，你可以使用unlimitedStorage 来去除这个限制；
3、如果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:

　　/myapi

　　# 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；
NETWORK：这一部分中所列出的资源都是需要联网使用的资源。它们都不会进入cache中，即使用户处于离线状态。这部分可能会使用Wildcards；
FALLBACK：可选部分，指定了如果资源获取失败，将会呈现怎样的页面。第一个URL是资源，第二个就是fallback页面。两个URL都必须是相对地址，并且由同一个manifest文件指定。可以使用Wildcards；
注意：这三部分可以以任何顺序在manifest文件中出现，并且每部分都可以在一个manifest文件中出现多次；

    下面的manifest文件定义了一个“catch-all”页面(offline.html)，这个页面将会在用户试图离线访问网站根节点时显示。它还指明了需要联网使用的其他资源(如远程站点上的资源)；

CACHE MANIFEST
# 2010-06-18:v3
# Explicitly cached entries
index.html
css/style.css
# offline.html will be displayed if the user is offline
FALLBACK:
/ /offline.html
# All other resources (e.g. sites) require the user to be online.
NETWORK:
*
# Additional resources to cache
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png

    注意：引用了manifest文件的HTML文件都会自动被缓存，因此，没有必要在你的manifest文件中再指定这个文件，但是，在manifest文件中指定这个文件是一种更好的做法；
    注意：页面上基于SSL的HTTP cache headers以及caching restrictions都会被cache manifests重写。因此，基于https的页面也能离线工作；

更新缓存(CACHE)

    如果一个应用是在离线情况下，那么它会保持它的缓存状态，除非有以下事件发生：

用户清除了浏览器中存储有站点的数据：manifest file 被修改了；
注意：修改了在manifest文件中列出的某个文件并不会让浏览器重新缓存资源。必须是manifest文件本身改变了，才会重新进行缓存，app cache通过编程更新了；

缓存状态CACHE STATUS
    在程序中，你可以通过window.applicationCache 对象来访问浏览器的app cache。你可以查看 status 属性来获取cache的当前状态：

var appCache = window.applicationCache;
switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return ‘UNCACHED’;
break;
case appCache.IDLE: // IDLE == 1
return ‘IDLE’;
break;
case appCache.CHECKING: // CHECKING == 2
return ‘CHECKING’;
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return ‘DOWNLOADING’;
break;
case appCache.UPDATEREADY: // UPDATEREADY == 4
return ‘UPDATEREADY’;
break;
case appCache.OBSOLETE: // OBSOLETE == 5
return ‘OBSOLETE’;
break;
default:
return ‘UKNOWN CACHE STATUS’
break;

};
    为了通过编程更新cache，首先调用 applicationCache.update()。这将会试图更新用户的 cache(要求manifest文件已经改变)。最后，当 applicationCache.status 处于 UPDATEREADY 状态时，调用applicationCache.swapCache()，旧的cache就会被置换成新的：

var appCache = window.applicationCache;
appCache.update(); // Attempt to update the user’s cache.

　…

if (appCache.status == window.applicationCache.UPDATEREADY) {

appCache.swapCache(); // The fetch was successful, swap in the new cache.