"Service Worker 与渐进式 Web 应用最佳实践"

Service Worker 与渐进式 Web 应用最佳实践概述PWA 通过 Service Worker 与清单文件实现离线能力与可安装体验。本文提供稳定注册、缓存策略与安装提示示例，适合通用前端项目落地。注册与基本缓存// sw.js const CACHE = 'app-cache-v1' self.addEventListener('install', (event) => { event.waitUntil(caches.open(CACHE).then((cache) => cache.addAll(['/','/styles.css','/script.js']))) }) self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request).then((cached) => cached || fetch(event.request)) ) }) // 注册（应用入口） if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js') }) } 清单文件（安装与图标）{ "name": "示例应用", "short_name": "示例", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#2563eb", "icons": [ { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" } ] } 缓存策略建议静态资源：预缓存核心资源；版本变更时更换缓存名并清理旧缓存。API 数据：优先网络，失败回退缓存；或对稳定数据采用缓存优先。细粒度更新：使用 `skipWaiting` 与 `clients.claim` 控制更新生效时机（按场景）。验证要点在浏览器应用面板确认 Service Worker 与 Manifest 状态；断网测试离线页面是否可用。观察网络策略下的响应来源（缓存/网络），确保策略符合预期与安全要求。