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