17370845950

HTML5 的离线应用功能主要依赖于 Application Cache（简称 AppCache），它允许网页在没有网络连接的情况下依然可以加载和运行。虽然 AppCache 已被现代浏览器逐步弃用（推荐使用 Service Workers 替代），但在一些旧项目中仍可能遇到。以下是其基本配置方法。

什么是 Application Cache

Application Cache 是 HTML5 提供的一种机制，通过一个缓存清单文件（cache manifest），告诉浏览器哪些资源需要离线存储，从而实现离线访问网页的功能。

启用 Application Cache 的步骤

要构建基于 AppCache 的离线应用，需完成以下三个关键步骤：

1. 在 HTML 标签中引用 manifest 属性

在需要支持离线的页面的 标签中添加 manifest 属性：

这个属性指向一个文本文件（通常命名为 cache.manifest），该文件定义了需要缓存的资源列表。

2. 创建缓存清单文件（.manifest）

缓存清单文件是一个纯文本文件，必须以正确的 MIME 类型 text/cache-manifest 被服务器提供。其内容结构如下：

    CACHE MANIFEST

    # 版本号：v1.0


    CACHE:

    /index.html

    /style.css

    /script.js

    /images/logo.png


    NETWORK:

    /api/


    FALLBACK:

    /offline.html
  

说明：

• CACHE: 明确列出需要离线缓存的资源（可省略该标签，默认所有条目都属于缓存）
• NETWORK: 指定哪些资源不缓存，必须在线访问（如 API 接口）
• FALLBACK: 定义备用资源，当请求失败时加载（例如显示 offline.html）
• # 开头为注释，常用于版本控制，修改它可触发缓存更新

3. 配置服务器 MIME 类型

确保 Web 服务器能正确识别 .manifest 文件并返回 text/cache-manifest 类型。例如：

• Apache：在 .htaccess 中添加
  AddType text/cache-manifest .manifest
• Nginx：在配置文件中加入
  types { text/cache-manifest manifest; }

缓存更新机制

浏览器仅在 manifest 文件内容发生变化时才会更新缓存。即使资源本身已更新，只要清单文件未变，就不会重新下载。因此建议在文件中加入版本注释：

# version 1.1

修改版本号即可触发整个缓存的重新下载。

注意事项与局限性

AppCache 存在多个问题，已被现代开发所淘汰：

• 缓存更新机制不灵活，容易导致“更新滞后”
• 一旦资源被缓存，除非清单改变，否则无法获取最新版本
• 调试困难，缓存行为不符合直觉（例如首次加载即缓存）
• 已被主流浏览器标记为废弃

目前更推荐使用 Service Worker + Cache API 实现离线功能，它提供了更精细的控制能力和更好的用户体验。

基本上就这些，如果你维护的是老项目，了解 AppCache 仍有价值；新项目请优先考虑现代方案。