Service Worker 离线缓存与更新策略实战

Service Worker 离线缓存与更新策略实战const CACHE_NAME = 'app-v1';

const ASSETS = ['/','/index.html','/static/app.js','/static/app.css'];

self.addEventListener('install', (e) => {

e.waitUntil(

caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS)).then(() => self.skipWaiting())

);

});

self.addEventListener('activate', (e) => {

e.waitUntil(

caches.keys().then(keys => Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k))))

);

self.clients.claim();

});

self.addEventListener('fetch', (e) => {

const req = e.request;

e.respondWith(

caches.match(req).then(m => m || fetch(req))

);

});

要点安装阶段批量缓存核心资源激活阶段清理旧版本并 `clients.claim()`对静态资源优先缓存命中，对动态 API 保持直连或单独策略总结标准的安装、激活与拦截流程可实现可靠的离线支持与可控的更新策略。