你如何使用和创建一个MANIFEST文件(结构)，
处理 appCache 事件和错误，
什么时候需要交换缓存？
最佳答案
将应用程序缓存与 list 一起使用
要使用应用程序缓存，您需要引用 HTML 文档中的 list 文件，如下所示:
<html manifest="manifest.appcache"/>
CACHE MANIFEST是强制性的，需要在顶部(这样当浏览器检查它是否是缓存 list 时，它返回真)。CACHE是可选的，但建议使用，用于引用您要在本地缓存的文件。FALLBACK是可选的，用于指定在指定文件(在 CAHCE 中)不可用时应使用的文件。指定的第一个文件(在 FALLBACK 中)是原始文件，第二个文件是原始文件不可用时使用的文件。NETWORK应该被认为是强制性的，但不是。它用于指定哪些文件需要 Internet 连接(未缓存)。使用“*”(不带括号)指定除 CACHE 中提到的文件之外的所有其他文件，需要有效的互联网连接。例子:
CACHE MANIFEST
CACHE:
YourFirstFile.html
YourSecondFile.png
fallbackFile1.html
fallbackFile2.png
Etc.css
FALLBACK:
YourFirstFile.html fallbackFile1.html
YourSecondFile.png fallbackFile2.png
NETWORK:
*
旁注: list 文件区分大小写。
处理应用程序缓存中触发的事件
首先我想说的是
appCache真的是window.applicationCache ，所以需要声明( var appCache = window.applicationCache; )。当用户第一次进入站点时(或 list 缓存不存在)，会触发以下事件；如果一切正常:
Creating Application Cache with manifest
Application Cache Checking
Application Cache Downloading
Application Cache Progress (0 of X)
Application Cache Cached
让我们分解一下。
第一个(
Creating Application Cache )指定浏览器稍后使用的缓存“文件/文件夹”。第二个(
Application Cache Checking )“checking ”，查看 list 文件以查看需要缓存的内容。第三个 (
Application Cache Downloading )“downloading ”开始下载 list 中指定的文件。第四个(
Application Cache Progress )“progress ”，跟踪下载进度(这是为每个文件触发的)。第五个(
Application Cache Cached )“cached ”，只是说“我完成了”缓存文件，一切都按预期进行。这是什么意思？这意味着我们可以对事件进行一些控制，并且可以根据需要触发我们自己的事件。
所以通过听
progress事件，我们可以显示进度条、带有步骤的通知或任何我们想要的。appCache.addEventListener("progress", function(event) {
console.log(event.loaded + " of " + event.total);
}, false);
我添加了一个
event listener带有 anonymous-function .在这个函数中，我从我们正在监听的内容( 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 - 总是第一个触发的事件。检查 list 中的更新。downloading - 发现更新时触发。下载 list 中指定的资源。progress - 针对当前下载的每个资源触发。跟踪进度(按文件)。error - 如果发生 404、410 网络错误，或在下载时更改 list 文件，则触发。obsolete - 如果发生 404、410 网络错误，或者 list 文件不存在(在服务器上)，则触发。请注意，此事件将删除以前(和当前)的应用程序缓存。cached - (仅)第一次缓存 list 中指定的资源时触发。noupdate - 如果自上次缓存更新以来未对 list 进行任何更改，则触发。updateready - 下载新资源时触发。场景处理(错误、事件和触发器)
如果出现问题怎么办？我们可以用
error 处理这个问题和/或 obsolete .error更新时出现问题时触发。例如
obsolete当 list 文件不存在(在服务器上)时触发。例如
<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的主要问题是; “它有什么作用？”，“它有用/需要吗？”和“应该使用它吗？”。swapCache用于用新缓存替换旧缓存。它只能在 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 - 应用缓存示例。
http://www.jefclaes.be/2012/04/visualizing-offline-application-cache.html - list 回退。
Is swapCache() required in HTML5 offline apps? - swapCache 信息(也请阅读评论)。
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching - 一般的 HTTP 缓存信息。
关于javascript - 如何使用/创建 MANIFEST、处理 appCache 事件/错误以及使用 swapCache，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20045643/