Flutter Web集成OneSignal调用接口抛出MissingPluginException如何解决

问题原因 #

你遇到的MissingPluginException是因为官方onesignal_flutter插件仅实现了Android、iOS端的平台方法，未提供Web端的通道实现。你目前能正常订阅、接收欢迎推送，是因为直接在index.html中引入了OneSignal原生Web SDK，这部分逻辑和Flutter插件的Dart封装没有打通，所以调用插件提供的Dart方法时会找不到对应实现。

是否需要做Web端适配？ #

是，必须补充Web端的方法实现才能正常调用插件的Dart API。

是否有现成可用的适配插件？ #

目前官方onesignal_flutter尚未正式支持Web端，第三方适配插件覆盖的场景非常有限，大部分场景下需要自行做适配。

自行实现适配的两种方案 #

方案1：轻量适配（仅满足当前需求，改动最小） #

不需要改造插件，直接在Dart代码中通过JS交互调用全局OneSignal对象实现需求，示例代码如下：

import 'dart:js';
import 'dart:js_util';
import 'package:flutter/foundation.dart';
import 'package:onesignal_flutter/onesignal_flutter.dart';

// 获取playerId
Future<String?> getPlayerId() async {
  if (kIsWeb) {
    final oneSignal = getProperty(window, 'OneSignal');
    final deviceState = await promiseToFuture(oneSignal.getDeviceState());
    return getProperty(deviceState, 'userId');
  }
  // 移动端走原有逻辑
  final deviceState = await OneSignal.shared.getDeviceState();
  return deviceState?.userId;
}

// 发送通知
Future<void> postNotification(Map<String, dynamic> notification) async {
  if (kIsWeb) {
    final oneSignal = getProperty(window, 'OneSignal');
    await promiseToFuture(oneSignal.postNotification(jsify(notification)));
    return;
  }
  // 移动端走原有逻辑
  await OneSignal.shared.postNotification(notification);
}

使用时直接调用上面封装的方法即可，不需要改动现有的移动端逻辑。

方案2：全量插件适配（如果需要用到更多OneSignal API） #

如果你需要用到更多OneSignal的API，可以统一注册MethodChannel的Web端处理器，兼容原有插件的调用方式：

1. 确认index.html中已正确引入OneSignal Web SDK，保证window.OneSignal全局对象可正常访问
2. 在项目入口（如main.dart的main函数中，runApp之前）添加Web端通道注册逻辑：

import 'package:flutter/services.dart';

if (kIsWeb) {
  const channel = MethodChannel('OneSignal');
  channel.setMethodCallHandler((call) async {
    final oneSignal = getProperty(window, 'OneSignal');
    switch (call.method) {
      case 'OneSignal#log':
        // 按需实现日志逻辑
        return null;
      case 'OneSignal#setAppId':
        oneSignal.setAppId(call.arguments['appId']);
        return null;
      case 'OneSignal#getDeviceState':
        final state = await promiseToFuture(oneSignal.getDeviceState());
        // 把JS对象转成OSDeviceState需要的Map结构返回
        return {
          'userId': getProperty(state, 'userId'),
          'pushToken': getProperty(state, 'pushToken'),
          // 补充其他需要的字段
        };
      case 'OneSignal#postNotification':
        return await promiseToFuture(oneSignal.postNotification(jsify(call.arguments)));
      // 补充其他你需要用到的方法实现
      default:
        throw MissingPluginException();
    }
  });
}

3. 完成后你就可以直接调用原有插件的Dart方法，不需要区分平台。

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