react- Onesignal :通知提示后订阅Onesignal

Question

我已经尝试了一段时间来将OneSignal集成到我的React项目中。在找到react-onesignal包后，我决定试一试。

它集成在我的代码中，如下所示：

    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)
      }
    }
  })

我可以在浏览器中触发注册提示(我收到‘你想启用通知吗’警报)，但当我尝试检查OneSignal中的"Audience“时，它仍然显示为空。

你知道我是怎么做的吗？

提前感谢

Answer 1

虽然我们很欣赏作者创建的包，但OneSignal不支持该包。我已经创建了关于如何在您的ReactJS应用程序中集成OneSignal的指南。

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

您将使用cdn：

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

初始化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!",
        } 
      },
      );
    });