javascript – 如何使用/创建一个MANIFEST,处理appCache事件/错误和使用swapCache

如何使用和创建一个简单的文件(结构),

处理appCache事件和错误,

什么时候需要swapCache？

解决方法

使用应用程序缓存与清单

要使用应用程序缓存,您需要引用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缓存信息.

javascript – 如何使用/创建一个MANIFEST,处理appCache事件/错误和使用swapCache

解决方法

猜你在找的JavaScript相关文章