Chrome环境下无法获取OneSignal Subscription ID问题求助

在实现Web Push功能时，需要将OneSignal的设备ID存入数据库，但在用户授予推送权限后，尝试获取OneSignal.User.PushSubscription.id时持续报错：

Uncaught (in promise) n: Abort _getOneSignalAndSubscriptionIds: no subscription
n: processSubscriptionModel: missing onesignalId: {"subscribers":{},"modelName":"pushSubscriptions",...}

问题根源 #

1. SDK初始化顺序错误：在OneSignal.init之前就调用了OneSignal.login和获取订阅ID的逻辑，此时SDK尚未完成初始化，订阅数据还未同步到OneSignal服务器
2. 订阅流程时序混乱：权限请求、Slidedown提示的执行顺序颠倒，导致订阅未完成就尝试获取ID
3. 轮询逻辑不可靠：定时轮询无法精准捕捉订阅完成的时机，容易出现订阅未就绪就查询的情况

修复方案 #

1. 调整初始化与核心逻辑的顺序

必须确保OneSignal.init完成后，再执行登录、权限请求、订阅监听等操作，避免在SDK未就绪时调用相关API。

2. 使用OneSignal事件监听替代定时轮询

利用OneSignal提供的subscriptionChange事件，当用户订阅状态发生变化（比如完成订阅）时自动触发获取ID的逻辑，比定时轮询更精准可靠。

3. 修正订阅请求流程

先触发Slidedown推送提示，等用户授权后再确认订阅状态并获取ID，确保流程连贯符合SDK预期。

修改后的代码示例 #

const currentOneSignalTimer = useRef();
const [initializedOneSignal, setInitializedOneSignal] = useState(false);

// 监听订阅变化事件，替代轮询逻辑
const setupSubscriptionListener = () => {
  OneSignal.Notifications.addEventListener("subscriptionChange", async (event) => {
    if (event.subscribed) {
      const subscriptionId = await OneSignal.User.PushSubscription.id;
      if (subscriptionId) {
        dispatch(saveDeviceId({ device_id: subscriptionId }));
        // 订阅完成后移除监听，避免重复触发
        OneSignal.Notifications.removeEventListener("subscriptionChange", setupSubscriptionListener);
      }
    }
  });
};

const handleOneSignal = async () => {
  try {
    const oneSignalInitialized = sessionStorage.getItem('onesignalInitialized');
    
    // 避免重复初始化SDK
    if (!initializedOneSignal && (oneSignalInitialized !== 'true' || oneSignalInitialized === null)) {
      console.log('Initializing OneSignal...');
      
      // 优先完成SDK初始化
      await OneSignal.init({
        appId: "YOUR_APP_ID",
        safari_web_id: "YOUR_SAFARI_WEB_ID",
        allowLocalhostAsSecureOrigin: true,
        autoResubscribe: true,
        promptOptions: {
          slidedown: {
            enabled: true,
            actionMessage: "We'd like to show you notifications for the latest messages and other updates.",
            acceptButtonText: "Yes",
            cancelButtonText: "No"
          }
        },
        welcomeNotification: {
          "title": "Book An Artist",
          "message": "Thanks for subscribing!",
        },
        notifyButton: {
          enable: false,
        }
      });

      // 标记初始化完成状态
      setInitializedOneSignal(true);
      sessionStorage.setItem('onesignalInitialized', 'true');

      // 设置用户登录信息（确保用户数据已加载完成）
      const name = `${buyerDetails?.first_name?.trim()} ${buyerDetails?.last_name?.trim()}`;
      await OneSignal.login(name);

      // 检查浏览器推送支持情况
      const isSupported = await OneSignal.Notifications.isPushSupported();
      console.log('Push supported:', isSupported);

      if (isSupported) {
        // 设置订阅状态监听
        setupSubscriptionListener();
        // 触发Slidedown提示请求用户权限
        await OneSignal.Slidedown.promptPush();
      }
    }
  } catch (error) {
    console.error('OneSignal error:', error);
  }
};

关键改动说明 #

• 将OneSignal.init放在最前端，确保SDK完全就绪后再执行后续操作
• 用subscriptionChange事件替代定时轮询，精准捕捉订阅完成时机
• 调整登录、权限请求的顺序，匹配OneSignal SDK的执行逻辑
• 移除冗余重复代码，简化整体流程

内容的提问来源于stack exchange，提问作者Md Javed Akhtar