登录
首页 >  文章 >  前端

ServiceWorker缓存策略全解析

时间：2025-10-19 14:25:50 300浏览 收藏

在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')) ); });

缓存清理与版本控制

每次更新资源时应升级缓存版本，避免旧缓存影响新功能。可在 activate 事件中清理旧缓存：

const CACHE_VERSION = 'v2'; const CURRENT_CACHES = [CACHE_VERSION]; self.addEventListener('activate', event => { event.waitUntil( caches.keys().then(names => { const deletePromises = names.map(name => { if (!CURRENT_CACHES.includes(name)) { return caches.delete(name); } }); return Promise.all(deletePromises); }) ); });

基本上就这些。合理组合策略、按需缓存、及时清理，就能让 Service Worker 发挥最大效能。

好了，本文到此结束，带大家了解了《ServiceWorker缓存策略全解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

性能优化 缓存策略 ServiceWorker 离线访问 请求拦截
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>