How to Fix OneSignal Plugin Service Worker Scope Conflict?

How to Fix OneSignal Plugin Service Worker Scope Conflict?

OneSignal service worker doesn’t work well with service workers or progressive web apps (PWA) having a root scope path. As multiple service workers can’t work on the same scope path, you must register a different scope path for the OneSignal service worker file.

OneSignal Service Worker Error in Chrome Console

HEY! If you are not using WordPress, this tutorial is not for you! Please make sure you have version 2.2.1+ of the OneSignal WordPress Plugin to make this setup. You also don’t need to follow this tutorial if there’s no service worker related errors with OneSignal plugin.

Change OneSignal Service Worker Scope Path

OneSignal plugin’s service worker defaults to a root scope which may create conflicts. You can change the OneSignal service worker scope path by following the two simple steps.

Step 1: Enable Custom Setup

From the WordPress Admin, go to OneSignal Push Plugin Settings > Advanced Settings and turn on “Disable OneSignal Initialization” to enable the custom setup.

Disable OneSignal Initialization WordPress

This will disable OneSignal initialization in the front end of your site. Now you can install custom code to set up OneSignal push notifications by changing the scope path.

Step 2: Install Custom Settings

To change the OneSignal service worker scope path and other default service worker files to avoid conflicts, you can add the following code to your WordPress site:

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_UPDATER_PATH = "wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/OneSignalSDKUpdaterWorker.js";
        OneSignal.SERVICE_WORKER_PARAM = { scope: "/wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/push/onesignal/" };
        delete window._oneSignalInitOptions.path;
        window.OneSignal.init(window._oneSignalInitOptions);
    });
});

You don’t need to change anything at all, it’ll work just fine. Don’t know how to add code snippets? We’ve an in-depth article on how to add code snippets to a WordPress site.

That’s it! There won’t be any service worker related conflicts with OneSignal WordPress plugin after this. Please visit OneSignal troubleshooting guide for web push related problems.

Leave a Reply

Your email address will not be published. Your comments must follow our guidelines.