钟文志的部落格

Appearance

HTML5 应用程序缓存（Application Cache）是 HTML5 提供的一种机制，允许 web 应用程序将其文件缓存到用户的本地设备上，使得应用程序在离线状态下也能够运行。它通过一个描述文件（Cache Manifest）来定义需要缓存的文件列表，包括 HTML 文件、CSS、JavaScript、图片等资源。

基本概念 ​

  1. Cache Manifest：描述文件，其中列出了需要离线访问的资源文件列表。
  2. 缓存：将这些资源文件下载并存储在客户端的浏览器缓存中，即使用户断开了网络连接，应用程序也可以继续运行。
  3. 更新策略：可以通过更新 Cache Manifest 文件来更新应用程序的缓存内容。

Cache Manifest 文件示例 ​

Cache Manifest 文件是一个普通的文本文件，以 .appcache 扩展名结尾，包含三个部分：

  1. CACHE：列出需要缓存的资源文件。
plaintext
CACHE:
/index.html
/style.css
/app.js
  1. NETWORK：列出需要在线访问的资源，不会被缓存。
plaintext
NETWORK:
*
  1. FALLBACK：指定应用程序离线时的替代页面。
plaintext
FALLBACK:
/ /offline.html

基本操作 ​

1. 在 HTML 中引用 Cache Manifest ​

在需要启用应用程序缓存的 HTML 文件的 <html> 标签中，使用 manifest 属性引用 Cache Manifest 文件：

html
<!DOCTYPE html>
<html manifest="example.appcache">
<head>
    <title>Offline Web App</title>
</head>
<body>
    <p>Offline-capable web app content...</p>
</body>
</html>

2. 更新 Cache Manifest 文件 ​

当应用程序的资源文件发生变化时，需要更新 Cache Manifest 文件。可以通过增加文件的注释或者修改文件的时间戳来触发浏览器更新缓存。

3. 使用 JavaScript 控制缓存 ​

可以使用 JavaScript API 来检查缓存状态和手动更新缓存：

javascript
// 检查是否支持应用程序缓存
if (window.applicationCache) {
    var appCache = window.applicationCache;

    // 手动触发缓存更新
    appCache.update();

    // 监听缓存更新事件
    appCache.addEventListener('updateready', function() {
        if (appCache.status === window.applicationCache.UPDATEREADY) {
            // 缓存更新准备好，提示用户重新加载页面
            if (confirm('A new version of this site is available. Load it?')) {
                window.location.reload();
            }
        }
    }, false);
}

注意事项 ​

  1. 浏览器支持：尽管大多数现代浏览器都支持应用程序缓存，但它已经被 HTML5 规范中弃用，推荐使用 Service Worker 替代。
  2. 更新和清除：由于缓存的静态文件更新和清除可能需要手动干预，缓存策略和机制的控制较为复杂。
  3. 安全性：缓存的文件可能存在版本问题，需要确保在更新文件时用户获取到最新的应用程序版本。

尽管 HTML5 应用程序缓存提供了一种简单的方式来实现离线 web 应用程序，但由于其复杂性和一些局限性，推荐使用更现代的技术，如 Service Worker 和 IndexedDB，来实现更可靠和灵活的离线体验。