Nuxtjs PWA集成OneSignal报错：e.$OneSignal.on is not a function

Hey there, let's troubleshoot this frustrating issue where your OneSignal subscriptionChange listener works perfectly locally but throws an error in production. Here's the breakdown of what's likely happening and how to fix it:

可能的原因分析 #

Localhost环境对OneSignal的限制更少，SDK加载和初始化速度快，所以你的代码能顺利执行。但生产环境中，几个常见因素会导致这个报错：

1. SDK初始化延迟：生产环境的网络资源加载顺序或速度问题，导致你调用on方法时OneSignal SDK还没完全初始化完成
2. Nuxt插件上下文差异：在SSR或静态生成的生产模式下，this.$OneSignal的对象结构和本地环境不一致，缺失了on方法
3. HTTPS环境缺失：OneSignal要求生产环境必须使用HTTPS（localhost除外），如果站点没有配置HTTPS，SDK可能无法正常加载和初始化

解决方案 #

1. 改用全局OneSignal实例（最直接的修复） #

在$OneSignal.push()的回调里，直接使用全局的OneSignal对象，而不是依赖Nuxt插件的this.$OneSignal。因为push回调是OneSignal SDK原生提供的机制，能确保回调执行时SDK已经完全就绪：

mounted() {
  const self = this;
  this.$OneSignal.push(() => {
    // 直接调用全局OneSignal实例的方法
    OneSignal.on('subscriptionChange', (isSubscribed) => {
      if (isSubscribed) {
        OneSignal.getUserId().then((deviceId) => {
          self.addDeviceId(deviceId);
        });
      }
    });
  });
}

2. 确保仅在客户端执行代码 #

虽然mounted是客户端钩子，但为了避免SSR环境下的意外执行，加上客户端环境判断更稳妥：

mounted() {
  if (process.client) {
    const self = this;
    this.$OneSignal.push(() => {
      OneSignal.on('subscriptionChange', (isSubscribed) => {
        if (isSubscribed) {
          OneSignal.getUserId().then((deviceId) => {
            self.addDeviceId(deviceId);
          });
        }
      });
    });
  }
}

3. 检查Nuxt配置和版本兼容性 #

• 确认nuxt.config.js中onesignal的生产环境配置正确，尤其是appId不要写错：

  // nuxt.config.js
  modules: [
    '@nuxtjs/pwa',
    ['@nuxtjs/onesignal', {
      appId: 'YOUR_PRODUCTION_ONESIGNAL_APP_ID',
      autoRegister: true, // 根据你的需求调整
      notifyButton: { enable: true }
    }]
  ]
  

• 检查@nuxtjs/onesignal和@nuxtjs/pwa的版本，确保两者兼容（可查看npm包的peerDependencies说明）

4. 验证生产环境HTTPS #

OneSignal SDK仅在HTTPS环境下才能正常工作（localhost除外），如果你的生产站点没有配置有效的HTTPS证书，SDK会无法完成初始化，自然找不到on方法。请确认站点已部署在HTTPS环境下。

本地生产模式测试建议 #

修改代码后，可以通过Nuxt的生产构建命令本地模拟生产环境，提前验证修复效果：

npm run build && npm run start

内容的提问来源于stack exchange，提问作者CHHUM Sina