如何利用Service Worker实现离线可用的Web应用？

利用Service Worker实现离线可用的Web应用，核心是通过缓存关键资源、拦截网络请求并结合版本管理，使应用在离线时仍能提供核心功能。 以下是具体实现步骤和关键代码示例：

• 作用：在页面加载时注册Service Worker脚本（如sw.js），使其在浏览器后台运行。
• 限制：仅支持HTTPS环境（本地开发时localhost例外）。
• 示例代码：if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js') .then(registration => { console.log('Service Worker注册成功:', registration.scope); }) .catch(error => { console.log('Service Worker注册失败:', error); }); });}
• 说明：检查浏览器兼容性后，注册根目录下的sw.js文件。

• 作用：在Service Worker安装时预缓存关键资源（如HTML、CSS、JS、图片等），确保首次加载后离线可用。
• 关键API：caches.open()和cache.addAll()。
• 示例代码：const CACHE_NAME = 'my-app-v1';const urlsToCache = [ '/', '/styles/main.css', '/scripts/app.js', '/images/logo.png'];self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => cache.addAll(urlsToCache)) );});
• 说明：event.waitUntil()确保所有资源缓存完成前安装流程不中断。

• 作用：监听fetch事件，优先从缓存返回响应，网络不可用时降级使用缓存。
• 常见策略：

  缓存优先：优先返回缓存，无缓存时请求网络。

  网络优先：优先请求网络，失败时返回缓存（适合动态内容）。

• 示例代码（缓存优先）：self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(response => { return response || fetch(event.request); }) );});
• 说明：caches.match()检查请求是否命中缓存，未命中时通过fetch()发起网络请求。

• 作用：应用更新时，通过修改CACHE_NAME触发新Service Worker安装，并在activate阶段清理旧缓存。
• 关键步骤：

  修改CACHE_NAME（如my-app-v2）。

  在activate事件中删除未列入白名单的旧缓存。

• 示例代码：self.addEventListener('activate', event => { const cacheWhitelist = ['my-app-v2']; event.waitUntil( caches.keys().then(cacheNames => { return Promise.all( cacheNames.map(cacheName => { if (!cacheWhitelist.includes(cacheName)) { return caches.delete(cacheName); } }) ); }) );});
• 说明：避免旧缓存占用空间，确保用户始终使用最新资源。

• 动态缓存：对非关键资源（如API数据）采用“网络优先+缓存备份”策略。self.addEventListener('fetch', event => { event.respondWith( fetch(event.request) .catch(() => caches.match(event.request)) );});
• 缓存过期控制：通过Cache Storage API手动清理过期缓存。
• 结合App Manifest：添加manifest.json文件，实现“添加到主屏”功能，提升原生体验。

• 注册：页面加载时注册sw.js。
• 安装：预缓存关键资源，失败时重试。
• 拦截请求：根据策略返回缓存或网络响应。
• 更新：通过版本号管理缓存，清理旧数据。
• 离线体验：用户断网时，Service Worker自动提供缓存内容。

通过以上步骤，可构建一个离线可用的Web应用，其核心优势在于无需网络即可访问核心功能，且通过版本管理确保资源始终最新。实际应用中需根据业务需求调整缓存策略（如缓存时长、资源优先级等）。