HTML5 应用程序缓存 – 来学习啦 – 编程乐园，实战驱动的编程学习平台

HTML5 应用程序缓存

天天向上

发布： 2025-02-23 14:58:25

原创

933 人浏览过

HTML5 应用程序缓存（Application Cache）是 HTML5 中的一项功能，允许 Web 应用在没有互联网连接的情况下继续工作。通过在浏览器本地存储资源（如 HTML 文件、CSS 文件、JavaScript 文件、图片等），Web 应用可以在离线模式下访问并使用这些资源，从而提供更好的离线体验。

一、应用程序缓存的工作原理：

应用程序缓存通过一个 manifest 文件 来控制哪些资源被缓存，哪些不被缓存。浏览器会在访问 Web 应用时，自动下载并缓存指定的文件。当用户处于离线状态时，浏览器会从缓存中加载这些资源，从而使应用能够继续工作。

二、配置应用程序缓存：

创建 manifest 文件： 在 HTML 中引用 manifest 文件，告知浏览器哪些资源需要缓存。
指定资源： 在 manifest 文件中列出需要缓存的文件。
离线访问： 当用户访问时，浏览器会自动加载缓存中的资源。

三、示例代码：

1. 创建 manifest 文件

一个 manifest 文件是一个纯文本文件，扩展名为 .appcache。在这个文件中，列出需要缓存的资源，以及一些其他的指令。

示例 appcache.manifest：

CACHE MANIFEST
# 版本号
# 2025-02-23

CACHE:
# 需要缓存的资源
index.html
styles.css
script.js
image.jpg

NETWORK:
# 不缓存的资源（比如从服务器获取）
login.html
api/

FALLBACK:
# 离线时的替代页面
/login.html /offline.html

CACHE： 列出需要缓存的文件和资源。当应用首次加载时，这些资源会被下载并存储在本地缓存中。
NETWORK： 列出需要实时从网络获取的资源，浏览器不会缓存它们。对于需要通过网络请求的数据，可以在这里列出。
FALLBACK： 指定离线时的替代资源。例如，如果应用无法访问某个页面，可以指定一个默认的离线页面。

2. 在 HTML 文件中引用 manifest

在 HTML 文件中，通过 manifest 属性来链接 manifest 文件：

<!DOCTYPE html>
<html manifest="appcache.manifest">
<head>
  <meta charset="UTF-8">
  <title>My Offline App</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to my offline app!</h1>
  <script src="script.js"></script>
</body>
</html>

3. 访问应用时的缓存行为

首次加载： 浏览器会下载并缓存 appcache.manifest 中列出的所有资源（CACHE 部分），并将其保存在本地。
离线访问： 当用户处于离线状态时，浏览器会从缓存中加载页面和资源，并允许应用继续运行。
更新缓存： 当 manifest 文件发生变化时，浏览器会检查是否有更新的资源，如果有更新，它会重新下载并缓存新的资源。

四、事件和方法：

HTML5 应用程序缓存支持一些事件和方法，用于管理缓存的生命周期。

1. 事件：

ondownloading：当浏览器开始下载应用程序缓存文件时触发。
onprogress：在文件下载过程中，浏览器触发此事件，用于显示进度。
oncached：当所有缓存完成并且资源已经存储在本地时触发。
onerror：如果缓存过程中出现错误，则触发此事件。
onupdateready：当更新缓存时触发，意味着有新的文件版本可以更新到浏览器缓存中。

2. 示例：

window.applicationCache.addEventListener('updateready', function() {
  if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    window.location.reload();
  }
}, false);

window.applicationCache.addEventListener('error', function() {
  console.error("Application Cache Error!");
}, false);

3. 管理应用程序缓存：

window.applicationCache： 可以通过这个对象访问应用程序缓存的状态，并控制缓存的更新。

示例：

// 检查缓存的状态
if (window.applicationCache.status == window.applicationCache.IDLE) {
  console.log("应用程序缓存是最新的");
} else if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
  console.log("有新版本的应用程序缓存");
}

五、应用程序缓存的生命周期：

初始加载： 当页面首次加载时，浏览器会下载并缓存所有列在 CACHE: 部分的资源。
离线访问： 如果网络不可用，浏览器会从缓存中提供资源。
更新缓存： 当 appcache.manifest 文件变化时，浏览器会更新缓存，重新下载最新的资源。
错误和回退： 如果某些资源无法缓存或加载失败，浏览器会触发 onerror 事件，并可提供回退资源。

六、应用程序缓存的优缺点：

1、优点：

离线功能： 允许 Web 应用在没有互联网连接的情况下继续工作。
加速加载： 资源被缓存后，应用加载速度更快，减少了服务器请求。
简单易用： 只需添加一个 manifest 文件，且没有复杂的配置。

2、缺点：

不再推荐使用： HTML5 应用程序缓存已被弃用，现有浏览器支持，但未来浏览器可能不再支持此技术。
更新机制： 更新缓存比较复杂，当 manifest 文件发生变化时，需要手动刷新缓存，且不能保证所有用户及时获得更新的资源。
有限的控制： 应用程序缓存是一个全局的缓存机制，不能对每个资源设置精细的缓存策略。
替代技术： 更现代的技术如 Service Workers 已经取代了应用程序缓存，提供了更强大的离线功能和更好的缓存管理。

七、推荐的替代方案：Service Workers

由于 HTML5 应用程序缓存已被弃用，Service Workers 是更现代且功能更强大的离线解决方案。Service Workers 提供了对缓存的细粒度控制，可以拦截网络请求、进行缓存管理、并且支持后台同步等功能。

总结：

HTML5 应用程序缓存允许 Web 应用在离线时使用本地缓存的资源，但由于其局限性和未来的弃用，现在建议开发者使用 Service Workers 来实现离线功能。