HTML5离线使用方法及源码实现

大家好，我们又见面了啊~本文《HTML5源代码能离线使用吗？离线功能实现方法》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

能离线使用需显式配置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';
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache => {
return cache.addAll([
'/',
'/index.html',
'/style.css',
'/app.js',
OFFLINE_URL
]);
})
);
});
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 必须与页面同源，且路径需可被正确注册（如放在站点根目录），注册代码需写在页面的