Ale*_*izi 10 javascript events application-cache cache-manifest html5-appcache
你如何使用和创建一个MANIFEST文件(结构),
处理appCache事件和错误,
什么时候需要swapCache？
Ale*_*izi 44
要使用应用程序缓存,您需要引用HTML文档中的清单文件,如下所示:
<html manifest="manifest.appcache"/>
清单文件本身需要预定的布局才能工作.
CACHE MANIFEST 是必需的,并且需要位于顶部(这样当浏览器检查它是否是缓存清单时,它返回true).
CACHE 是可选的,但建议使用,并用于引用您希望在本地缓存的文件.
FALLBACK是可选的,用于指定在指定的(in CAHCE)不可用时应该使用的文件.指定的第一个文件(in 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;).
当用户第一次进入站点(或者不存在清单缓存)时,会触发以下事件; 如果一切正常:
用清单创建应用程序缓存
应用缓存检查
应用程序缓存下载
应用程序缓存进度(X中的0)
应用程序缓存已缓存
让我们分解吧.
first(Creating Application Cache)指定浏览器稍后使用的缓存"文件/文件夹".
第二个(Application Cache Checking)" checking"查看清单文件内部以查看它需要缓存的内容.
第三个(Application Cache Downloading)" downloading"开始清单中指定的文件的下载过程.
第四个(Application Cache Progress)" progress"跟踪下载进度(这是针对每个文件触发的).
第五个(Application Cache Cached)" cached",简单地说"我已经完成"缓存文件,一切都按原样进行.
这是什么意思？这意味着我们可以控制事件,如果我们愿意,可以触发我们自己的事件.
因此,通过收听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 - 如果发生404,410网络错误,或者在下载时更改了清单文件,则触发.
obsolete - 如果发生404,410网络错误,或者清单文件不存在(在服务器上),则触发.请注意,此事件将删除以前(和当前)应用程序缓存.
cached - (仅)在第一次缓存清单中指定的资源时触发.
noupdate - 如果自上次缓存更新后未对清单进行任何更改,则触发.
updateready - 如果下载了新资源,则触发.
如果出现问题怎么办？我们可以用error和/或处理obsolete.
error 在更新时出现问题时触发.
例如
obsolete 清单文件不存在时(在服务器上)触发.
例如
<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);
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.
HTML5离线应用程序中是否需要swapCache()？ - swapCache信息(也可以阅读注释).
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching - 常规HTTP缓存信息.