notificationDisplay event is not working in React app

[amrutsabale]

I am getting push notifications but notificationDisplay event is not firing. I want to read data from notification pushed. I have also tried addListenerForNotificationOpened but it's also not working.

My Code

import { useEffect } from "react";
import OneSignal from "react-onesignal";

function App() {
  useEffect(() => {
    OneSignal.init({
      appId: "xxxxxx-xxxxxx-4e1f-bb5a-xxxxxxx",
    });

    OneSignal.addListenerForNotificationOpened(() => {
      console.log("hi");
    });

    OneSignal.on("addListenerForNotificationOpened", function (event) {
      console.log("Notification Clicked", event);
    });

    OneSignal.on("notificationDisplay", function (event) {
      console.log("OneSignal notification displayed:", event);
    });
    OneSignal.on("notificationDismiss", function (event) {
      console.log("OneSignal notification dismissed:", event);
    });
  }, []);

  const onHandleTag = (tag) => {
    OneSignal.sendTag("tech", tag).then(() => {
      console.log("tagged");
    });
  };

  return (
    <div>
      <h1> React one signal push notification demo</h1>
      <button onClick={() => onHandleTag("react")}>Click</button>
    </div>
  );
}

export default App;

[punit355743]

Hello Team,

Same issue i am facing and i also use in same way...….getting the notification popup however notificationDisplay event callback is not calling. One strange thing happen it work for me 1 time but next day i restarted my machine again open my app on localhost.it stop calling this event. This event i really needed because i have to extract the information (message, content) and display in my react component. i am using "react-onesignal": "^2.0.2" in my project. Please suggest.

[rgomezp]

Howdy, Thanks for surfacing this issue. We will investigate and come back with more details.

[OkancanCosar]

this usage is correct like below

OneSignalWeb.on("notificationDisplay", (event) => { });

but document says: Not supported on Safari and requires HTTPS website.

and when the site closed then notification showed but "notificationDisplay" event not fired

[btjones]

I'm also having this issue - I cannot get the addListenerForNotificationOpened callback or the notificationDisplay event to trigger. I've ensured my urls match exactly and also used different combinations of notificationClickHandlerMatch and notificationClickHandlerAction settings. Nothing I tried has worked at all.

Any ideas on this? Did anyone else get it working? Bug in the library or (more likely) a bug in my code?

@rgomezp did you get time to investigate this issue? Thanks!

[rgomezp]

Hey everyone, thanks for your patience. I was able to reproduce the issue. I hope to have a fix for this very soon.

[rgomezp]

@btjones @amrutsabale & others,

I was able to reproduce but then I realized I overlooked one thing. As the docs say: Not supported on Safari and requires HTTPS website.

Are you testing this on your production site on a non-safari browser? Please note that testing this on localhost will not work unless you have set up a secure localhost environment.

I have not been able to reproduce this in a production environment using HTTPS.

Can you please make sure you are testing this in the correct environment?

Source

[btjones]

@rgomezp Thanks for investigating. I'm testing with Chrome on localhost with the "Treat HTTP localhost as HTTPS for testing" setting turned on. Should it work with that localhost as HTTPS setting on? Or no?

[btjones]

I should mention that addListenerForNotificationOpened does work if I do NOT have a browser tab open to my application. In that case it opens a new tab and the listener callback is executed.

However, if I already have a window open is when I cannot get it to work.

[rgomezp]

@btjones

I'm testing with Chrome on localhost with the "Treat HTTP localhost as HTTPS for testing" setting turned on. Should it work with that localhost as HTTPS setting on? Or no?

Unfortunately, it seems this won't do the trick. I recommend testing this in an HTTPS environment such as staging or prod.

addListenerForNotificationOpened

This could be a separate issue, but all the events are triggered in the same way so I believe this is related to the aforementioned issue. I also recommend testing this in an hTTPS env.

Cheers

[btjones]

Thanks! I'll give it a whirl with https.

[kwaref]

Hi there folks. Is there a way to show up notifications on Chrome mobile even if the app is in foreground? So far, the notification arrive if Chrome is in background.

[rgomezp]

@kwaref , Hello, I'm assuming you are referring to heads up notifications? This is dictated by notification importance which is not something you can control since the delivery is via web push and not native Android.

I will close this issue since there have been no updates on the original issue.