h5页面实现离线访问的关键在于使用service worker技术。它是一种运行在浏览器后台的脚本，能够拦截网络请求、缓存资源并控制页面加载行为。核心能力包括网络请求拦截、资源缓存与更新、推送消息和后台同步。要实现离线访问，需完成以下步骤：1. 注册service worker，通过navigator.serviceworker.register注册sw.js脚本；2. 编写sw.js文件，在install事件中缓存关键资源；3. 在fetch事件中拦截请求，优先从缓存中返回内容。注意事项包括：需https环境或localhost、需手动管理缓存更新及清理旧缓存。掌握这些环节即可为h5页面提供稳定的离线访问能力。
H5页面要实现离线访问功能，关键在于使用 Service Worker 技术。它可以让网页在没有网络连接的情况下仍然展示部分内容，提升用户体验。
什么是 Service Worker？
Service Worker 是一种运行在浏览器后台的脚本，独立于主线程，能够拦截和处理网络请求、缓存资源，甚至推送通知。它不依赖页面存在，也不直接操作 DOM，但能控制页面加载行为。
核心能力包括：
- 网络请求拦截
- 资源缓存与更新
- 推送消息（Push）
- 后台同步（Background Sync）
对于实现离线访问来说，最关键的是利用它的缓存机制。
如何用 Service Worker 实现离线访问？
要让 H5 页面支持离线访问，需要完成以下几个步骤：
1. 注册 Service Worker
首先，在你的主 HTML 文件中注册一个 Service Worker 脚本：
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('Service Worker 注册成功', reg.scope))
.catch(err => console.log('注册失败', err));
}这段代码会检查浏览器是否支持 Service Worker，并尝试注册 sw.js 文件。
2. 编写 Service Worker 文件（sw.js）
在这个文件里，你需要监听安装事件并缓存关键资源：
const CACHE_NAME = 'offline-cache-v1';
const urlsToCache = [
'/',
'/index.html',
'/styles/main.css',
'/scripts/app.js'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});这里定义了一个缓存名称和需要缓存的资源路径，在 Service Worker 安装时将这些资源加入缓存。
3. 拦截请求并返回缓存内容
接下来，你需要监听 fetch 事件，当用户离线时返回缓存内容：
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
if (response) return response;
return fetch(event.request);
})
);
});这样，当用户再次访问页面时，即使断网也能从缓存中加载资源。
常见问题与注意事项
浏览器兼容性
目前主流现代浏览器都已支持 Service Worker，包括 Chrome、Firefox、Edge 和 Safari。但在使用前最好做一下特性检测：
if ('serviceWorker' in navigator) { ... }HTTPS 的限制
Service Worker 只能在 HTTPS 或 localhost 下运行。如果你部署到生产环境，请确保网站有合法的 SSL 证书。
缓存更新策略
初始缓存设置后，如果资源更新了怎么办？你需要手动更新 CACHE_NAME 并重新添加新资源，或者使用更智能的策略如“增量更新”或“缓存优先 + 网络回退”。
清理旧缓存
随着版本迭代，旧的缓存可能不再需要。可以在 activate 事件中清理无用缓存：
self.addEventListener('activate', event => {
const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then(keys => {
return Promise.all(keys.map(key => {
if (!cacheWhitelist.includes(key)) {
return caches.delete(key);
}
}));
})
);
});小结
通过 Service Worker，你可以轻松为 H5 页面增加离线访问能力。整个过程主要包括注册 SW、缓存资源、拦截请求和合理管理缓存。虽然涉及多个步骤，但逻辑清晰、实现不难。需要注意的是 HTTPS 和缓存更新的问题，避免出现“旧内容无法更新”的情况。
基本上就这些，掌握好这几个环节，就能让你的 H5 页面具备基本的离线能力了。
