JavaScript Service Worker应用实践-js教程-PHP中文网

JavaScript Service Worker应用实践

夢幻星辰

发布： 2025-10-17 14:17:02

原创

338人浏览过

Service Worker通过拦截网络请求实现离线访问与性能优化，需先注册并安装，预缓存关键资源；激活时清理旧缓存并接管页面；采用分层缓存策略如静态资源缓存优先、主文档网络优先；更新依赖内容变更并配合skipWaiting和clients.claim生效，结合DevTools调试确保离线可用性。

javascript service worker应用实践

Service Worker 是现代 Web 应用中实现离线访问、资源缓存和性能优化的关键技术。它本质上是一个运行在浏览器后台的脚本，独立于网页主线程，能够拦截网络请求、管理缓存，并支持推送通知等功能。在实际开发中，合理使用 Service Worker 可显著提升用户体验，尤其是在弱网或无网环境下。

Service Worker 的基本注册与安装

要在项目中启用 Service Worker，首先需要在主页面中注册它。注册过程通常放在入口 JavaScript 文件中：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('SW registered: ', registration);
      })
      .catch(registrationError => {
        console.log('SW registration failed: ', registrationError);
      });
  });
}

登录后复制

接着创建 sw.js 文件，定义安装逻辑。安装阶段适合预缓存关键资源：

const CACHE_NAME = 'v1';
const PRECACHE_URLS = [
  '/',
  '/index.html',
  '/styles/main.css',
  '/scripts/app.js'
];

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

登录后复制

通过 caches.open 创建命名缓存池，并使用 addAll 预加载指定资源。调用 skipWaiting() 确保新 Service Worker 能立即激活，避免等待旧版本释放控制权。

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

激活与缓存清理

当 Service Worker 更新时，会进入激活阶段。此时应清理旧缓存，防止冗余数据堆积：

self.addEventListener('activate', event => {
  const expectedCaches = [CACHE_NAME];

  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(
        keys.map(key => {
          if (!expectedCaches.includes(key)) {
            return caches.delete(key);
          }
        })
      )
    ).then(() => self.clients.claim())
  );
});

登录后复制

clients.claim() 让新 Service Worker 立即接管所有客户端页面，确保缓存策略一致。这一步对保证用户访问的是最新资源非常重要。

网络请求的缓存策略

通过监听 fetch 事件，可以自定义资源加载逻辑。常见的策略包括缓存优先、网络优先或 stale-while-revalidate 模式：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

例如，对静态资源采用缓存优先：

self.addEventListener('fetch', event => {
  const { request } = event;
  const url = new URL(request.url);

  // 静态资源走缓存优先
  if (url.origin === location.origin && /\.(css|js|png|jpg)$/.test(url.pathname)) {
    event.respondWith(
      caches.match(request).then(cached =>
        cached || fetch(request).then(response =>
          caches.open(CACHE_NAME).then(cache => {
            cache.put(request, response.clone());
            return response;
          })
        )
      )
    );
    return;
  }

  // 主文档走网络优先，失败后 fallback 到缓存
  if (request.mode === 'navigate') {
    event.respondWith(
      fetch(request).catch(() =>
        caches.match('/offline.html')
      )
    );
    return;
  }
});

登录后复制

这种分层策略兼顾了速度与内容新鲜度。图片、样式等变动少的资源从缓存读取，而页面内容尝试获取最新版本，无法联网时再展示离线页。