习惯性的贴几个参考链接:
官方 MDN window.applicationCache 接口文档
看所有的教程不如直接看最原始的官方教程,下面的内容是对官方教程(官方 MDN 用法示例)中自己觉得有价值的部分的文档的翻译:
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文件相同的规范, 主机, 端口号(译注:就是缓存文件必须是同域名下的文件)
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文件中你想修改的任意部分,但是修改版本号是我们推荐的最好的做法.
CACHE
, NETWORK
, and FALLBACK
A manifest can have three distinct sections: CACHE
, NETWORK
, and FALLBACK
.
CACHE:
CACHE:
section header (or immediately after the
CACHE MANIFEST
line) are explicitly cached after they're downloaded for the first time.
NETWORK:
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
*
.
FALLBACK:
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.
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.
.
.之间省略了一段不太重要的内容就不翻译了
.
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(未缓存)
IDLE(空闲状态)
CHECKING
DOWNLOADING(下载中)
UPDATEREADY(更新就绪)
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.
OBSOLETE(过期状态)
关于如何使用appcache缓存将在文章 HTML5之window.applicationCache对象 中详细说明