解决方法
要使用应用程序缓存,您需要引用HTML文档中的清单文件,如下所示：
<html manifest="manifest.appcache"/>
清单文件本身需要预定的布局才能工作.
CACHE MANIFEST是强制性的,需要在顶端(因此当浏览器检查它是否是缓存清单时,它返回true).
CACHE是可选的,但是推荐使用,并用于引用您要在本地缓存的文件.
FALLBACK是可选的,用于指定在CAHCE中指定的文件不可用时应使用的文件.指定的第一个文件(在FALLBACK中)是原始文件,第二个文件是原始文件不可用时将被使用的文件.
网络应该被认为是强制性的,但不是.它用于指定什么文件需要互联网连接(不缓存).使用“*”(不带括号)指定除了CACHE中提到的所有其他文件,都需要一个有效的互联网连接.
例：
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;).
当用户第一次进入站点(或清单缓存不存在)时,会触发以下事件;如果一切正常,应该：
Creating Application Cache with manifest
Application Cache Checking
Application Cache Downloading
Application Cache Progress (0 of X)
Application Cache Cached
我们来吧
第一个(创建应用程序缓存)指定一个缓存“文件/文件夹”供浏览器稍后使用.
第二个(应用程序高速缓存检查)“检查”,查看清单文件,看看它需要缓存.
第三个(应用程序缓存下载)“下载”开始清单中指定的文件的下载过程.
第四个(应用程序缓存进度)“进度”,跟踪下载进度(这是为每个文件触发).
第五个(缓存应用缓存)“缓存”,简单地说“我完成了”缓存文件,一切都按照它的顺序进行.
这是什么意思？这意味着我们可以对事件进行一些控制,如果我们愿意,可以触发自己的事件.
所以通过听进度事件,我们可以显示一个进度条,通知步骤或者我们想要的.
appCache.addEventListener("progress",function(event) {
console.log(event.loaded + " of " + event.total);
},false);
等等,我刚做什么？
我添加了一个anonymous-function的事件监听器.在这个功能中,我从我们正在听的(下载)传递一个“事件”,并记录了迄今为止已经缓存了多少个文件以及总共有多少个文件.
让我们从所提到的所有事件中,从第一个被叫的事件到最后一个：
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事件：
检查 – 始终触发第一个事件.检查清单中的更新.
下载 – 发现更新时触发.下载清单中指定的资源.
进度 – 针对当前正在下载的每个资源触发.跟踪进度(按文件).
错误 – 如果发生404,410网络错误或下载时更改清单文件,则触发.
过时 – 如果发生404,410网络错误或清单文件不存在(在服务器上),则触发.请注意,此事件将删除以前(和当前)应用程序高速缓存.
缓存 – (仅)第一次触发清单中指定的资源.
noupdate – 如果自从上一次缓存更新以来没有对清单进行更改,则触发.
updateready – 如果下载了新的资源,则触发.
场景处理(错误,事件和触发器)
如果出现问题怎么办？我们可以处理错误和/或过时.
例如
>在清单中指定的文件不存在于服务器上.
>下载时更改清单.
清单文件不存在时(在服务器上)触发过时.
例如
>清单文件从服务器中删除.
>该网站指向无效的URL /路径(< html manifest =“manifest.appcache”/>).
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);
在这里我检查了用户是否有活动的互联网连接.请记住,这只是一个例子,告诉用户可能不是必需的(取决于您的网站).
我们可以做同样的事情过时,但我们可能不想告诉用户它,因为这是一个服务器端的问题：
appCache.addEventListener("obsolete",function(event) {
console.log("Obsolete - no resources are cached,and prevIoUs cache(s) are now deleted.");
},false);
swapCache
现在这是一个棘手的事情.关于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 – appCache示例.
http://www.jefclaes.be/2012/04/visualizing-offline-application-cache.html – 显示FALLBACK.
Is swapCache() required in HTML5 offline apps? – swapCache信息(阅读注释).
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching – 一般的HTTP缓存信息.
