当前位置：首页 > 文章列表 > 文章 > 前端 > ServiceWorker缓存策略全解析

ServiceWorker缓存策略全解析

2025-10-19 14:25:50 0浏览收藏

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《Service Worker智能缓存策略详解》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

Service Worker通过缓存策略提升Web应用性能，支持缓存优先、网络优先、Stale-While-Revalidate等模式；需注册并安装，在install事件中预缓存资源，fetch事件中拦截请求按类型应用策略，activate事件清理旧缓存，实现离线访问与高效加载。

如何利用Service Worker实现智能资源缓存策略？

Service Worker 是浏览器在后台独立运行的脚本，能够拦截网络请求并管理缓存，从而实现离线访问和性能优化。通过合理的缓存策略，可以显著提升 Web 应用的加载速度和用户体验。

理解缓存策略的基本模式

常见的缓存策略有以下几种，可根据资源类型灵活选择：

缓存优先（Cache First）：优先从缓存读取资源，适用于不常变动的静态资源，如 CSS、JS、字体文件。
网络优先（Network First）：优先发起网络请求，失败后再使用缓存，适合内容频繁更新的页面或接口数据。
仅缓存（Cache Only）：直接返回缓存内容，不发起网络请求，适用于已预加载的资源。
仅网络（Network Only）：强制走网络请求，不使用缓存，用于实时性要求高的场景。
Stale-While-Revalidate：先返回缓存内容（即使过期），同时在后台更新缓存，兼顾速度与数据新鲜度。

注册并安装 Service Worker

在主页面中注册 Service Worker，并确保其能正常安装和激活：

navigator.serviceWorker.register('/sw.js') .then(reg => console.log('SW registered:', reg)) .catch(err => console.error('SW registration failed:', err));

在 sw.js 中监听 install 事件，预缓存关键资源：

const CACHE_NAME = 'v1-static'; const PRECACHE_LIST = [ '/', '/styles/main.css', '/scripts/app.js', '/images/logo.png' ]; self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => cache.addAll(PRECACHE_LIST)) ); });

动态缓存与请求拦截

通过 fetch 事件拦截请求，根据资源类型应用不同策略：

self.addEventListener('fetch', event => { const { request } = event; const url = new URL(request.url); // 静态资源：缓存优先 if (url.origin === self.location.origin && /\.(css|js|png|jpg|jpeg|svg|woff2?)$/.test(url.pathname)) { event.respondWith( caches.match(request) .then(cached => cached || fetch(request).then(response => { const responseClone = response.clone(); caches.open(CACHE_NAME).then(cache => cache.put(request, responseClone)); return response; })) ); return; } // API 请求：Stale-while-revalidate if (url.pathname.startsWith('/api/')) { event.respondWith( caches.match(request).then(cached => cached || fetch(request)) ); event.waitUntil( fetch(request).then(freshResponse => { caches.open('api-cache').then(cache => cache.put(request, freshResponse)); }) ); return; } // 兜底：网络优先 event.respondWith( fetch(request).catch(() => caches.match('/offline.html')) ); });