Service Worker 缓存策略：Cache First/Network First/SWR 实战

注册与基础：// main.js

if ('serviceWorker' in navigator) {

navigator.serviceWorker.register('/sw.js')

}

缓存策略实现：// sw.js

const STATIC = 'static-v1'

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

e.waitUntil(caches.open(STATIC).then((c) => c.addAll(['/','/app.css','/app.js'])))

})

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

e.waitUntil(caches.keys().then((keys) => Promise.all(keys.filter(k=>k!==STATIC).map(k=>caches.delete(k)))))

})

// Cache First

async function cacheFirst(req) {

const cached = await caches.match(req)

if (cached) return cached

const resp = await fetch(req)

const cache = await caches.open(STATIC)

cache.put(req, resp.clone())

return resp

}

// Network First

async function networkFirst(req) {

try {

const resp = await fetch(req)

const cache = await caches.open(STATIC)

cache.put(req, resp.clone())

return resp

} catch {

return caches.match(req)

}

}

// Stale-While-Revalidate

async function swr(req) {

const cached = await caches.match(req)

const fetchPromise = fetch(req).then((resp) => caches.open(STATIC).then((c) => c.put(req, resp.clone())).then(() => resp))

return cached || fetchPromise

}

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

const { request } = e

if (request.destination === 'document') e.respondWith(networkFirst(request))

else if (request.destination === 'script' || request.destination === 'style') e.respondWith(cacheFirst(request))

else e.respondWith(swr(request))

})