能离线使用需显式配置service worker缓存策略，html5本身无离线能力；现代方案仅推荐service worker+cache api，manifest已废弃；最小配置需注册sw、install阶段缓存关键资源、fetch阶段拦截返回缓存。
能离线使用，但不是“放上 HTML 文件就能离线”——必须显式配置资源缓存策略，否则浏览器默认按网络优先加载，断网即白屏或报错。
HTML5 本身不自带离线能力
HTML5 是一套标准规范，html 文件本身只是静态标记。所谓“离线运行”，实际依赖浏览器提供的离线支持机制，核心是 Service Worker + Cache API 或旧式 manifest（已废弃）。现代方案只推荐前者。
-
manifest方式（cache.manifest）在 Chrome 94+、Firefox 85+ 已被完全移除，不可用 -
Service Worker是唯一受标准支持、可精细控制缓存的方案 - 纯静态页面（无 JS）或仅含内联脚本的页面，即使有
index.html，断网后仍可能因引用外部 CDN 资源（如https://cdn.jsdelivr.net/...）而失败
Service Worker 最小可行离线配置
需满足三个条件：注册 SW、监听 install 缓存关键资源、拦截 fetch 返回缓存。以下为最小可用示例：
/* sw.js */
const CACHE_NAME = 'offline-v1';
const OFFLINE_URL = '/offline.html';
<p>self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache => {
return cache.addAll([
'/',
'/index.html',
'/style.css',
'/app.js',
OFFLINE_URL
]);
})
);
});</p><p>self.addEventListener('fetch', event => {
event.respondWith(
fetch(event.request).catch(() => {
return caches.match(event.request).then(response => {
return response || caches.match(OFFLINE_URL);
});
})
);
});注意：sw.js 必须与页面同源，且路径需可被正确注册（如放在站点根目录），注册代码需写在页面的 <script></script> 中：
立即学习“前端免费学习笔记（深入）”；
// 在 index.html 的 <head> 或 <body> 底部
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').catch(console.error);
}常见离线失败原因
多数“离线不工作”问题不是技术不可行，而是配置疏漏：
-
sw.js返回非 200 状态码（如 404、302 重定向）→ 注册直接失败，控制台报Failed to register a ServiceWorker - 缓存列表中漏掉动态请求资源（如 API 接口返回的 JSON、字体文件
.woff2、图片路径带查询参数logo.png?v=2）→ 离线时这些请求无匹配缓存，降级到offline.html或空白 - 开发时未禁用浏览器“Disable cache”选项（DevTools → Network 标签页勾选项）→ 导致 SW 不生效，误判为功能异常
- HTTP 环境下注册 SW 失败（本地双击打开
file://协议不支持 SW）→ 必须通过http://localhost或 HTTPS 提供服务
构建时自动注入离线逻辑（推荐）
手动维护缓存列表易出错。真实项目建议用工具生成：
- Webpack 用户可用
workbox-webpack-plugin，配置globPatterns: ['**/*.{html,js,css,png,jpg}']自动收集 - Vite 用户可用
vite-plugin-pwa，一行配置启用 SW + 清单生成 - 若用静态生成器（如 Hugo、Jekyll），可在构建后脚本中生成
sw.js并写入所有产出文件哈希路径，避免缓存 stale
真正麻烦的从来不是“能不能离线”，而是“哪些资源该进缓存、什么时候更新、如何避免旧 SW 锁死新版本”——这些细节没处理好，用户刷新页面就看到过期内容或空白页。
