React集成OneSignal实现推送通知功能遇到报错该如何处理

原因及解决方法 #

• 初始化写法不兼容 React 封装包
  你当前使用的OneSignal.push()写法是原生JS SDK的调用方式，不适用于react-onesignal封装包，会引发初始化时序错误。修改screens/login.js的初始化代码如下：

import OneSignal from 'react-onesignal'
import { useEffect } from 'react'

useEffect(() => {
  OneSignal.init({
    appId: '47d0c476-62ad-44c5-8e65-288e54ea9772',
    // 本地开发环境必须添加该配置，允许localhost环境运行SDK
    allowLocalhostAsSecureOrigin: process.env.NODE_ENV === 'development'
  })
}, [])

• Service Worker 路径不匹配
  你放置在/public目录下的两个Worker文件默认是按站点根路径加载的，如果你的项目部署在域名子路径下，需要在init配置中新增path参数指定Worker的加载路径：

OneSignal.init({
  appId: '47d0c476-62ad-44c5-8e65-288e54ea9772',
  path: '/你的项目子路径/',
  allowLocalhostAsSecureOrigin: process.env.NODE_ENV === 'development'
})

• 依赖包版本不兼容
  如果修改写法后仍报错，先卸载旧版本react-onesignal，重装最新稳定版：

npm uninstall react-onesignal
npm install react-onesignal@latest

• Service Worker 缓存冲突
  排查过程中需要清空浏览器已注册的旧Service Worker缓存，避免旧的错误配置持续生效：打开浏览器开发者工具 -> 应用面板 -> 服务工作进程 -> 取消注册所有关联的OneSignal Worker后刷新页面重试。

内容的提问来源于stack exchange，提问作者Melvin Dbt