javascript如何实现service workers？它有什么用

Service Workers是运行在浏览器后台的脚本，独立于当前网页主线程，无需用户交互就能工作，是构建渐进式Web应用的核心技术之一。它主要作用包括拦截和处理网络请求、管理缓存资源、实现离线访问、后台数据同步以及接收推送通知等，能有效提升Web应用的加载速度和弱网环境下的可用性。

Service Workers的核心作用

1. 离线缓存与资源加速

Service Workers可以拦截页面的网络请求，将静态资源、接口数据缓存到本地，当用户再次访问或者处于离线状态时，直接从缓存中返回资源，无需重复请求网络，既加快了加载速度，也实现了离线可用。

2. 后台同步

当用户在网络不稳定的环境下提交数据，Service Workers可以在网络恢复后自动将缓存的请求发送到服务器，保证数据不会丢失，提升用户操作的可靠性。

3. 推送通知

即使网页没有打开，Service Workers也可以接收服务器推送的消息，然后展示系统级的通知，帮助应用提升用户留存和互动率。

JavaScript实现Service Workers的步骤

第一步：注册Service Worker

首先需要在主页面的JavaScript中注册Service Worker文件，注册时需要保证页面处于HTTPS环境或者localhost本地环境，这是Service Workers的运行前提。

// 检查浏览器是否支持Service Worker
if ('serviceWorker' in navigator) {
  // 页面加载完成后注册
  window.addEventListener('load', function() {
    // 注册service-worker.js文件，作用域为当前目录
    navigator.serviceWorker.register('/service-worker.js', { scope: './' })
      .then(function(registration) {
        console.log('Service Worker注册成功，作用域为:', registration.scope);
      })
      .catch(function(error) {
        console.log('Service Worker注册失败:', error);
      });
  });
}

第二步：编写Service Worker文件

Service Worker的生命周期包括安装、激活、拦截请求三个阶段，我们需要在对应的事件回调中编写逻辑。

安装阶段：缓存静态资源

在安装事件中，我们可以打开缓存空间，将需要离线使用的静态资源提前存入缓存。

// service-worker.js
const CACHE_NAME = 'my-site-cache-v1';
// 需要缓存的静态资源列表
const urlsToCache = [
  '/',
  '/index.html',
  '/style.css',
  '/main.js',
  '/logo.png'
];

// 监听安装事件
self.addEventListener('install', function(event) {
  // 等待缓存操作完成后再结束安装阶段
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('缓存空间已打开');
        // 将所有指定资源添加到缓存
        return cache.addAll(urlsToCache);
      })
  );
});

激活阶段：清理旧缓存

当Service Worker更新后，激活阶段可以清理之前版本的旧缓存，避免占用存储空间。

// 监听激活事件
self.addEventListener('activate', function(event) {
  // 需要保留的缓存名称列表
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      // 遍历所有缓存，删除不在白名单中的旧缓存
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            console.log('删除旧缓存:', cacheName);
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

拦截请求阶段：返回缓存或请求网络

通过监听fetch事件，可以拦截页面的所有网络请求，优先返回缓存内容，缓存不存在时再请求网络并缓存结果。

// 监听fetch请求事件
self.addEventListener('fetch', function(event) {
  event.respondWith(
    // 先在缓存中查找请求对应的资源
    caches.match(event.request)
      .then(function(response) {
        // 如果缓存中有该资源，直接返回
        if (response) {
          return response;
        }
        // 缓存中没有，发起网络请求
        return fetch(event.request).then(function(networkResponse) {
          // 检查返回是否有效
          if (!networkResponse || networkResponse.status !== 200 || networkResponse.type !== 'basic') {
            return networkResponse;
          }
          // 克隆响应，因为响应流只能读取一次
          const responseToCache = networkResponse.clone();
          // 将新的请求结果存入缓存
          caches.open(CACHE_NAME)
            .then(function(cache) {
              cache.put(event.request, responseToCache);
            });
          return networkResponse;
        });
      })
  );
});

注意事项

• Service Workers只能在HTTPS环境或者localhost本地环境下运行，正式上线必须配置HTTPS证书。
• Service Worker文件的作用域由其所在目录决定，比如放在根目录的Service Worker可以拦截全站请求，放在/sub目录的只能拦截/sub下的请求。
• 更新Service Worker时，新的文件会在下次页面刷新时进入等待阶段，激活后才会生效，需要合理处理更新逻辑。
• 不要在Service Worker中操作DOM，因为它和主线程是独立的，无法直接访问页面元素。

JavaScriptservice_workers离线缓存后台同步推送通知修改时间：2026-06-10 11:57:18