Flutter WebView应用推送通知无法接收及实现求助

针对你的CRM WebView应用，要实现管理员分配任务时的推送通知，可按以下步骤落地：

1. 集成跨平台推送服务（以FCM为例） #

FCM是跨平台推送的常用选择，先在Flutter项目中完成基础集成：

• 添加依赖到pubspec.yaml：

  dependencies:
    firebase_messaging: ^14.6.0
    flutter_local_notifications: ^16.1.0
  

• 配置Android（google-services.json）和iOS（GoogleService-Info.plist）的FCM配置文件
• 获取设备推送令牌：

  import 'package:firebase_messaging/firebase_messaging.dart';
  
  Future<String?> getDeviceToken() async {
    return await FirebaseMessaging.instance.getToken();
  }
  

• 处理消息接收与展示：

  import 'package:flutter_local_notifications/flutter_local_notifications.dart';
  
  final FlutterLocalNotificationsPlugin _notificationsPlugin = FlutterLocalNotificationsPlugin();
  
  // 初始化通知通道（Android必填）
  Future<void> initNotificationChannel() async {
    const AndroidNotificationChannel channel = AndroidNotificationChannel(
      'task_notification_channel',
      '任务通知',
      description: '接收新任务分配通知',
      importance: Importance.high,
    );
    await _notificationsPlugin.resolvePlatformSpecificImplementation<AndroidFlutterLocalNotificationsPlugin>()
        ?.createNotificationChannel(channel);
  }
  
  // 监听FCM消息
  void setupFCMListeners() {
    // 前台收到消息时展示本地通知
    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      final notification = message.notification;
      if (notification != null) {
        _notificationsPlugin.show(
          notification.hashCode,
          notification.title,
          notification.body,
          const NotificationDetails(
            android: AndroidNotificationDetails(
              'task_notification_channel',
              '任务通知',
              icon: '@mipmap/ic_launcher',
            ),
          ),
        );
      }
    });
  
    // 点击后台通知跳转任务页面
    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
      final taskId = message.data['task_id'];
      if (taskId != null) {
        // 这里写跳转到任务详情的逻辑，比如通过WebView加载对应任务URL
        _webViewController.loadRequest(Uri.parse('${你的CRM域名}/task/$taskId'));
      }
    });
  }
  

2. 打通WebView与Flutter的通信 #

需要让CRM网页能把当前登录员工的ID传给Flutter，关联设备令牌并存到CRM后端：

• 配置WebView的JavaScript通道：

  import 'package:webview_flutter/webview_flutter.dart';
  
  late WebViewController _webViewController;
  
  void initWebView() {
    _webViewController = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..addJavaScriptChannel(
        'PushTokenChannel',
        onMessageReceived: (JavaScriptMessage message) async {
          // 接收网页传来的员工ID
          final userId = message.message;
          final token = await getDeviceToken();
          if (token != null) {
            // 调用CRM后端接口，存储员工ID和令牌的映射
            await _saveTokenToCrm(userId, token);
          }
        },
      )
      ..loadRequest(Uri.parse('你的CRM网站地址'));
  }
  
  // 封装调用CRM后端的方法
  Future<void> _saveTokenToCrm(String userId, String token) async {
    // 这里替换成你的CRM后端接口，使用http或dio发送请求
    // 示例：
    // final response = await http.post(
    //   Uri.parse('${你的CRM域名}/api/user/push-token'),
    //   body: {'user_id': userId, 'token': token},
    // );
  }
  

• 在CRM网页中，员工登录成功后调用Flutter通道：

  // CRM网页的JS代码，登录成功后执行
  if (window.PushTokenChannel) {
    window.PushTokenChannel.postMessage('当前登录员工的ID');
  }
  

3. CRM后端实现推送触发逻辑 #

当管理员分配任务时，后端需要：

1. 根据被分配员工的ID，从数据库取出对应的推送令牌
2. 调用推送服务API发送通知（以FCM为例）：

   # 示例Python后端代码
   import requests
   
   def send_task_notification(token, task_title, task_id):
       fcm_url = "https://fcm.googleapis.com/fcm/send"
       headers = {
           "Authorization": "key=你的FCM服务器密钥",
           "Content-Type": "application/json"
       }
       payload = {
           "to": token,
           "notification": {
               "title": "新任务分配",
               "body": f"你收到新任务：{task_title}"
           },
           "data": {
               "task_id": str(task_id)
           }
       }
       requests.post(fcm_url, headers=headers, json=payload)
   

3. 在任务分配的业务逻辑中，调用这个推送函数即可

4. 关键配置与注意事项 #

• iOS需要请求推送权限：

  Future<void> requestNotificationPermission() async {
    final settings = await FirebaseMessaging.instance.requestPermission(
      alert: true,
      badge: true,
      sound: true,
    );
    if (settings.authorizationStatus == AuthorizationStatus.authorized) {
      // 权限已授权
    }
  }
  

• Android需要在AndroidManifest.xml中配置FCM相关权限
• 确保WebView允许访问CRM域名，配置Android的network_security_config和iOS的ATS规则

内容的提问来源于stack exchange，提问作者Rana Riaz