习惯性的贴几个参考链接:

W3School-HTML 5 应用程序缓存

官方 MDN window.applicationCache 接口文档

官方 MDN 用法示例

看所有的教程不如直接看最原始的官方教程,下面的内容是对官方教程(官方 MDN 用法示例)中自己觉得有价值的部分的文档的翻译:

Entries in a cache manifest file

The cache manifest file is a simple text file that lists the resources the browser should cache for offline access. Resources are identified by URI. Entries listed in the cache manifest must have the same scheme, host, and port as the manifest.

翻译:manifest缓存文件是一个简单的文本文件,他只不过是列出了浏览器需要缓存的以便离线时可以使用的资源.这些资源通过URI识别,manifest文件中列出的所有资源条目都必须具有和manifest文件相同的规范, 主机, 端口号(译注:就是缓存文件必须是同域名下的文件)

Example 1: a simple cache manifest file

The following is a simple cache manifest file, example.appcache, for an imaginary web site at www.example.com.

CACHE MANIFEST

# v1 - 2011-08-13

# This is a comment.

http://www.example.com/index.html

http://www.example.com/header.png

http://www.example.com/blah/blah

A cache manifest file can include three sections (CACHE, NETWORK, and FALLBACK, discussed below). In the example above, there is no section header, so all data lines are assumed to be in the explicit (CACHE) section, meaning that the browser should cache all the listed resources in the application cache. Resources can be specified using either absolute or relative URLs (e.g., index.html).

The "v1" comment in the example above is there for a good reason. Browsers only update an application cache when the manifest file changes, byte for byte. If you change a cached resource (for example, you update the header.png image with new content), you must also change the content of the manifest file in order to let browsers know that they need to refresh the cache. You can make any change you want to the manifest file, but revising a version number is the recommended best practice.

翻译:一个cache manifest 文件包含三个部分(CACHE, NETWORK, 和FALLBACK, 下面将会详细讨论). 在上述的例子中,并没有任何节标题(原文:there is no section header),所以,上例中所列出来的所有数据都假设被加到了CACHE条目下,意思就是说,浏览器会缓存所列出来的所有资源.这些资源可以被指定使用绝对路径或是相对路径来引用(比如:index.html)

对上述例子中的注释"V1"的很好的解释就是,浏览器只会在manifest文件修改时才会更新浏览器缓存,而且是一个字节一个字节的更新(原文:byte for byte.译注:意思就是所会更新整个缓存,而不是只更新你修改的那部分).如果你改变了缓存资源(例如,你用一个新的内容更新了header.png这张图片),你必须也要修manifest文件,为了是让浏览器知道他需要更新缓存了.你可以修改manifest文件中你想修改的任意部分,但是修改版本号是我们推荐的最好的做法.

Sections in a cache manifest file: CACHE, NETWORK, and FALLBACK

A manifest can have three distinct sections: CACHE, NETWORK, and FALLBACK.

CACHE:

This is the default section for entries in a cache manifest file. Files listed under the CACHE: section header (or immediately after theCACHE MANIFEST line) are explicitly cached after they're downloaded for the first time.

翻译:这是一个默认选项,写在该节标题下的(或者是直接写在CACHE MANIFEST 下的),在他们第一次下载完成后,都会被明确的缓存起来.

NETWORK:

Files listed under the NETWORK: section header in the cache manifest file are white-listed resources that require a connection to the server. All requests to such resources bypass the cache, even if the user is offline. The wildcard character * can be used once. Most sites need *.

翻译:写在该节标题下的文件,像是白名单资源一样的存在,他们都需要向连接服务器,请求资源从而绕开缓存,哪怕用户是离线状态. 通配符*只能使用一次,大部分的网站都需要*(译注:通配符*表示缓存所有的资源,当然,是除了CACHE中说明的所有资源)

FALLBACK:

The FALLBACK: section specifies fallback pages the browser should use if a resource is inaccessible. Each entry in this section lists two URIs—the first is the resource, the second is the fallback. Both URIs must be relative and from the same origin as the manifest file. Wildcards may be used.

翻译:FALLBACK小节指定当资源不可用时的替代页面,该小节中每一个条目都有两个URI,第一个是资源的URI,第二个是替代页面的URI.两个URI必须成对出现,而且和manifest文件有相同的根目录,可以使用通配符.

The CACHE, NETWORK, and FALLBACK sections can be listed in any order in a cache manifest file, and each section can appear more than once in a single manifest.

翻译:三个节标题可以出现在任何manifest文件中,也可以多次出现.

官方给的第二个例子

CACHE MANIFEST

# v1 2011-08-14

# This is another comment

index.html

cache.html

style.css

image1.png

# Use from network if available

NETWORK:

network.html

# Fallback content

FALLBACK:

/ fallback.html

需要说明的是FALLBACK部分:

"/"和"fallback.html"之间有一个空格,说明就是任何文件加载失败,都会用fallback.html替代, 不要把"/ fallback.html"当作一个路径URI

其他说明:比如res/ fallback.html的用法,表示访问,任何请求到http://<host:port>/res/或它的任何子目录及其内容导致浏览器发出一个网络请求试图加载请求的资源。如果尝试失败,由于网络故障或服务器错误,浏览器都会加载fallback.html.

.

.之间省略了一段不太重要的内容就不翻译了

.

Cache states(缓存状态)

Each application cache has a state, which indicates the current condition of the cache. Caches that share the same manifest URI share the same cache state, which can be one of the following:

翻译:每一个应用缓存都有一个状态,这个状态用来说明缓存的当前状态.缓存共享相同的manifest URI,共享相同的缓存状态,这些状态必定在下面的某一个中:

UNCACHED(未缓存)

A special value that indicates that an application cache object is not fully initialized.

翻译:一个特殊的值表明应用缓存并没有完全的初始化

IDLE(空闲状态)

The application cache is not currently in the process of being updated.

CHECKING

The manifest is being fetched and checked for updates.

翻译:应用程序缓存并不是目前在更新的过程中。

DOWNLOADING(下载中)

Resources are being downloaded to be added to the cache, due to a changed resource manifest.

翻译:由于改变了资源清单, 资源被下载到被添加到缓存中.

UPDATEREADY(更新就绪)

There is a new version of the application cache available. There is a corresponding updateready event, which is fired instead of the cached event when a new update has been downloaded but not yet activated using the swapCache() method.

翻译:有一个新版本的应用程序缓存可用。当一个新的更新已经被下载,会有一个相应的updateready事件被cached事件代替, 但新版本尚未被激活使用swapCache()方法。

OBSOLETE(过期状态)

The application cache group is now obsolete.

翻译:应用程序缓存现在过期了。

关于如何使用appcache缓存将在文章　　HTML5之window.applicationCache对象　　中详细说明