Manifest V3扩展中Service Worker如何监听在线与离线事件

在开发Manifest Version 3的浏览器扩展时，直接在Service Worker中通过self.addEventListener('online')或self.addEventListener('offline')监听网络状态变化事件会失效，虽然可以通过navigator.onLine获取当前状态，但无法收到状态变化的事件通知。

之前尝试的无效代码：

self.addEventListener('online', function () {
    console.log('online')
})
self.addEventListener('offline', function () {
    console.log('offline')
})

可行解决方案 #

方案1：从活跃页面/内容脚本转发事件 #

由于Service Worker可能处于休眠状态，无法直接捕获online/offline事件，可以在内容脚本或后台的活跃页面中监听事件，再通过消息通知Service Worker。

步骤1：在内容脚本或活跃页面中监听并发送消息

// 内容脚本或后台页面代码
window.addEventListener('online', () => {
  chrome.runtime.sendMessage({ type: 'NETWORK_STATUS', status: 'online' });
});

window.addEventListener('offline', () => {
  chrome.runtime.sendMessage({ type: 'NETWORK_STATUS', status: 'offline' });
});

步骤2：在Service Worker中接收消息并处理

// Service Worker代码
self.addEventListener('message', (event) => {
  if (event.data.type === 'NETWORK_STATUS') {
    const { status } = event.data;
    console.log(status);
    // 此处添加你的在线/离线逻辑
  }
});

方案2：Service Worker定时轮询状态变化 #

通过定时检查navigator.onLine的状态，对比上次记录的状态值来模拟事件触发。

// Service Worker代码
let previousOnlineState = navigator.onLine;

// 每秒检查一次，可根据需求调整间隔
setInterval(() => {
  const currentState = navigator.onLine;
  if (currentState !== previousOnlineState) {
    previousOnlineState = currentState;
    if (currentState) {
      console.log('online');
      // 执行在线相关逻辑
    } else {
      console.log('offline');
      // 执行离线相关逻辑
    }
  }
}, 1000);

注意事项 #

• 方案1的实时性更强，但依赖于有活跃的页面或内容脚本在运行；
• 方案2是轮询机制，存在一定延迟，但无需依赖其他页面，适合需要独立监控的场景。

内容的提问来源于stack exchange，提问作者Serega007