应用缓存（Application Cache，简称 AppCache）是一种已经被废弃的 Web 技术，用于让 Web 应用能够在用户的浏览器上离线运行。尽管这项技术已经过时，但了解其基本原理和运作方式仍然有助于理解前端缓存策略的发展。现代前端开发中，我们更常使用 Service Workers、IndexedDB、Cache API 等技术来实现离线缓存和性能优化。
如何实现应用缓存（以 AppCache 为例）
创建缓存清单文件：
创建一个以 .appcache 为扩展名的文件（例如 cache.appcache），这个文件列出了所有需要缓存的资源。
配置 HTML：
在 HTML 文件的 标签中添加 manifest 属性，指向缓存清单文件。例如：。
定义缓存清单内容：
在缓存清单文件中，列出需要缓存的文件。例如：
CACHE MANIFEST
# v1.0
index.html
style.css
script.js
还可以指定其他指令，如 NETWORK:（列出需要在线访问的资源）和 FALLBACK:（指定后备资源）。
更新缓存：
当修改了缓存清单文件或其列出的任何文件时，浏览器会尝试重新下载这些文件并更新缓存。
对 Manifest 的理解（在前端开发中）
在前端开发中，“manifest” 通常指的是 Web 应用清单文件（Web App Manifest），它是一个 JSON 文件，用于提供有关 Web 应用的元数据，如应用的名称、图标、启动画面、主题颜色等。这个文件通常命名为 manifest.json，并通过 HTML 文件的 标签引用。
Web 应用清单文件使 Web 应用能够像原生应用一样安装在用户的设备上，并提供更丰富的用户体验。例如，用户可以将 Web 应用添加到设备的主屏幕，使其具有与原生应用相似的启动和交互体验。
Web 应用清单文件的基本结构如下：
{
"name": "My Web App",
"short_name": "MyApp",
"icons": [
{
"src": "launcher-icon-1x.png",
"sizes": "48x48",
"type": "image/png"
},
// ... 其他图标尺寸和类型
],
"start_url": "/index.html",
"background_color": "#fff",
"display": "standalone",
"scope": "/",
"theme_color": "#000"
}
这个文件中包含了应用的名称、图标、启动 URL、背景颜色、显示模式、作用域和主题颜色等信息。这些信息被用于定义应用在不同设备上的表现和行为。
现代前端缓存策略
由于 AppCache 已被废弃，现代前端开发中更推荐使用以下技术来实现缓存策略：
Service Workers：这是一种在浏览器后台运行的脚本，能够拦截和处理网络请求，包括可编程的缓存管理。Service Workers 提供了强大的离线支持和推送通知功能。
IndexedDB：这是一个事务型数据库系统，可以在浏览器中存储大量结构化数据，包括文件/二进制数据。它提供了比 localStorage 更强大和灵活的数据存储解决方案。
Cache API：这是一个与 Service Workers 配合使用的 API，用于在浏览器中存储和检索资源。它提供了一种更细粒度的缓存控制机制。
HTTP 缓存头：通过设置正确的 HTTP 缓存头（如 Cache-Control、Expires、ETag 等），可以控制浏览器如何缓存和验证资源。这是一种服务器端的缓存策略实现方式。