JavaScript Web Worker 怎么使用 Service Worker-js教程-PHP中文网

web worker 无法直接使用 service worker，两者属于不同的 api 范畴且运行环境隔离。若需在 web worker 中实现类似 service worker 的离线缓存或网络拦截功能，必须通过 fetch 事件监听并结合 caches api 手动管理资源，或者在 service worker 内部使用 importscripts() 加载逻辑代码（但这并非 worker 调用 sw）。最可行的做法是在 web worker 中处理数据，而将网络请求和缓存逻辑交由 service worker 处理，并通过 postmessage 进行通信。

JavaScript Web Worker 怎么使用 Service Worker

Web Worker 与 Service Worker 的生命周期差异是什么

Web Worker 由页面脚本主动创建并维持，随页面关闭而终止；Service Worker 由浏览器托管，具有独立的后台生命周期，即使页面关闭也能持续运行以拦截网络请求。这种差异决定了它们不能互相“调用”，而是通过消息传递协作。

JavaScript Web Worker 怎么使用 Service Worker

// service-worker.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll(['/index.html', '/main.js']);
    })
  );
});

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

// main.js
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('SW registered');
    });
}

// worker.js
const worker = new Worker('worker.js');
worker.postMessage({ type: 'DATA', payload: [1, 2, 3] });
worker.onmessage = (e) => {
  console.log('Worker result:', e.data);
};

上述代码展示了标准的注册流程。Service Worker 在 install 阶段预加载资源，在 fetch 阶段拦截请求。Web Worker 则独立运行，通过 postMessage 发送数据，不直接参与网络层控制。

如何在 Web Worker 中触发 Service Worker 的缓存更新

Web Worker 本身没有权限直接操作 Service Worker 的缓存实例，但可以通过向 Service Worker 发送消息来间接触发。由于 Service Worker 是单例且常驻后台，Web Worker 可以通过 navigator.serviceWorker.controller.postMessage() 向其发送指令，Service Worker 收到后执行相应的缓存更新逻辑。

JavaScript 测试模式

使用 Jest、Vitest 和 Testing Library 实施全面的测试策略，包括单元测试、集成测试和端到端测试，涵盖模拟、测试夹具和测试驱动开发。在编

下载

JavaScript Web Worker 怎么使用 Service Worker

// service-worker.js
self.addEventListener('message', (event) => {
  if (event.data.type === 'UPDATE_CACHE') {
    const url = event.data.url;
    caches.open('v1').then((cache) => {
      return cache.add(url);
    }).then(() => {
      self.clients.matchAll().then(clients => {
        clients.forEach(client => {
          client.postMessage({ type: 'CACHE_UPDATED', url });
        });
      });
    });
  }
});

// worker.js
if (navigator.serviceWorker.controller) {
  navigator.serviceWorker.controller.postMessage({
    type: 'UPDATE_CACHE',
    url: '/new-resource.js'
  });
}

navigator.serviceWorker.addEventListener('message', (event) => {
  if (event.data.type === 'CACHE_UPDATED') {
    console.log('Cache updated for:', event.data.url);
  }
});

在此模式中，Web Worker 作为业务逻辑处理器，当检测到需要更新资源时，通过 postMessage 通知 Service Worker。Service Worker 接收到消息后，利用其持有的 caches 对象执行添加操作，并将结果回传给所有客户端窗口或 Worker。这种方式实现了跨上下文的协同工作，避免了直接调用的不可能性。

Service Worker 拦截请求时 Web Worker 如何获取最新数据

当 Service Worker 拦截了网络请求并返回缓存响应时，Web Worker 发起的 fetch 请求会直接获得缓存内容，而非服务器最新数据。若 Web Worker 需要确保获取最新数据，必须在发起请求前清除相关缓存，或在请求头中添加 no-cache 指令强制绕过缓存。

// worker.js
async function fetchFreshData(url) {
  // 方法一：清除特定缓存
  const cache = await caches.open('v1');
  await cache.delete(url);
  
  // 方法二：使用 no-cache 头部
  const response = await fetch(url, { cache: 'no-cache' });
  return response.json();
}

fetchFreshData('/api/data').then(data => {
  console.log('Fresh data:', data);
});

通过显式删除缓存或使用 cache: 'no-cache' 选项，可以确保 Web Worker 发起的请求不被 Service Worker 的缓存策略拦截，从而从网络获取最新数据。这是解决数据一致性的关键手段。