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 頁面具備基本的離線能力了。
