React Capacitor项目中Cordova OneSignal SDK无法正常工作

问题描述 #

• 使用最新版OneSignal SDK及Cordova插件时，触发错误：

TypeError: window.OneSignal.push is not a function

• 将onesignal-cordova-plugin降级至2.11.3版本后，又出现plugin_not_installed错误

代码示例 #

import React from "react";
import { OneSignal } from "@awesome-cordova-plugins/onesignal";

React.useEffect(()=> {
  OneSignalInit();
}, [])

const OneSignalInit = async () => {
  OneSignal.startInit(import.meta.env.VITE_ONESIGNAL_APPID, import.meta.env.VITE_GOOGLE_PROJECT_ID); // 触发错误：TypeError: window.OneSignal.push is not a function
};

依赖版本（Package JSON） #

解决步骤 #

1. 匹配插件与@awesome-cordova-plugins/onesignal版本 #

@awesome-cordova-plugins/onesignal和onesignal-cordova-plugin版本必须严格兼容，版本不匹配是核心问题：

• 若用onesignal-cordova-plugin@3.x+，需对应@awesome-cordova-plugins/onesignal@6.x+
• 若坚持使用onesignal-cordova-plugin@2.11.3，则需安装@awesome-cordova-plugins/onesignal@5.x版本

执行对应安装命令：

# 方案1：升级到最新兼容版本
npm install onesignal-cordova-plugin@latest @awesome-cordova-plugins/onesignal@latest

# 方案2：降级到匹配的旧版本
npm install onesignal-cordova-plugin@2.11.3 @awesome-cordova-plugins/onesignal@5.3.0

2. 重新构建Cordova平台 #

版本调整后必须清理缓存并重新构建，避免遗留旧代码：

# 以Android平台为例，移除并重新添加
cordova platform remove android
cordova platform add android@latest

# 清理并构建项目
cordova clean
cordova build android

3. 修正初始化逻辑 #

新版本OneSignal SDK已弃用startInit方法，需改用最新初始化写法：

import React from "react";
import { OneSignal } from "@awesome-cordova-plugins/onesignal";

React.useEffect(() => {
  OneSignalInit();
}, [])

const OneSignalInit = async () => {
  try {
    // 新版本初始化核心代码
    await OneSignal.initialize(import.meta.env.VITE_ONESIGNAL_APPID);
    // Android平台配置Google项目ID
    await OneSignal.setGoogleProjectNumber(import.meta.env.VITE_GOOGLE_PROJECT_ID);
    
    // 可选：主动请求通知权限
    await OneSignal.promptForPushNotificationsWithUserResponse();
  } catch (error) {
    console.error("OneSignal初始化失败:", error);
  }
};

4. 验证插件安装状态 #

执行命令确认插件已正确安装：

cordova plugin list

确保输出中包含onesignal-cordova-plugin及对应版本。

内容的提问来源于stack exchange，提问作者Abdullah Khan