I am trying implement one signal notification on website using simple method after checking console it show me this error. How to implement one signal notification in my website?

        <script src=".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 ('/') with script ('.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> (.js?v=151105:1:144815)
    at Generator.next (<anonymous>)
    at r (.js?v=151105:1:716)

I am trying implement one signal notification on website using simple method after checking console it show me this error. How to implement one signal notification in my website?

        <script src="https://cdn.onesignal./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./sdks/OneSignalPageSDKES6.js?v=151105:1:144815)
    at Generator.next (<anonymous>)
    at r (https://cdn.onesignal./sdks/OneSignalPageSDKES6.js?v=151105:1:716)

• javascript
• onesignal

Share Improve this question Follow edited Apr 8, 2021 at 8:54 Dharman♦ 33.5k2727 gold badges101101 silver badges149149 bronze badges asked Dec 6, 2020 at 5:20 mark anthonymark anthony 28711 gold badge66 silver badges1616 bronze badges 8

• Did you solve your issue? – Patricio Vargas Commented Jan 16, 2021 at 6:02
• @devpato yes. I solved it – mark anthony Commented Jan 22, 2021 at 6:36
• niceeeee! How did you solve it? Did you add the service worker files into your project? – Patricio Vargas Commented Jan 22, 2021 at 16:32
• 2 wow dude you could've at least posted an answer. why leave us hanging? – Andor Németh Commented Dec 1, 2022 at 10:51
• 1 @AndorNémeth This has to rank up there as one of the saddest stackoverflow question outes... – Uriahs Victor Commented Aug 29, 2023 at 17:57

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 2

Possible Problem

This looks like a mon issue related to setup.

Service Worker files are expected to be in root by default.

Files:

• https://example.site/**OneSignalSDKWorker.js**
• https://example.site/OneSignalSDKUpdaterWorker.js - ( As of November 22, 2021, the "updater" service worker file is no longer needed. ) ref. OneSignal Service Worker

Problem might be mistype, or in case that you use OneSignal Push plugin, with Worpress, it will put file into a folder with path wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/OneSignalSDKWorker.js. This will provoke an error if you try adding custom OneSignal object initialization via. similar code you added within your question.

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

---

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

Options to fix the issue

So to properly set the object this is what is missing: valid scope and path to the worker.

e.g.

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

Fix this or by moving worker file to root of the website, or if that is not an option, what ever location that is picked, specify it in init config. That way OneSignal looks for it in right place.

All together is going to be like this:

<script src="https://cdn.onesignal./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>

ref. Issues 403/404, Service worker files in a subdirectory

WordPress - OneSignal plugin

As mentioned above in case that push plugin is in use and active, any custom setup must negate default behavior, or deactivate the plugin, or further more there is an option to just switch off the plugin object initialization, see below.

Plugin Settings page -> Advanced Settings -> [ --[+]] Disable OneSignal initialization

For the plugin still active here is the code:

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);
    });
  }); 

Important part:

• Delete default path - delete window._oneSignalInitOptions.path
• Init. with values set in plugin's Dashboard UI - window.OneSignal.init(window._oneSignalInitOptions);

ref. Wordpress customizations

Expand config

Further to expand functionality add setup in config e.g.

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

ref. Email phone number web prompt

For anyone like me ing across this question and giving yourself a facepalm when you notice OP didn't e back to tell us how to solve it...

For me the issue was that I never actually downloaded and included the OneSignal service worker file.

One signal calls the service worker file an "SDK" when usually we associate SDKs with something else...The file is more like a "helper" that downloads the service worker code and not really an "SDK" in the sense we're used to.

So I had to go back to the app config and download the file and added it to the root directory of the site, i initially never bothered reading the note because I skipped that section as soon as I saw SDK since I know I was not ready for it yet.