Service Worker 安装] 安装 Service Worker 失败 TypeError：无法为范围一信号注册 ServiceWorker？

Question

在检查控制台后，我尝试使用简单的方法在网站上实现一个信号通知，它向我显示此错误。如何在我的网站中实现单一信号通知？

        <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
    <script>
      window.OneSignal = window.OneSignal || [];
      OneSignal.push(function() {
        OneSignal.init({
          appId: "c208302-0-284011-12E8D",
        });
      });
    </script>



ServiceWorkerManager.js:399 [Service Worker Installation] Installing service worker failed TypeError: Failed to register a ServiceWorker for scope ('https://www.simplenikah.pk/') with script ('https://www.simplenikah.pk/OneSignalSDKWorker.js?appId=c3aca046-2d30-4703-9454-c9f2666e3ac1'): A bad HTTP response code (404) was received when fetching the script.
(anonymous) @ ServiceWorkerManager.js:399
a @ tslib.es6.js:63
/OneSignalSDKWorker.js?appId=c3aca046-2d30-4703-9454-c9f2666e3ac1:1 Failed to load resource: the server responded with a status of 404 ()
OneSignalError.js:18 Uncaught (in promise) Pe: Registration of a Service Worker failed.
    at xe.<anonymous> (https://cdn.onesignal.com/sdks/OneSignalPageSDKES6.js?v=151105:1:144815)
    at Generator.next (<anonymous>)
    at r (https://cdn.onesignal.com/sdks/OneSignalPageSDKES6.js?v=151105:1:716)

Answer 1

可能出现的问题

这看起来是与设置相关的常见问题。

Service Worker 文件默认位于 root 。

文件：

• https://example.site/**OneSignalSDKWorker.js**
• https://example.site/OneSignalSDKUpdaterWorker.js -（截至 2021 年 11 月 22 日，“updater”服务工作线程文件不再需要。）参考。 OneSignal 服务工人

问题可能是输入错误，或者如果您使用 OneSignal Push 插件，Worpress 会将文件放入路径为

wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/OneSignalSDKWorker.js

 的文件夹中。
如果您尝试通过添加自定义 

OneSignal 对象初始化，这将引发错误。您在问题中添加的类似代码。

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" 
   async="">
</script>   

---

<script>
    window.OneSignal = window.OneSignal || [];
    OneSignal.push(function() {
       OneSignal.init({
          appId: "YOUR_APP_ID",
       });
    });
</script>

解决问题的选项

因此，要正确设置对象，缺少以下内容：

validscope和path到工作人员。

例如

OneSignal.SERVICE_WORKER_PARAM = { scope: '/push/onesignal/' };
OneSignal.SERVICE_WORKER_PATH = 'push/onesignal/OneSignalSDKWorker.js'

修复此问题或通过将工作文件移动到网站的根目录，或者如果这不是一个选项，则无论选择什么位置，请在

init 配置中指定它。这样OneSignal就会在正确的位置寻找它。

大家在一起会是这样的：

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async="" ></script>
<script>
const OneSignal = window.OneSignal || [];
const initConfig = {
    appId: "YOUR_APP_ID"
};
OneSignal.push(function () {
    OneSignal.SERVICE_WORKER_PARAM = { scope: '/push/onesignal/' };
    OneSignal.SERVICE_WORKER_PATH = 'push/onesignal/OneSignalSDKWorker.js'
    OneSignal.init(initConfig);
});
</script>

参考。 问题 403/404，子目录中的 Service Worker 文件

WordPress - OneSignal 插件

如上所述，如果推送插件正在使用并处于活动状态，任何自定义设置都必须否定默认行为，或停用插件，或者还有一个选项可以关闭插件对象初始化，请参见下文。

插件设置页面 -> 高级设置 -> [ --[+]] 禁用 OneSignal 初始化

对于仍然有效的插件，这里是代码：

window.addEventListener('load', function() {
    window.OneSignal = window.OneSignal || [];
    window.OneSignal.push(function() {
       OneSignal.SERVICE_WORKER_PATH = "wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/OneSignalSDKWorker.js";
      OneSignal.SERVICE_WORKER_PARAM = { scope: "/wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/" };
      delete window._oneSignalInitOptions.path
      window.OneSignal.init(window._oneSignalInitOptions);
    });
  }); 

重要部分：

删除默认路径 -
• delete window._oneSignalInitOptions.path
初始化。在插件的仪表板 UI 中设置值 -
• window.OneSignal.init(window._oneSignalInitOptions);

参考。 Wordpress 自定义

展开配置

进一步扩展功能，在配置中添加设置，例如

const initConfig = {
        appId: "YOUR_APP_ID",
        notifyButton: {
            enable: true
        },
        promptOptions: { 
            ...promtOptions
        }
}

参考。 电子邮件电话号码网络提示

Answer 2

对于像我这样遇到这个问题并在发现 OP 没有回来告诉我们如何解决它时给自己拍脸的人...

对我来说，问题是我从未真正下载并包含 OneSignal Service Worker 文件。

当我们通常将 SDK 与其他东西关联时，一个信号将 Service Worker 文件称为“SDK”...该文件更像是一个下载 Service Worker 代码的“助手”，而不是我们意义上的真正的“SDK”已经习惯了。

所以我必须返回到应用程序配置并下载文件并将其添加到网站的根目录中，我最初从未费心阅读注释，因为我一看到 SDK 就跳过了该部分，因为我知道我不是还没准备好呢。