DEV Community

Push Notifications in ReactJS with OneSignal

Pato on January 25, 2021

In this tutorial, you are going to learn how to communicate with the users of your application by integrating push notifications and subscriptions ...

Read full post

Kannan T • Apr 21 '21

[Worker Messenger] [Page -> SW] Could not get ServiceWorkerRegistration to postMessage!

Am facing this error any idea why?

Sean Thompson • May 4 '21

I'm getting this intermittently too.

Kannan T • May 7 '21

@sean Thompson

This issue occurs when you are not subscribed to onesignal, i figured this out yesterday while working @pato you can make a note of this, if some one reported to you regarding this ask them whether they have subscribed or not

Pato • May 8 '21

Awesome! Thanks so much

Shivam Pandey • Oct 12 '23 • Edited

Hey Pato, I am still facing this issue can you give some suggestion that can help me. (User has subscribed already)
Thank you

Kannan T • May 4 '21

check your configuration mostly that should be the problem

Pato • May 4 '21

Did you get it fixed Kannan? Is there something I need to fix from the article?

Kannan T • May 5 '21

No pato, your article is fine and it helped me allot, thank you for the article

Kannan T • Apr 20 '21

Thanks for the article, but how do i test this out in local environment? Is there any way we can do it, because everytime i do some changes i can't push it to production and test it

Kannan T • Apr 20 '21

And also am facing an issue here, i will post that tomorrow morning as its late night here, your article helped me to start up with one signal thank you

Pato • Apr 20 '21 • Edited

Hi I need to update the docs but essentially you will do this as the image shown, that way you dont have to keep redeploying our app all the time

dev-to-uploads.s3.amazonaws.com/up...

Kannan T • Apr 21 '21 • Edited

Hi i can't see local testing button from my side attaching screenshot as reference

dev-to-uploads.s3.amazonaws.com/up...

Pato • Apr 21 '21

You have to enter a localhost url that way the form will detect it and give you the options you need

Kannan T • Apr 21 '21

Thanks it worked with localhost now, now ill show the issue am facing

dev-to-uploads.s3.amazonaws.com/up...

Pato • Apr 21 '21

Did you download and add the sdk files into your project?

5) Inside of the React project, the first thing you are going to do is to add the services worker files you downloaded into your PUBLIC folder.

You should be adding 2 files:

OneSignalSDKUpdaterWorker.js
OneSignalSDKWorker.js

You can download the files here too github.com/OneSignal/OneSignal-Web...

sathittham • Jan 27 '21

Thank you for sharing this. I wonder how can I listen to OneSignal Event with ReactJS (and do something else with that data) after I received the notification.

Pato • Jan 27 '21

Hi Sathittham! I want to make sure I'm understanding the question.

1) I send a push notification from the OneSignal portal
2) I received a push notification that has the title and body Ex.

React JS tutorial
Take a look to my new ReactJS tutorial!!

and then in your ReactJS app grab the title of the push notification?

sathittham • Jan 28 '21

Yes, I want to grab data (id, heading, content, data, url, icon) from the notification.

Sajideen • Dec 2 '22

Hi @sathittham, I am looking for the same thing. If you have done it, please share the event that was triggered to achieve this.

ibenge Uforo • Apr 9 '21

Hey, thanks for this article. it was really helpful but ran into a problem.

How can we use this with a PWA having it's own service worker?

Pato • Apr 15 '21

You can, you will have to change the scope of the service worker of OneSignal.-

something like this:

OneSignal.SERVICE_WORKER_PARAM = { scope: '/assets/js/' };
OneSignal.SERVICE_WORKER_PATH = '../assets/js/OneSignalSDKWorker.js';
OneSignal.SERVICE_WORKER_UPDATER_PATH = '../assets/js/OneSignalSDKUpdaterWorker.js';

ibenge Uforo • May 26 '21

I'm back again Pato, been on this for weeks.

At the moment, i'm getting "the script resource is behind a redirect which is disallowed" and have tried

switching positions of the folder from src to root ie. where React service worker files and it's registration is.
Placing the main files without the folder at the root.
changing scope url to an absolute path but to no avail.
Registering the oneSignal service worker file in place of reacts and using the importScript.

Please help.

Sean Thompson • May 4 '21

Hi Pato, thank you for this it is working really well but I don't understand this part. In mine the scope is set to /push/onesignal/... what is this doing?

Pato • May 4 '21

Can you show me a screenshot of where you are seeing that, please? Thank you so much!

J. Elias Lugo • Jan 27 '21

Hi, I have a problem, maybe my implementation is wrong, but I want your feedback, I've tried to implement onesignal on my reactjs web app (it's not react native).

I tried 3 differents aproachs:
1.- Following the oficial onesignal web push sdk documentation.
2.- This aproach.
3.- Using this package github.com/pedro-lb/react-onesigna...

All of them I've completed successfully, but all have a strange behavior on my reactjs web app.

When my app get the notifications permissions for first time and I accept it, it doesn't show the welcome notification and if I send a notification from my onesignal dashboard it doesn't show.

If I refresh (F5) my app two times and send another notification, it works and show correctly. But if for any reason I refresh again my app, the notifications don't work anymore and in my onesignal dashboard shows that my player id is unsubscribe.

Somebody has the same issue? or what could be wrong in my app? Thanks.

Pato • Jan 27 '21

Hi Elias! Interesting problem. I haven't run into that issue. If you can create a minimal replication of you project and paste the link to your repo here I can try it on my computer.

what browser are you using?