当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript Service Worker入门与实战指南

JavaScript Service Worker入门与实战指南

2026-03-22 16:00:37 0浏览收藏

本文深入浅出地讲解了 Service Worker 这一现代 Web 核心技术的实战应用，从注册激活、静态资源缓存与离线支持，到请求拦截策略、缓存版本管理及热更新机制（如 skipWaiting 和 clients.claim），手把手带你构建可靠、高性能的渐进式 Web 应用；内容兼顾原理与细节，直击开发中常见的路径配置、跨域限制、缓存清理等痛点，助你真正掌握让网站“秒开”且“断网可用”的关键能力。

JavaScript Service Worker实战

Service Worker 是现代 Web 应用中实现离线访问、资源缓存和后台任务的关键技术。它本质上是一个运行在浏览器后台的脚本，独立于网页主线程，能拦截网络请求、管理缓存、推送消息等。下面从实际应用场景出发，带你一步步掌握 Service Worker 的核心用法。

注册并激活 Service Worker

要在页面中启用 Service Worker，首先需要在主 JavaScript 文件或 HTML 的脚本中注册它。

注册代码通常放在页面加载时：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('SW 注册成功，作用域为:', registration.scope);
      })
      .catch(error => {
        console.log('SW 注册失败:', error);
      });
  });
}

这段代码检查浏览器是否支持 Service Worker，如果支持，则在页面加载完成后注册根目录下的 sw.js 文件。注意：Service Worker 文件必须能被正确访问，且处在有效的作用域路径下（通常为网站根目录或子目录）。

缓存静态资源实现离线访问

最常见的用途是缓存关键静态资源（如 HTML、CSS、JS、图片），让用户在无网络时仍可访问页面。

在 sw.js 中监听 install 和 activate 事件：

const CACHE_NAME = 'my-site-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/scripts/app.js',
  '/images/logo.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('activate', event => {
  // 清理旧缓存
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(
        keys.filter(key => key !== CACHE_NAME)
            .map(key => caches.delete(key))
      )
    )
  );
});

install 阶段打开缓存并预加载资源；activate 阶段清理过期缓存，避免占用用户存储空间。

拦截请求并返回缓存内容

通过监听 fetch 事件，可以控制每个网络请求的响应策略。

常用策略：优先读取缓存，若无则发起网络请求并缓存结果。

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(cachedResponse => {
        // 如果缓存中有，直接返回
        if (cachedResponse) {
          return cachedResponse;
        }
        // 否则发起网络请求
        return fetch(event.request).then(response => {
          // 只缓存成功响应，且仅限同源请求
          if (!response || response.status !== 200 || !isSameOrigin(event.request)) {
            return response;
          }
          // 克隆响应流并缓存
          const responseToCache = response.clone();
          caches.open(CACHE_NAME).then(cache => {
            cache.put(event.request, responseToCache);
          });
          return response;
        });
      })
  );
});

// 判断请求是否同源
function isSameOrigin(request) {
  const url = new URL(request.url);
  return url.origin === self.location.origin;
}

这样配置后，用户第二次访问时资源将从缓存加载，显著提升加载速度，并支持离线使用。

更新缓存版本与热更新机制

当应用更新时，需确保 Service Worker 能检测到变化并升级缓存。

关键是修改 CACHE_NAME 版本号，例如改为 my-site-v2。浏览器会发现新的 SW 文件内容不同，触发 install 新实例。

注意：新 Service Worker 安装完成后不会立即接管页面，直到所有已打开的页面关闭旧 SW 控制的会话。可通过跳过等待（skipWaiting）和客户端控制（clients.claim）加速切换：

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(urlsToCache))
  );
  // 安装完成后立即激活，跳过 waiting 状态
  self.skipWaiting();
});

self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(keys.map(key => {
        if (key !== CACHE_NAME) return caches.delete(key);
      }))
    )
  );
  // 激活后立即控制所有客户端
  self.clients.claim();
});

这能让新版本快速生效，适合频繁迭代的应用。

基本上就这些。Service Worker 强大但需谨慎使用，合理设计缓存策略才能真正提升用户体验。调试时建议使用 Chrome DevTools 的 Application 面板查看缓存和 SW 状态。不复杂但容易忽略细节，比如路径问题、缓存更新逻辑、跨域处理等。掌握之后，PWA 就近在眼前了。

今天关于《JavaScript Service Worker入门与实战指南》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！