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

编程问答 2022-06-01

问题描述

我想在从 Onesignal 收到新的网络推送通知时显示警报。 我尝试创建事件侦听器，但未显示警报或日志。我不确定这里出了什么问题。 该应用程序能够接收通知并显示它。

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

应用：ReactJS

Onesignal：自定义站点设置

这是我的代码。

index.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();

App.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;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptonesignalreactjsreactjsreactjsreactjs