时间戳

首页 > 解决方案 > react-onesignal：通知提示后订阅 Onesignal

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

问题描述

我一直在尝试将 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 中的“受众”时，它仍然显示为空。

你知道我该怎么做吗？

提前致谢

标签： reactjsonesignal

解决方案

虽然我们感谢作者创建的包，但 OneSignal 不支持该包。我创建了本指南，介绍如何将 OneSignal 集成到您的 ReactJS 应用程序中。

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

推荐阅读