如何使用和创建MANIFEST文件(结构)，
处理appCache事件和错误，
什么时候需要swapCache？
使用带有清单的应用程序缓存
要使用应用程序缓存，您需要引用HTML文档中的清单文件，如下所示：
<html manifest="manifest.appcache"/>
清单文件本身需要一个预先确定的布局才能工作。
CACHE MANIFEST是必需的，并且需要位于顶部(这样，当浏览器检查它是否是缓存清单时，它就会返回true)。
CACHE是可选的，但推荐使用，用于引用要在本地缓存的文件。
FALLBACK是可选的，用于指定在指定的文件(在CAHCE中)不可用时应使用的文件。指定的第一个文件(在FALLBACK中)是原始文件，第二个文件是在原始文件不可用时将使用的文件。
NETWORK应该被认为是强制性的，但不是。它用于指定哪些文件需要internet连接(未缓存)。使用"*"(不带括号)指定除CACHE中提到的文件外的所有其他文件都需要活动的internet连接。
示例：
CACHE MANIFEST
CACHE:
YourFirstFile.html
YourSecondFile.png
fallbackFile1.html
fallbackFile2.png
Etc.css
FALLBACK:
YourFirstFile.html fallbackFile1.html
YourSecondFile.png fallbackFile2.png
NETWORK:
*
清单(及其指定的资源)仅在页面加载时(当用户进入网站时)进行检查。附带说明：清单文件区分大小写。
处理应用程序缓存中触发的事件
我想说的第一件事是appCache实际上是window.applicationCache，所以它需要声明(var appCache = window.applicationCache;)。
当用户第一次进入网站(或者清单缓存不存在)时，会触发以下事件；如果一切正常：
使用清单创建应用程序缓存
应用程序缓存检查
应用程序缓存下载
应用程序缓存进度(第0个，共X个)
应用程序缓存
让我们把它分解一下。
第一个(Creating Application Cache)指定一个缓存"文件/文件夹"供浏览器稍后使用。
第二个(Application Cache Checking)"；CCD_ 13"；，查看清单文件内部以查看需要缓存的内容。
第三个(Application Cache Downloading)"；CCD_ 15"；，开始清单中指定文件的下载过程。
第四个(Application Cache Progress)"；CCD_ 17"；，跟踪下载进度(这是为每个文件触发的)。
第五个(Application Cache Cached)"；CCD_ 19"；，只需简单地说"我已经完成了"缓存文件，一切都会正常进行。
这是什么意思？这意味着我们可以对事件进行一些控制，如果我们愿意，可以触发我们自己的事件
因此，通过收听progress事件，我们可以显示进度条、带有步骤的通知或我们想要的任何内容。
appCache.addEventListener("progress", function(event) {
console.log(event.loaded + " of " + event.total);
}, false);
等等，我刚才做了什么？
我添加了一个带有匿名函数的event listener。在这个函数中，我传递一个来自我们正在收听的内容的"事件"(downloading)，并简单地传递logged到目前为止缓存了多少文件以及总共有多少文件。
让我们对提到的所有事件都这样做，从第一个调用的事件到最后一个：
appCache.addEventListener("checking", function(event) {
console.log("Checking for updates.");
}, false);
appCache.addEventListener("downloading", function(event) {
console.log("Started Download.");
}, false);
appCache.addEventListener("progress", function(event) {
console.log(event.loaded + " of " + event.total + " downloaded.");
}, false);
appCache.addEventListener("cached", function(event) {
console.log("Done.");
}, false);
现在这些事件做了我希望他们做的事。
以下是appCache事件：
checking-总是第一个触发的事件。检查清单中的更新。
downloading-发现更新时触发。下载清单中指定的资源。
progress-针对当前下载的每个资源触发。跟踪进度(按文件)。
error-如果发生404410网络错误，或者下载时清单文件发生更改，则触发。
obsolete-如果发生404410网络错误或清单文件不存在(在服务器上)，则触发。请注意，此事件将删除以前(和当前)的应用程序缓存。
cached-(仅)首次缓存清单中指定的资源时触发。
noupdate-如果自上次缓存更新以来未对清单进行任何更改，则触发。
updateready-下载新资源时触发。
场景处理(错误、事件和触发器)
如果出了问题怎么办？我们可以用error和/或obsolete来处理。
error是在更新时出现问题时触发的。
例如
- 服务器上不存在清单中指定的文件
- 下载时清单已更改
obsolete在清单文件(在服务器上)不存在时触发。
例如
- 将从服务器中删除清单文件
- 该网站指向无效的url/路径(
<html manifest="manifest.appcache"/>)
例如，通过收听error，我们可以告诉用户是否出现了问题：
appCache.addEventListener("error", function(event) {
if (navigator.onLine == true) { //If the user is connected to the internet.
alert("Error - Please contact the website administrator if this problem consists.");
} else {
alert("You aren't connected to the internet. Some things might not be available.");
}
}, false);
在这里，我检查了用户是否有活跃的互联网连接。请记住，这只是一个例子，告诉用户可能没有必要(取决于您的网站)。
我们可以对obsolete做同样的事情，但我们可能不想告诉用户，因为这是服务器端的问题：
appCache.addEventListener("obsolete", function(event) {
console.log("Obsolete - no resources are cached, and previous cache(s) are now deleted.");
}, false);
swapCache
现在这是一个棘手的问题。关于CCD_ 39的主要问题是："它做什么&"它有用/需要吗"以及"；应该使用它吗&"；。
CCD_ 40用于用新的高速缓存替换旧的高速缓存。它只能在updateready事件内部使用(如果在其他地方使用，它将返回错误)。
"它做什么"：swapCache执行它所说的，用新的缓存交换当前缓存。
"它有用/需要吗"：appCache很有用，使用它的主要原因是确保使用了最新的可用缓存。尽管这似乎是一件应该自己工作的事情，但事实并非总是如此。例如，有些浏览器并不总是使用最新的缓存，因为它没有得到所需的消息(iPhone就是一个很好的例子)。图像可能会被缓存、删除/重命名、缓存等等。最后，浏览器可能会使用旧缓存来显示该图像，因为它已经对存储的缓存进行了引用。一句话：它有用吗？对需要吗？编号
"应该使用它吗"：就我个人而言，我会同意。但这取决于你的页面做什么。如果上例中的条件与您的资源处理相匹配，那么是。否则就没什么大不了的了。
因此，通过在updateready中添加一个事件侦听器，我们可以包含swapCache:
appCache.addEventListener("updateready", function(event) {
appCache.swapCache();
window.reload();
}, false);
(appCache)事件变量：
progress.
total
loaded
lengthComputable
GENERAL (for all):
clipboardData
cancelBubble
returnValue
srcElement
defaultPrevented
timeStamp
cancelable
bubbles
eventPhase
currentTarget
target
type
stopPropagation
preventDefault
initEvent
stopImmediatePropagation
漂亮的外部页面：
http://www.html5rocks.com/en/tutorials/appcache/beginner/-appCache基础知识。
http://www.htmlgoodies.com/html5/other/html-5-appcache-by-example.html-appCache示例。
http://www.jefclaes.be/2012/04/visualizing-offline-application-cache.html-明显的后退。
在HTML5离线应用程序中需要swapCache()吗？-swapCache信息(同时阅读评论)。
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching-常规HTTP缓存信息。