如何配置firebase_messaging仅在Flutter安卓、iOS端运行，排除Web端

报错是因为firebase_messaging包默认包含多平台实现，运行Web项目时会自动加载对应的Web端实现类，如果你Web侧没有引入Firebase Messaging的JS SDK、也没有初始化对应组件，就会触发这个空属性读取错误。

可以通过以下几步实现仅Android、iOS端使用firebase_messaging，完全不影响Web端运行：

• 所有推送相关逻辑都加平台判断，仅非Web环境执行
  所有调用firebase_messaging API的代码，都用kIsWeb做判断，Web侧完全不执行任何推送相关逻辑，参考代码：

import 'package:flutter/foundation.dart' show kIsWeb;
import 'package:firebase_messaging/firebase_messaging.dart';

// 示例：推送初始化逻辑
void initPushService() async {
  if (kIsWeb) return;
  // 下方仅安卓/iOS执行
  final messaging = FirebaseMessaging.instance;
  // 权限申请、token获取、消息监听等逻辑都写在这里
}

• 可选：用条件封装彻底隔离Web端推送代码
  如果要完全避免Web端编译时引入firebase_messaging相关代码，可以对推送服务做分层封装：

1. 定义通用推送服务接口
2. 分别实现移动端的真实推送逻辑、Web端的空实现
3. 运行时根据平台自动返回对应实现类，参考代码：

// messaging_service.dart
import 'package:flutter/foundation.dart';
import 'package:firebase_messaging/firebase_messaging.dart';

abstract class MessagingService {
  Future<void> init();
  Future<String?> getToken();
  // 自定义其他需要用到的推送方法

  factory MessagingService() {
    if (kIsWeb) {
      return _EmptyMessagingService();
    }
    return _MobileMessagingService();
  }
}

// Web端空实现，所有方法无需处理逻辑
class _EmptyMessagingService implements MessagingService {
  @override
  Future<void> init() async {}

  @override
  Future<String?> getToken() async => null;
}

// 移动端真实实现
class _MobileMessagingService implements MessagingService {
  final FirebaseMessaging _messaging = FirebaseMessaging.instance;

  @override
  Future<void> init() async {
    // 执行权限申请、消息监听等初始化逻辑
    await _messaging.requestPermission();
  }

  @override
  Future<String?> getToken() async {
    return await _messaging.getToken();
  }
}

后续业务层直接调用MessagingService()的方法即可，无需再手动做平台判断。

• Web侧不要引入Messaging相关JS SDK
  你Web侧的index.html里只需要引入Firebase核心SDK以及你实际用到的Firebase组件（例如认证、云存储等），不要添加firebase-messaging.js的引入即可。

如果完成上述配置后依然报错，执行flutter clean清理构建缓存，再重新运行Web项目即可解决。

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