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 状态；断网测试离线页面是否可用。观察网络策略下的响应来源（缓存/网络），确保策略符合预期与安全要求。