离线缓存 AppCache

发表于

什么是应用程序缓存（Application Cache）?

HTML5 提供一种应用程序缓存机制，使得基于web的应用程序可以离线运行。开发者可以使用 Application Cache (AppCache) 接口设定浏览器应该缓存的资源并使得离线用户可用。 在处于离线状态时，即使用户点击刷新按钮，应用也能正常加载与工作。

优势

  • 离线浏览: 用户可以在离线状态下浏览网站内容。
  • 更快的速度: 因为数据被存储在本地，所以速度会更快。
  • 减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源。

浏览器支持

所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。

启用应用程序缓存

1
2
3
4
<!DOCTYPE HTML>
<html manifest="example.appcache">
...
</html>

如上，若想为应用启用应用缓存，需要在应用页面中的 元素上增加 manifest 特性
manifest 文件需要配置正确的 MIME-type，即 text/cache-manifest。必须在 web 服务器上进行配置。

加载文档

application cache的使用会修改文档的加载过程：

  • 如果应用缓存存在，浏览器直接从缓存中加载文档与相关资源，不会访问网络。这会提升文档加载速度。
  • 浏览器检查清单文件列出的资源是否在服务器上被修改。
  • 如果清单文件被更新了, 浏览器会下载新的清单文件和相关的资源。 这都是在后台执行的，基本不会影响到webapp的性能。

加载文档与更新应用缓存的流程：

  • 当浏览器访问一个包含 manifest 特性的文档时，如果应用缓存不存在，浏览器会加载文档，然后获取所有在清单文件中列出的文件，生成应用缓存的第一个版本。
    对该文档的后续访问会使浏览器直接从应用缓存(而不是服务器)中加载文档与其他在清单文件中列出的资源。此外，浏览器还会向 window.applicationCache 对象发送一个 checking 事件，在遵循合适的 HTTP 缓存规则前提下，获取清单文件。
  • 如果当前缓存的清单副本是最新的，浏览器将向 applicationCache 对象发送一个 noupdate 事件，到此，更新过程结束。注意，如果你在服务器修改了任何缓存资源，同时也应该修改清单文件，这样浏览器才能知道它需要重新获取资源。
  • 如果清单文件已经改变，文件中列出的所有文件—也包括通过调用 applicationCache.add() 方法添加到缓存中的那些文件—会被获取并放到一个临时缓存中，遵循适当的 HTTP 缓存规则。对于每个加入到临时缓存中的文件，浏览器会向 applicationCache 对象发送一个 progress 事件。如果出现任何错误，浏览器会发送一个 error 事件，并暂停更新。
  • 一旦所有文件都获取成功，它们会自动移送到真正的离线缓存中，并向 applicationCache 对象发送一个 cached 事件。鉴于文档早已经被从缓存加载到浏览器中，所以更新后的文档不会重新渲染，直到页面重新加载(可以手动或通过程序)。

缓存清单（Manifest）文件

一个缓存清单文件

  • web 应用中的 manifest 特性可以指定为缓存清单文件的相对路径或一个绝对 URL(绝对 URL 必须与应用同源)。缓存清单文件可以使用任意扩展名，但传输它的 MIME 类型必须为 text/cache-manifest。

manifest 文件可分为三个部分：

  • CACHE - 缓存文件中记录所属的默认段落。在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 段落标题下列出的文件是需要与服务器连接的白名单资源。在此标题下列出的文件需要与服务器的连接，且不会被缓存
  • FALLBACK - 段指定了一个后备页面，当资源无法访问时，浏览器会使用该页面。在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

CACHE， NETWORK， 和 FALLBACK 段落可以以任意顺序出现在缓存清单文件中，并且每个段落可以在同一清单文件中出现多次。

🍭更详细内容