javascript - 如何使用 Javascript 监听 onsignal 网络推送通知事件？

Question

我想在收到来自 OneSignal 的新 Web 推送通知时显示警报。我尝试创建事件侦听器，但未显示警报或日志。我不确定这里有什么问题。该应用程序能够获取通知并显示它。

我尝试遵循此文档 https://documentation.onesignal.com/docs/web-push-sdk#notification-display

应用程序：ReactJS

OneSignal：自定义站点设置

这是我的代码。

索引.html

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
    window.OneSignal = window.OneSignal || [];
</script>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const OneSignal = window.OneSignal
OneSignal.push(function () {
  OneSignal.init({
    appId: 'app id'
  })
})

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

应用程序.js

import './App.css';


function App() {
  const OneSignal = window.OneSignal
  const chkPer = () => {
    OneSignal.push(["getNotificationPermission", function (permission) {
      console.log("Site Notification Permission:", permission);
      // (Output) Site Notification Permission: default
    }]);
  }

  const regPush = () => {
    OneSignal.push(function() {
      OneSignal.showNativePrompt();
    });
  }
  
  OneSignal.push(function() {
    OneSignal.on('notificationDisplay', function(event) {
      console.warn('OneSignal notification displayed:', event);
    });
    
    //This event can be listened to via the `on()` or `once()` listener
  });
  

  window.addEventListener('notificationDisplay', (event) => {
    console.log(event);
    alert('OS event')
  });

  return (
    <div className="App">
      <button onClick={chkPer}>Check Permission</button>
      <button onClick={regPush}>register for Notification</button>
    </div>
  );
}

export default App;

标签： javascriptreactjsonesignal