Блог

Я некоторое время пытался интегрировать 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, она по-прежнему отображается как пустая.

У вас есть какие-либо идеи, как я мог бы это сделать?

Заранее спасибо

Хотя мы ценим этот пакет, созданный автором, этот пакет не поддерживается 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!",
        } 
      },
      );
    });