Flutter Web集成Firebase Messaging报isSupported属性undefined错误

报错链路完全匹配firebase_messaging_web插件的初始化流程：插件构造实例时会直接调用全局挂载的firebase.messaging()方法获取Messaging服务实例，若该方法未正确挂载、返回值为undefined，就会在读取isSupported属性时抛出TypeError: Cannot read property 'isSupported' of undefined。

从当前项目的index.html配置看，所有导致该异常的错误点都是明确的：

• Messaging SDK加载路径拼写错误：引入的脚本路径写为fire-messaging.js，实际正确文件名应为firebase-messaging.js，脚本加载404失败，Messaging模块完全没有注册到全局firebase对象。
• 多套SDK重复加载、版本不兼容：页面同时加载了两套独立的Firebase JS SDK：一套是手动引入的8.4.1版本app模块、8.2.5版本messaging模块；另一套是部署在/__/firebase/路径下的8.4.2版本app模块、analytics模块。两套SDK会互相覆盖全局的firebase对象，造成模块挂载失效、状态混乱。
• 资源重复引入：main.dart.js被在页面中引入了两次，导致插件注册初始化流程被触发两次，进一步放大初始化异常。
• 逻辑重复冲突：存在两段独立的Service Worker注册代码，重复注册flutter_service_worker.js，和firebase-messaging的自定义worker注册流程冲突；同时存在两段独立的Firebase初始化代码，重复初始化全局firebase实例，打乱SDK内部状态。

1. 清理index.html中的冗余代码：删除所有手动引入的旧版本Firebase SDK、删除托管在/__/firebase/路径下的重复SDK和初始化代码、删除重复引入的main.dart.js、删除重复的Service Worker注册逻辑、删除重复的Firebase初始化代码。
2. 统一SDK版本：选择与当前项目firebase_messaging_web插件兼容的Firebase JS SDK版本，保证核心app模块和messaging模块的版本完全一致，修正Messaging模块的脚本路径拼写错误，确保脚本可以正常加载。
3. 调整脚本加载顺序：在页面头部按顺序加载Firebase app模块、Firebase messaging模块，加载完成后执行一次全局Firebase初始化，配置项直接复用原有项目的Firebase参数即可，不要重复初始化。
4. 合并Service Worker注册逻辑：在页面加载完成后，统一注册一次flutter_service_worker.js和firebase-messaging-sw.js，避免重复注册冲突。
5. 操作完成后，清除浏览器缓存和已注册的旧Service Worker，重启本地开发服务后重新加载页面即可解决初始化报错。

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