Application Cache

最新推荐文章于 2020-02-04 12:29:29 发布

weixin_34110749

最新推荐文章于 2020-02-04 12:29:29 发布

阅读量105

点赞数

原文链接：https://my.oschina.net/boshu/blog/119122

版权

为什么80%的码农都做不了架构师？>>>

#Application Cache

Application Cache 使网页能够在本地缓存（或保存）资源，包括图像、脚本库和样式表等。此外，AppCache 还允许使用标准的统一资源标识符 (URI) 表示法从缓存内容中提供 URL。

###节指定将被存储与本地的资源清单文件

CACHE MANIFEST

CACHE:
# 指定将被存储在本地的资源
script/library.js
css/stylesheet.css
images/figure1.png

FALLBACK:
# 节指定当其他资源不可用时将使用的资源。例如，此示例将 figure2.png 指定为 photos 文件夹的回滚图像。如果浏览器无法访问 photos 文件夹中的图像（由于浏览器脱机或服务器无法访问），则 figure2.png 将会替换在已呈现标记中的不可用图像。作为结果，figure2.png 将被缓存到本地。
photos/ figure2.png

NETWORK:
# 指定当有网络连接时将要访问的资源。本节中的资源不进行缓存。本节允许使用通配符 (*) 字符以指示所有其他资源都不应该缓存。
figure3.png

清单文件可包含任意数量的这些节，并且可以重复；但新的节必须以节标题开头，且后面要加冒号，如上面的示例所示。如果未提供节标题，则假定使用 CACHE: 标题。下面的示例演示了一个简单的清单。

###此外，清单文件：

必须使用 8 位 Unicode 转换格式 (UTF-8) 字符编码。
必须接受文本/缓存清单 MIME 类型。
必须以“CACHE MANIFEST”行开始。
可以包含注释，但前面必须加英镑标记　(#)。
清单中的文件引用被解释为清单文件的相对位置

###引入清单文件

<html manifest="appcache.manifest">

###ApplicationCache 对象

提供可用来管理应用程序缓存的属性。此外，你还可以定义显示缓存进程进度的事件处理程序。
使用 window 对象的 applicationCache 属性（或 worker 对象）以访问 ApplicationCache 对象。

###更新缓存

ApplicationCache 对象支持两种控制缓存的方法。update 方法启动对更新的异步检查，类似于在首次加载网页时执行的操作。在重新加载该网页或调用 swapCache 方法之前，将会一直使用任何现有的缓存。要开始使用已更新的缓存，需要重新加载网页（手动或以编程方式）或调用 swapCache 方法。当重新加载网页时，因为缓存已更新，所以在重新加载或刷新网页之前不需要调用 swapCache 方法。

update 检查更新
swapCache 手工执行本地缓存的更新,它只能在applicationCache对象的updateReady事件被触发时调用，updateReady事件只有在服务器上的manifest文件被更新，并且把manifest文件中所要求的资源文件下载到本地后触发。该事件的含义是“本地缓存准备被更新”。当这个事件被触发后，可以用swapCache()方法来手工进行本地缓存的更新。

###ApplicationCache 对象事件：

当清单已缓存时，将触发 cached 事件。
当检查是否有更新时，将触发 checking 事件。
当下载清单资源时，将触发 downloading 事件。
在下载清单资源期间，将触发 progress 事件。ApplicationCacheApplicationCache
当出现问题（如 HTML 404 或 410 响应代码）时，将触发 error 事件。当无法下载清单文件时，也会触发该事件。

缓存名单返回一个HTTP404错误或HTTP401错误；
缓存名单被找到且没有更改，但引用缓存名单的HTML页面不能正确下载；
缓存名单被找到且被更改，但浏览器不能下载某个缓存名单中列出的资源；
开始更新本地缓存时，缓存名单再次被更改。

当缓存有更新的版本可用时，将触发 updateready 事件。
请求更新时将会触发 noupdate 事件，但清单不会发生更改。
当现有的缓存被标记为已过时时，将会触发 obsolete 事件。

application cache状态：

UNCACHED 表示app cache未被初始化
IDLE app cache没有在当前更新的进程中。
CHECKING 表示manifest文件正在被获取和检查更新状态。
DOWNLOADING 资源已经被下载，并添加到缓存中，这时还没有更新缓存。
UPDATEREADY 表示一个新版本的app cache可用了，同时会触发一个update ready事件。
OBSOLETE 所有缓存的资源都已经过时

<pre><code>  var sCacheStatus = "Not supported"; if (window.applicationCache) { var oAppCache = window.applicationCache; switch ( oAppCache.status ) { case oAppCache.UNCACHED : sCacheStatus = "Not cached"; break; case oAppCache.IDLE : sCacheStatus = "Idle"; break; case oAppCache.CHECKING : sCacheStatus = "Checking"; break; case oAppCache.DOWNLOADING : sCacheStatus = "Downloading"; break; case oAppCache.UPDATEREADY : sCacheStatus = "Update ready"; break; case oAppCache.OBSOLETE : sCacheStatus = "Obsolete"; break; default : sCacheStatus = "Unexpected Status ( " + oAppCache.status.toString() + ")"; break; } } return sCacheStatus; </code></pre>

application cache类型：