JavaScript 缓存策略：Service Worker 实现离线缓存-js教程-PHP中文网

JavaScript 缓存策略：Service Worker 实现离线缓存

betcha

发布： 2025-11-05 22:22:02

原创

494人浏览过

Service Worker通过拦截网络请求实现离线缓存，提升Web应用加载速度与离线可用性。

javascript 缓存策略：service worker 实现离线缓存

在现代 Web 应用开发中，提升加载速度和实现离线访问能力是优化用户体验的关键。Service Worker 作为浏览器提供的一种后台运行脚本机制，为 JavaScript 实现离线缓存提供了强大支持。通过它，我们可以拦截网络请求、管理资源缓存，并让应用在无网络环境下依然可用。

什么是 Service Worker

Service Worker 是一个可编程的代理，位于浏览器与网络之间，能够控制页面的网络请求行为。它运行在独立于主线程的上下文中，不会阻塞 UI 操作，且具备以下特性：

离线运行：即使关闭页面也能在后台执行
拦截请求：可以捕获 fetch 请求并返回缓存响应
生命周期独立：注册后会持续安装、激活并监听事件
HTTPS 要求：出于安全考虑，仅在 HTTPS 或本地开发环境（localhost）下可用

实现基本离线缓存流程

要使用 Service Worker 实现离线缓存，需完成注册、安装、激活和请求拦截四个核心步骤。

1. 注册 Service Worker

立即学习“Java免费学习笔记（深入）”；

在主页面 JavaScript 中注册 worker 文件（如 sw.js）：

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

2. 安装阶段 —— 缓存静态资源

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

存了个图

视频图片解析/字幕/剪辑，视频高清保存/图片源图提取

查看详情

const CACHE_NAME = 'v1'; const PRECACHE_LIST = [ '/', '/index.html', '/main.js', '/style.css', '/logo.png' ]; self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => cache.addAll(PRECACHE_LIST)) .then(() => self.skipWaiting()) ); });

3. 激活阶段 —— 清理旧缓存

在 activate 事件中清除过期缓存版本，避免占用过多空间：

self.addEventListener('activate', event => { event.waitUntil( caches.keys().then(keys => Promise.all( keys.filter(key => key !== CACHE_NAME) .map(key => caches.delete(key)) ) ).then(() => self.clients.claim()) ); });

4. 拦截请求 —— 动态缓存策略

通过 fetch 事件实现多种缓存策略，例如优先读取缓存，失败时回退到网络：

self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(cached => cached || fetch(event.request)) ); });

常见缓存策略选择

根据资源类型不同，应采用合适的缓存策略以平衡性能与更新及时性。

Cache First（优先缓存）
适用于不常变动的静态资源，如 CSS、JS、图片等。

caches.match(event.request) .then(r => r || fetch(event.request))

Network First（优先网络）
适合内容频繁更新的数据接口，确保获取最新信息。

fetch(event.request).catch(() => caches.match(event.request) )

Stale-While-Revalidate（旧数据+后台更新）
立即返回缓存内容，同时后台请求更新缓存，兼顾速度与新鲜度。

event.respondWith( caches.match(event.request) .then(cached => fetch(event.request).then(networkRes => { if (networkRes) { caches.open(CACHE_NAME).then(cache => cache.put(event.request, networkRes.clone())); } return cached || networkRes; })) );