html5源代码发行后是可以实现离线使用的，核心依赖html5提供的离线存储相关技术规范，目前主流的实现方案有两种，分别是Application Cache和Service Worker，两种方案的实现逻辑和适用场景有一定区别。
方案一：Application Cache实现离线使用
Application Cache是html5早期提供的离线缓存方案，通过配置缓存清单文件，指定需要离线缓存的资源，浏览器会在首次访问时下载这些资源并存储，后续离线时可以直接从缓存中读取资源。
1. 配置缓存清单文件
首先需要创建一个后缀为appcache的清单文件，比如命名为offline.appcache，文件内容需要按照固定格式编写，示例如下：
CACHE MANIFEST # 版本号，修改版本号可以触发缓存更新 # v1.0.0 # 需要缓存的资源列表 CACHE: index.html style.css script.js images/logo.png # 离线时无法访问的资源，会走网络请求 NETWORK: * # 资源请求失败时的 fallback 资源 FALLBACK: / /offline.html
2. 在html页面中引入清单文件
在html页面的html标签上添加manifest属性，指向刚才创建的清单文件，示例如下：
<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
<meta charset="UTF-8">
<title>离线可用html5应用</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>该页面支持离线访问</h1>
<script src="script.js"></script>
</body>
</html>
3. 注意事项
- Application Cache已经被主流浏览器标记为废弃特性，后续可能会被移除支持，不建议在新项目中使用。
- 清单文件的MIME类型需要设置为
text/cache-manifest，否则浏览器无法正确识别。 - 修改清单文件中的内容或者版本号，才会触发浏览器更新缓存，仅修改被缓存的资源本身不会触发更新。
方案二：Service Worker实现离线使用
Service Worker是html5后续推出的更强大的离线解决方案，它是一个运行在浏览器后台的脚本，独立于当前页面，可以拦截网络请求，控制缓存逻辑，是目前官方推荐的离线实现方案。
1. 注册Service Worker
首先在页面的主脚本中添加注册Service Worker的代码，示例如下：
// 检查浏览器是否支持Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
// 注册service-worker.js文件
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
console.log('Service Worker注册成功，作用域为：', registration.scope);
}).catch(function(error) {
console.log('Service Worker注册失败：', error);
});
});
}
2. 编写Service Worker脚本
创建service-worker.js文件，编写缓存和网络请求拦截的逻辑，示例如下：
// 定义缓存名称和需要缓存的资源列表
const CACHE_NAME = 'offline-cache-v1';
const CACHE_URLS = [
'/',
'/index.html',
'/style.css',
'/script.js',
'/images/logo.png'
];
// 安装阶段：缓存指定资源
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(CACHE_NAME).then(function(cache) {
console.log('缓存打开成功');
return cache.addAll(CACHE_URLS);
})
);
});
// 激活阶段：清理旧版本缓存
self.addEventListener('activate', function(event) {
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (cacheName !== CACHE_NAME) {
console.log('删除旧缓存：', cacheName);
return caches.delete(cacheName);
}
})
);
})
);
});
// 拦截请求：优先返回缓存内容，缓存不存在则走网络请求
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
if (response) {
return response;
}
return fetch(event.request).then(function(networkResponse) {
// 将新的网络请求结果缓存起来
if (networkResponse && networkResponse.status === 200) {
let responseClone = networkResponse.clone();
caches.open(CACHE_NAME).then(function(cache) {
cache.put(event.request, responseClone);
});
}
return networkResponse;
});
})
);
});
3. 注意事项
- Service Worker只能在https协议或者localhost环境下运行，正式环境需要配置https。
- Service Worker的作用域由其所在路径决定，比如放在根目录的Service Worker可以拦截所有同域请求。
- 可以通过
self.skipWaiting()和self.clients.claim()让新的Service Worker安装后立即激活，不需要等待页面重新加载。
两种方案对比
两种离线实现方案的特点对比如下：
| 对比项 | Application Cache | Service Worker |
|---|---|---|
| 浏览器支持 | 早期浏览器支持，已废弃 | 现代浏览器均支持 |
| 缓存控制灵活性 | 低，只能通过清单文件配置 | 高，可自定义拦截和缓存逻辑 |
| 适用场景 | 老旧项目维护 | 新项目开发 |
| 更新机制 | 修改清单文件触发 | 可自定义更新逻辑，支持即时更新 |
综合来看，如果是新发行的html5源代码，推荐使用Service Worker实现离线功能，既能保证兼容性，也能获得更灵活的缓存控制能力，满足不同场景下的离线使用需求。
html5离线缓存Application_CacheService_Worker离线功能修改时间：2026-07-14 10:12:30