离线缓存 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 段落可以以任意顺序出现在缓存清单文件中,并且每个段落可以在同一清单文件中出现多次。

🍭更详细内容