react-onesignal：通知提示后订阅 Onesignal

Question

I've been trying for a while to integrate OneSignal with my React project. After finding the package react-onesignal I decided to give it a go.

It is integrated in my code like this:

    OneSignal.initialize("my_appid_is_here", {
      allowLocalhostAsSecureOrigin:true,
      autoRegister:true,
      autoResubscribe:true,
      persistNotification:true,
    })

  useOneSignalSetup(async() => {
    if (OneSignal.isPushNotificationsEnabled) {
      const instance = OneSignal.getOneSignalInstance()
      const state = await OneSignal.getNotificationPermission()
      if (state !== "granted") {
        await OneSignal.registerForPushNotifications()
      } else {
        OneSignal.setSubscription(true)
      }
    }
  })

I am able to trigger the registration prompt in the browser (I get the 'would you like to enable notifications' alert), but when I try and check the "Audience" in OneSignal it still shows up as empty.

Do you have any idea how I could about this?

Thanks in advance

Answer 1

While we appreciate that package created by the author, that package is not supported by OneSignal. I have created this guide on how to integrate OneSignal into your ReactJS app.

https://dev.to/devpato/push-notifications-in-reactjs-with-onesignal-5bon

You will use the cdn:

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

Initialize OneSignal

window.OneSignal = window.OneSignal || [];
const OneSignal = window.OneSignal;

OneSignal.push(()=> {
      OneSignal.init(
        {
          appId: "1a9bbed2-9294-4192-a736-01b461cb389a", //STEP 9
          promptOptions: {
            slidedown: {
              enabled: true,
              actionMessage: "We'd like to show you notifications for the latest news and updates about the following categories.",
              acceptButtonText: "OMG YEEEEESS!",
              cancelButtonText: "NAHHH",
              categories: {
                  tags: [
                      {
                          tag: "react",
                          label: "ReactJS",
                      },
                      {
                        tag: "angular",
                        label: "Angular",
                      }
                  ]
              }     
          } 
        },
        welcomeNotification: {
          "title": "One Signal",
          "message": "Thanks for subscribing!",
        } 
      },
      );
    });