Flutter web集成Firebase Cloud Mess

在用Flutter web开发网页，接入FCM推送的时候经历很多痛点，在此记录下为了更多的小伙伴少走弯路。

需求是在macOS Chrome、macOS Safari、iOS Safari、Android Chrome上打开网页可以收到推送消息。

版本要求：

• macOS Chrome:
  • version > 50
  • 系统设置 -> 通知 -> Google Chrome -> 打开通知
• macOS Safari:
  • version > 16.1, macOS > 13
  • 系统设置 -> 通知 -> Safari 浏览器 -> 打开通知
• Android Chrome:
  • version > 112
  • 设置 -> 应用和通知 -> Chrome -> 打开通知
• iOS Safari:
  • iOS > 16.4
  • 在Safari中打开网页 -> 分享 -> 添加到主屏幕（⭕️划重点：iOS要添加到主屏幕，否则实现不了通知）
  • 在iOS中还需要注意一点，触发通知权限要设置按钮，让用户主动去点击触发，不可在程序启动的时候获取权限，否则直接获取权限失败，不会有通知授权弹框。

初始化代码：

怎么集成FCM按照官方文档操作即可，我只是列出来需要注意的点。

// 直接写在main函数里就可以
await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform,);
await FirebaseMessaging.instance.requestPermission();
await FirebaseMessaging.instance.getToken(vapidKey: '**********');
...

// 在iOS中初始化需要区别对待
// 写在main函数里
await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform,);

// ⭕️ 获取权限要声明一个函数，这个函数在页面设置一个button让用户主动触发
void getFcmPermission() async {
  await FirebaseMessaging.instance.requestPermission();
  await FirebaseMessaging.instance.getToken(vapidKey: '**********');
}
...

Error:

firebase safari error Messaging: This browser doesn't support the API's required to use the firebase SDK
升级macOS到13以上，升级Safari
Notification prompting can only be done from a user gesture.
iOS Safari获取权限取消用户手动触发，不能直接调用

文档：

• 查询Push Api支持的浏览器
• Firebase Cloud Messaging