Flutter 3.22.3 Web项目加载失败仅显示启动屏求助

错误原因 #

这个错误通常是依赖包未适配Web平台，或是Web端初始化逻辑顺序错误导致的。结合你的index代码和报错信息来看，核心问题是Firebase相关服务缺少Web端初始化配置，同时存在Service Worker注册冲突的情况。

解决方案 #

1. 补全Firebase Web端依赖 #

你的项目用到了Firebase App Check和Messaging，但index.html里没有引入Firebase的JavaScript SDK，这会导致Web端无法正确初始化Firebase服务，进而触发nativeCommunication相关错误。需要在<head>标签内添加Firebase SDK引入：

<!-- 在flutter.js之前引入Firebase SDK -->
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-check.js"></script>
<script>
  // 替换成你的Firebase项目配置
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
  };
  // 初始化Firebase App
  const app = firebase.initializeApp(firebaseConfig);
  // 初始化App Check（调试用你已有的token）
  const appCheck = firebase.appCheck();
  appCheck.activate('ba100e01-7f3f-461b-9951-54c68b9d3eab');
</script>

2. 修正index.html初始化逻辑 #

• 合并两个window.addEventListener('load')事件，避免重复监听导致的初始化冲突；
• 确保Flutter初始化在Firebase配置完成后执行；
• 调整Service Worker注册逻辑，避免和Flutter自带的Service Worker冲突：

修正后的核心脚本部分：

<script>
  window.addEventListener('load', function (ev) {
    // 注册Firebase Messaging Service Worker
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/firebase-messaging-sw.js');
    }

    // 初始化Flutter应用
    _flutter.loader.loadEntrypoint({
      serviceWorker: {
        serviceWorkerVersion: serviceWorkerVersion,
      },
      onEntrypointLoaded: function (engineInitializer) {
        engineInitializer.initializeEngine().then(function (appRunner) {
          appRunner.runApp();
        });
      }
    });
  });
</script>

3. 检查并更新依赖包 #

• 运行flutter pub outdated检查所有依赖版本，确保firebase_core、firebase_messaging、firebase_app_check等Firebase相关包支持Web平台，且与当前Flutter SDK版本兼容；
• 移除任何仅支持移动端、无Web适配的原生插件，这类插件会在Web端触发未定义对象的错误。

4. 清理缓存并重新构建 #

• 执行flutter clean清理旧构建缓存；
• 运行flutter pub get重新获取依赖；
• 重新构建Web项目：flutter build web，或直接用Chrome运行：flutter run -d chrome；
• 测试时使用浏览器无痕模式，避免旧Service Worker或缓存的干扰。

5. 验证Flutter SDK版本 #

确保使用Flutter稳定版，避免开发版/Beta版的兼容性问题。通过flutter --version查看版本，若不是稳定版，执行flutter channel stable切换。

内容的提问来源于stack exchange，提问作者Jose Israel Flores