html5离线存储怎么使用_HTML5 Application Cache配置-html教程-PHP中文网

html5离线存储怎么使用_HTML5 Application Cache配置

雪夜

发布： 2025-10-25 08:44:02

原创

658人浏览过

HTML5离线存储主要通过AppCache实现，需在html标签添加manifest属性指向缓存清单文件；该文件分为CACHE、NETWORK和FALLBACK三部分，定义缓存资源、在线资源及备用页面；服务器须配置.text/cache-manifest MIME类型；浏览器首次访问时下载缓存资源，仅当manifest内容变化才更新；因存在缓存陷阱、更新不灵活等问题，AppCache已被废弃，推荐新项目使用Service Worker与PWA方案。

html5离线存储怎么使用_html5 application cache配置

HTML5 的离线存储功能主要通过 Application Cache（简称 AppCache）实现，允许网页在没有网络连接的情况下依然可以加载和运行。虽然 AppCache 已被现代浏览器逐步弃用（推荐使用 Service Workers 和 PWA 方案），但在一些旧项目或特定场景中仍可能遇到。

1. 启用 Application Cache

要使用 HTML5 离线存储，首先需要在 HTML 文件的 <html> 标签中添加 manifest 属性：

<html manifest="cache.manifest">

立即学习“前端免费学习笔记（深入）”；

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

2. 创建 manifest 缓存清单文件

manifest 文件是一个纯文本文件，包含三部分：CACHE、NETWORK 和 FALLBACK。

示例：cache.manifest

CACHE MANIFEST
# 版本号：v1.0
<p>CACHE:
/index.html
/style.css
/app.js
/images/logo.png</p><p>NETWORK:
/api/*</p><p>FALLBACK:
/offline.html</p>

登录后复制

CACHE: 列出需要被离线缓存的资源，浏览器会优先从本地加载这些文件。
NETWORK: 指定哪些资源不缓存，必须联网才能访问（如 API 接口）。
FALLBACK: 定义当资源无法访问时的备用页面（例如网络断开时显示 offline.html）。

注意：manifest 文件本身也必须被服务器正确识别。你需要配置服务器以返回正确的 MIME 类型。

冬瓜配音

AI在线配音生成器

查看详情

3. 配置服务器 MIME 类型

服务器必须将 .manifest 文件作为 text/cache-manifest 类型返回。

Apache 配置：

AddType text/cache-manifest .manifest

登录后复制

Nginx 配置：

types {
    text/cache-manifest manifest;
}

登录后复制

确保你的 web 服务器已设置此类型，否则 AppCache 将无法正常工作。

4. 浏览器缓存行为说明

当用户首次访问带有 manifest 的页面时，浏览器会自动下载并缓存清单中列出的资源。

一旦资源被缓存，即使网络恢复，浏览器也不会自动更新，除非 manifest 文件内容发生变化（哪怕只是注释中的版本号改变）。
可以通过 JavaScript 监听缓存状态事件，比如检查是否更新：

window.applicationCache.addEventListener('updateready', function() {
  if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {
    window.applicationCache.swapCache(); // 应用新缓存
  }
}, false);

登录后复制