如何在PWA中同时运行离线Service Worker与OneSignal？

核心问题原因 #

浏览器仅允许同时注册一个Service Worker，因此必须将OneSignal的推送逻辑与你的离线缓存整合到同一个文件中，才能避免功能冲突。

合并后的完整Service Worker脚本 #

// 1. 先导入Workbox（用于离线缓存策略）
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');

// 2. 导入OneSignal SDK脚本（用于推送通知）
importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");

// 离线缓存配置
const CACHE = "pwabuilder-offline";

// 处理SKIP_WAITING消息，用于Service Worker更新
self.addEventListener("message", (event) => {
  if (event.data && event.data.type === "SKIP_WAITING") {
    self.skipWaiting();
  }
});

// 注册离线缓存路由，避开OneSignal相关路径防止冲突
workbox.routing.registerRoute(
  // 排除OneSignal请求路径，仅缓存应用自身资源
  new RegExp('^(?!.*onesignal).*'),
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: CACHE
  })
);

关键注意事项 #

• 导入顺序：必须先加载Workbox，再导入OneSignal SDK，确保依赖加载顺序正确。
• 路由隔离：通过正则表达式排除OneSignal相关请求，避免缓存策略干扰推送逻辑。
• 单一注册：确保PWA仅注册这个合并后的Service Worker文件，删除之前单独的两个Worker注册代码。
• 功能验证：部署后分别测试推送通知和离线访问，可通过浏览器DevTools的Application面板查看Worker状态、缓存内容及订阅情况。

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