当前位置: 首页>后端>正文

Flutter web集成Firebase Cloud Messaging遇到的痛点

在用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

https://www.xamrdz.com/backend/3g71939167.html

相关文章: