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 页面具备基本的离线能力了。
