GitHub Pages环境下OneSignal Service Worker安装失败的解决求助

错误信息 #

[Service Worker Installation] Installing service worker failed TypeError: ServiceWorker script at
https://mandi-os.github.io/webdevelop.guide/OneSignalSDK.js?appId=777-777-777-777-777&sdkVersion=160204
for scope https://mandi-os.github.io/webdevelop.guide/ encountered an error during installation. [ServiceWorkerManager.js:294:12]

GET https://mandi-os.github.io/OneSignalSDK.sw.js? // <-- HERE
appId=777-777-777-777-777&sdkVersion=160204    [HTTP/2 404  9917ms]

Uncaught (in promise) Se: Registration of a Service Worker failed.

当前使用代码 #

<!-- Push notifications service worker -->
<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
<script>
  window.OneSignalDeferred = window.OneSignalDeferred || [];
  OneSignalDeferred.push(async function(OneSignal) {
    await OneSignal.init({
      appId: "777-777-777-777-777",
    });
  });
</script>

解决方案 #

问题核心是你的站点部署在GitHub Pages的子目录/webdevelop.guide/，但OneSignal默认从域名根目录请求OneSignalSDK.sw.js，导致404。你可以通过初始化配置手动指定Service Worker的路径和作用域来修复：

修改后的初始化代码 #

<!-- Push notifications service worker -->
<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
<script>
  window.OneSignalDeferred = window.OneSignalDeferred || [];
  OneSignalDeferred.push(async function(OneSignal) {
    await OneSignal.init({
      appId: "777-777-777-777-777",
      // 指定Service Worker的作用域为你的子目录
      serviceWorkerParam: {
        scope: "/webdevelop.guide/"
      },
      // 指定Service Worker文件的正确路径
      serviceWorkerPath: "/webdevelop.guide/OneSignalSDK.sw.js"
    });
  });
</script>

额外步骤 #

1. 获取OneSignalSDK.sw.js文件：从OneSignal控制台或官方资源下载对应的Service Worker文件。
2. 放置文件：将OneSignalSDK.sw.js上传到你的GitHub Pages仓库的webdevelop.guide/目录下，确保部署后可通过https://mandi-os.github.io/webdevelop.guide/OneSignalSDK.sw.js访问。
3. 重新部署：提交修改并重新部署你的GitHub Pages站点。

这样配置后，OneSignal会从子目录正确加载Service Worker，解决安装失败的问题。

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