Guides
Log InSign Up

Web SDK troubleshooting

Common setup issues with Web Push (Chrome, Firefox, Safari, etc.)

Suggest Edits

OneSignal prints helpful error messages in your browser's Developer Tools Console when viewing your site with the OneSignal code active. It's recommended to double-check the Web Setup first to make sure you added both: 1) the OneSignal Javascript code into the head tags of your site and 2) the Service Worker file correctly. Then, follow the steps below for further troubleshooting:

  1. In a new browser profile, go to your website with the OneSignal code active. Do not use a private browser or incognito mode! You cannot subscribe to push notifications in these modes.
  2. Open the browser's Developer Tools Console with F12, or right-click the browser and press "Inspect", or go to "View > Developer > JavaScript Console".
  3. Subscribe to your website and check for the following errors:

Error Messages

403 or 404 Service Worker Installation Errors

[Service Worker Installation] Installing service worker failed TypeError: Failed to register a ServiceWorker for scope ('https://www.yoursite.com/') with script ('https://www.yoursite.com/...'): A bad HTTP response code (403) was received when fetching the script.

There is a common error thrown when trying to connect with the OneSignal Service Worker files. More details on how to fix this see: 403 or 404 Service Worker Installation Errors.

Web Push Config can only be used on "correct site origin"

Your current site origin does not match your settings in the OneSignal Dashboard. See Incorrect Site Url Error.

OneSignal is already defined

The OneSignal web SDK can only be initialized once. You added the OneSignal init code twice, usually if you have our WordPress plugin and added code directly. See OneSignal Initialized Twice.

Redirects are not allowed

The OneSignal Service Worker files are being redirected but should be in the root directory and accessible. See CDN and Redirects.

Unsupported MIME type Error

The OneSignal Service worker files OneSignalSDKWorker.js and OneSignalSDKWorker.js must be transferred with the MIME content-type application/javascript.

403 & 404 Service Worker Errors

After you try subscribing to your site, if you see a 403 or 404 error in your Browser Console and/or in your onesignal.com Dashboard > Audience > All Users page, that means something is blocking the OneSignal Service Worker files from being publicly accessible.

These files must be spelled with the upper case letters and not redirects. You should be able to visit these pages without any errors.

If you followed the Typical Setup or Custom Code Setup (HTTPS sites that do not use the OneSignal Plugin) should be able to view them at:

  • https://yoursite.com/OneSignalSDKWorker.js

If you use OneSignal WordPress Plugin should be able to view them at:

  • https://yoursite.com/wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/OneSignalSDKWorker.js.php

Please make sure you added these files correctly by following our Service Worker Setup.

If still having issues, common reasons for these being being inaccessible:

CDN Issues or Redirects

Make sure OneSignalSDKWorker.js is being served from the same top-level domain of your site. It cannot be served by a CDN or a redirect or a domain other than the domain the visitor is currently on. See the Same Origin Policy Guide for more details on this browser restriction.

WordPress Plugin Users see common CDN and Cacheing Plugins to fix this.

Non-WordPress users see our OneSignal Service Worker FAQ if you cannot add the files to the root directory.

PWA or Multiple Service Workers

If you are integrating OneSignal into a site with an existing service worker (like a PWA), you may have to merge service workers in order for OneSignal to work correctly. See OneSignal Service Worker FAQ for more details.

How do I check if my OneSignal service-worker is configured correctly?

In your browser's development tools, go to the Service Workers section (under "Application" tab in Chrome) and look for "OneSignalSDKWorker.js" as the source for the service-worker for your domain. Detailed Steps to Reproduce.

If you do not see the OneSignal service worker there, you have not configured OneSignal correctly.

If you only see a different service-worker on your site, it may be causing a conflict with OneSignal's service-worker. Try merging the service-workers to resolve the issue.

Incorrect Site URL

Make sure your site URL is correct.

  • www and non-www are different. Set the site URL in OneSignal based on the version you want to use.
  • Ignore Subdirectories having a subdirectory like /blog does not affect this and can be ignored for setup purposes.

Wrong Browser, Viewing Mode, or Browser Version

  1. Make sure you are testing with the latest version of Chrome or Firefox.
  2. Do not use incognito mode, private browser mode or guest browser mode or Firefox's ESR versions. Subscription to push does not work in these modes.
  3. Supported browsers can be viewed in the Web Push Overview.

My site isn't working on my mobile phone

iOS - See Safari Web Push on iOS for requirements.

Android - Web push works automatically on android mobile devices using a supported browser.

  1. First make sure your site works on Desktop before testing on mobile.
  2. You may be subscribed on android web already, but our dashboard does not differentiate mobile web subscribers from desktop web subscribers. An android web subscriber shows as Linux armv8l in the Device column of the "All Users" page.
  3. Check if Notifications are enabled on Chrome in your Android Settings > Application Manager > Chrome. Make sure "Show notifications" is checked like this: https://i.imgur.com/LY810Mj.png on Firefox it will be the same: https://i.imgur.com/a3lB88b.png
  4. Clear your Chrome Cache. If your browser cache is full on mobile, this may not allow further prompting or subscription. See Clearing your cache and resetting push permissions based on your browser to test your site again.
  5. Some users reported that uninstalling Chrome and re-installing it on the mobile device fixed an issue where subscription on the prompt would not work.

Safari Troubleshooting

1 - The Site URL set in the Safari Config must be exactly what you see when visiting the site. For example, if you see https://www.yoursite.com in the browser, then you must add this to the setup field. www and non-www sites are different origins.

2 - Safari 12.1+ created a new rule that users must perform some action on the site before they can get prompted

You must use the Slide Prompt on Safari. This is why the slide prompt always shows before native if you use our Typical Setup.

If you want to use only the native browser prompt, you will need to setup your own trigger to detect a user action. Then call OneSignal.showNativePrompt(); when you want to show the native prompt. Otherwise, please use the OneSignal.showSlidedownPrompt(); if you are having issues.

3 - Finally, try Clearing your cache and resetting push permissions to see your site as a first time user and try to subscribe again.

Safari Icons Or Site Name Not Changing

Due to Safari's custom web push implementation, your site name and icon image are treated as static resources downloaded and stored locally on the user's computer. New site names and new images are not updated or downloaded.

Unfortunately anyone subscribed with these older resources will need to clear your cache and resetting push permissions and return to the site to resubscribe.

Clearing your cache and resetting push permissions

See Clearing your cache and resetting push permissions for more details.

Debugging using Browser Developer Tools

The browser's developer tools can be used to interact with the web SDK on your webpage and enable logging or easily send test notifications to yourself.

1. Access the Browser Developer Tools Console

1510

Desktop Debugging

Chrome - Right click on the page, click Inspect, and click the Console tab of the popup window that opens up.

Firefox - Right click on the page, click Inspect element, and click the Console tab of the popup window that opens up.

Safari - Go to Safari -> Preferences -> Advanced and make sure Show Develop menu in menu bar is checked. Then, on your webpage, right click, click Inspect element, and click the Console tab of the popup window that opens up.

Android Debugging

Chrome on Android - Enable USB Debugging, connect your device into your computer and access the Dev Tools with chrome://inspect#devices in your Desktop Chrome browser.

Firefox on Android - [Enable USB Debugging(https://developer.mozilla.org/en-US/docs/Tools/about:debugging), connect your device into your computer and access the Dev Tools with about:debugging in your Desktop Firefox browser.

2. Enable web SDK logging

You should be able to run commands in the developer tools Console now.

Execute the following code:

OneSignal.Debug.setLogLevel('trace');

You should see undefined as the result.

If you see:

Uncaught ReferenceError: OneSignal is not defined(…) or ReferenceError: OneSignal is not defined, then OneSignal is not active on your webpage, or you need to switch to the top frame context (see above screenshot at the beginning of this section).

Now that our web SDK's debug logging is enabled, please close the tab and open a new tab to the same page (refreshing the page is not enough to trigger some of our SDK events). You should see a lot of output in the Console.

2880

You can always disable this additional logging by entering this code:

OneSignal.Debug.setLogLevel('warn');

3. Check if you are subscribed

Run in the Console:

function getUserInfo() {
	console.log('getUserInfo()');
	Promise.all([
		OneSignal.Notifications.permission,
		OneSignal.User.PushSubscription.id,
		OneSignal.User.PushSubscription.token,
		OneSignal.User.PushSubscription.optedIn,
		OneSignal.context.serviceWorkerManager.getActiveState(),
	])
		.then(
			([
				isSubscribed,
				subscriptionId,
				pushToken,
        optedIn,
				serviceWorkerActive,
			]) => {
        console.log('What is the current URL of this page?', location.href);
         console.log(
					"Is a service worker registered and active? (should be false on Safari, otherwise should be 'OneSignal Worker')?",
					serviceWorkerActive
				);
        console.log('')
        console.log('Are you subscribed, in the browser?', isSubscribed)
        console.log('Are you opted-in, in OneSignal?' , optedIn);
				console.log('');
				console.log('What is your OneSignal Subscription ID?', subscriptionId);
				console.log('What is your Push Token?', pushToken);
				
			}
		)
		.catch(e => {
			console.error('Issue determining whether push is enabled:', e);
		});
}
getUserInfo();

Depending on whether you are subscribed, you should see similar to the below:

What is the current URL of this page? http://localhost:8080/
Is a service worker registered and active? (should be false on Safari, otherwise should be 'OneSignal Worker')? OneSignal Worker

Are you subscribed, in the browser? true
Are you opted-in, in OneSignal? true
 
What is your OneSignal Subscription ID? 22ff6b0d-60e1-469d-b667-005274204322
What is your Push Token? https://fcm.googleapis.com/fcm/send/drKvxiBc9Eo:APA91bFoa88bzkuudYFmuyNb8uIA60dI44SnBbXi0_4GAYa2Ln07XzrOs1-k5KVxrwKf8oVxBvzIXVN-44bamCRkaQ6cFODy7-8slGgnV3i2OqS3EgYrzU6VcO1KZaBHacsZhqvWqIRv

4. Send yourself a test notification

Only if you are subscribed (see above section), you can send yourself a test notification. See Find & Set Test Subscriptions for details.

Make sure you aren't blocking notifications at the operating system level. See Notifications Not Shown: Web Push.

Debugging not receiving Chrome notifications

Note: Please complete these steps in order.

  1. Please follow steps 1 - 4 in the above section Debugging using Browser Developer Tools to try receiving a test notification.

    • For step #3, are you subscribed? If not, stop here, completely clear your site data following these specific instructions, and then re-subscribe to your site in order to receive notifications. Run step #3 again after to verify you're actually subscribed. When following the clear site data instructions, please do remember to close all tabs to your site or restart your browser, since Chrome prevents the site's storage from being accessed until all existing tabs to your site are closed.

    • For step #4, do you receive a test notification? If you do, you're done!

  2. If you're subscribed but you did not receive a test notification, please visit your OneSignal dashboard Delivery Page to view if the test notifications you've sent yourself shows at the top.

  3. If you're subscribed, did not receive a test notification, but you see the message has been delivered (colored green), please open Chrome to chrome://gcm-internals.

Click the "Start Recording" button on the top left. Making sure you see "Connection State: CONNECTED".

Leave this open and send yourself a push (follow step #4 above to send yourself a test notification).

You should see something in the "Receive Message Log" if you got it.

  • If you don't see a "Data msg received", then your Chrome browser is not receiving the notification at all. Please let us know on support about this.

  • If you see "Data msg received" but you still didn't receive a notification, proceed to step #4.

  1. Visit chrome://serviceworker-internals

Search for Scope: https://your-site.com.

Click Inspect, or Start -> Inspect, like below. A Chrome Developer Tools popup will appear.

  1. On the Chrome Developer Tools popup to our service worker, click the Console tab, and run OneSignalWorker.log.trace();. It should return undefined. Any messages from our service worker should now appear in this pop

  2. Switch away from the worker's Dev Tools popup, and back to your main page's Developer Tools console (where you followed step 2). Please send yourself another test notification. You should a lot of output here with an error since you did not see the notification. Please on support about this error. You can right click on the Console -> Save as ... and copy the file contents to our chat support.

Updated 8 months ago

What’s Next