Flutter iOS通信通知插件ios_communication_notification的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter iOS通信通知插件 ios_communication_notification 的使用

概述

iOS Communication Notifications 是一个用于在 iOS 15 及以上版本中显示通信通知的 Flutter 插件。它支持点击通知回调,并且可以自定义通知的内容和行为。

截图

Screenshot 1
Screenshot 2

特性

  • 支持在 iOS 15 及以上版本中显示通信通知。
  • 支持点击通知后的回调。

配置

安装插件

首先,在你的 Flutter 项目中添加 ios_communication_notification 插件:

flutter pub add ios_communication_notification

然后运行以下命令以确保所有依赖项正确安装:

flutter clean && flutter pub get

XCode 配置

Capabilities

  1. 打开你的项目在 XCode 中。
  2. 点击 Runner,然后选择 Target Runner
  3. 在 Signing & Capabilities 中点击 Add Capability。
  4. 添加 Communication Notifications。

Info.plist

  1. 打开 Info.plist 文件。
  2. 添加 NSUserActivityTypes 作为类型数组。
  3. 在新创建的数组中添加 INSendMessageIntent

AppDelegate 扩展

  1. 打开 AppDelegate.swift 文件。
  2. 将以下代码粘贴到文件末尾:
import UIKit
import ios_communication_notification

extension AppDelegate {
    override func userNotificationCenter(_ center: UNUserNotificationCenter, willPresent notification: UNNotification, withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
        if #available(iOS 15.0, *) {
            if (notification.request.identifier.starts(with: IosCommunicationConstant.prefixIdentifier)) {
                completionHandler([.banner, .badge, .sound, .list])
            }
        }
        
        return super.userNotificationCenter(center, willPresent: notification, withCompletionHandler: completionHandler)
    }
    
    override func userNotificationCenter(_ center: UNUserNotificationCenter, didReceive response: UNNotificationResponse, withCompletionHandler completionHandler: @escaping () -> Void) {
        
        if #available(iOS 15.0, *) {
            if (response.notification.request.identifier.starts(with: IosCommunicationConstant.prefixIdentifier)) {
                let userInfo = response.notification.request.content.userInfo
                
                IosCommunicationNotificationPlugin.shared.onClickNotification(userInfo)
                
                completionHandler()
            }
        }
        
        return super.userNotificationCenter(center, didReceive: response, withCompletionHandler: completionHandler)
    }
}

使用方法

检查是否支持显示通信通知

在 iOS 15 或更高版本中检查是否可以显示通信通知:

final bool isAvailableForCommunication = await IosCommunicationNotification().isAvailable();

显示通知

显示一条通信通知:

IosCommunicationNotification().showNotification(
  NotificationInfo(
    senderName: "lambiengcode",
    imageBytes: imageBuffer,
    value: "This is payload, will receive when click this notification",
    content: "Hello Flutter"
  ),
);

获取初始负载

如果应用是从点击通信通知启动的,可以获取初始负载:

IosCommunicationNotification().getInitialPayload().then((payload) {
    // TODO: 处理 payload
});

设置点击通知的回调函数

设置点击通知时的回调函数:

IosCommunicationNotification().setOnClickNotification((payload) {
    // TODO: 处理 payload
});

ReactionBoxParamenters 参数说明

参数 描述 默认值
senderName 通知标题 - 发送者消息通知 必填
imageBytes 发送者的头像 必填
content 消息内容 必填
value 通知的有效载荷 必填

示例 Demo

以下是一个完整的示例代码,展示了如何在 Flutter 应用中使用 ios_communication_notification 插件:

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:typed_data';
import 'package:ios_communication_notification/ios_communication_notification.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final String _platformVersion = 'Unknown';

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  Future<void> initPlatformState() async {
    final bool isAvailable = await IosCommunicationNotification().isAvailable();

    if (!mounted) return;

    setState(() {
      _platformVersion = isAvailable ? 'Supported' : 'Not Supported';
    });
  }

  void showNotification() async {
    Uint8List imageBytes = await _loadImage(); // 假设你有一个加载图片的方法
    IosCommunicationNotification().showNotification(
      NotificationInfo(
        senderName: "lambiengcode",
        imageBytes: imageBytes,
        value: "This is payload, will receive when click this notification",
        content: "Hello Flutter"
      ),
    );
  }

  Future<Uint8List> _loadImage() async {
    // 这里可以实现从网络或本地加载图片的逻辑
    return Uint8List(0); // 返回一个空的 Uint8List 作为示例
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Running on: $_platformVersion\n'),
              ElevatedButton(
                onPressed: showNotification,
                child: const Text('Show Notification'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter iOS通信通知插件ios_communication_notification的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter iOS通信通知插件ios_communication_notification的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中集成并使用ios_communication_notification插件来实现iOS通信通知的示例代码。这个示例假定你已经设置好了Flutter开发环境,并且已经创建了一个Flutter项目。

第一步:添加依赖

首先,你需要在pubspec.yaml文件中添加ios_communication_notification插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  ios_communication_notification: ^latest_version  # 请替换为实际最新版本号

然后运行flutter pub get来安装依赖。

第二步:配置iOS原生代码

由于这是一个特定于iOS的插件,你需要在iOS原生代码中进行一些配置。

  1. 打开ios/Runner/Info.plist文件,添加必要的权限配置(例如,如果你需要接收远程通知,你需要添加RemoteNotifications权限)。
<key>UIBackgroundModes</key>
<array>
    <string>remote-notification</string>
</array>
<key>UIApplicationExitsOnSuspend</key>
<false/>
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
<key>UNNotificationBreakthroughPriority</key>
<integer>1</integer>
  1. ios/Runner/AppDelegate.swift中,配置通知注册和接收回调。
import UIKit
import Flutter
import UserNotifications

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)
    
    // 请求通知权限
    UNUserNotificationCenter.current().requestAuthorization(options: [.alert, .sound, .badge]) { (granted, error) in
      if let error = error {
        print("Notification authorization error: \(error.localizedDescription)")
      } else if granted {
        DispatchQueue.main.async {
          application.registerForRemoteNotifications()
        }
      }
    }
    
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
  
  override func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
    // 将deviceToken发送到你的服务器
    let deviceTokenString = deviceToken.map { String(format: "%02.2hhx", $0) }.joined()
    print("Device Token: \(deviceTokenString)")
    
    // 在这里调用Flutter插件的方法将token发送到Dart层
    let flutterEngine = (UIApplication.shared.delegate as? AppDelegate)?.window??.rootViewController as? FlutterViewController
    flutterEngine?.binaryMessenger.sendMessage(
      name: "DeviceToken/set",
      arguments: ["token": deviceTokenString]
    )
  }
  
  override func application(_ application: UIApplication, didReceiveRemoteNotification userInfo: [UIApplication.UserInfoKey : Any]) {
    // 处理接收到的远程通知
    print("Received remote notification: \(userInfo)")
    
    // 在这里调用Flutter插件的方法将通知信息发送到Dart层
    let flutterEngine = (UIApplication.shared.delegate as? AppDelegate)?.window??.rootViewController as? FlutterViewController
    flutterEngine?.binaryMessenger.sendMessage(
      name: "RemoteNotification/received",
      arguments: userInfo
    )
  }
}

第三步:Flutter Dart层代码

在Flutter的Dart层,你需要初始化插件并处理来自iOS的通知。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:ios_communication_notification/ios_communication_notification.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('iOS Communication Notification Example'),
        ),
        body: Center(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
  static const platform = MethodChannel('com.example.ios_communication_notification');
  String? deviceToken;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance!.addObserver(this);
    
    // 监听设备token
    platform.setMethodCallHandler((call) async {
      if (call.method == "DeviceToken/set") {
        setState(() {
          deviceToken = call.arguments['token'];
        });
      }
    });
    
    // 监听远程通知
    NotificationCenter.defaultCenter()
      .addObserver(this, name: "RemoteNotification/received", object: nil);
    
    // 初始化插件
    IosCommunicationNotification.registerForRemoteNotifications();
  }

  @override
  void dispose() {
    WidgetsBinding.instance!.removeObserver(this);
    NotificationCenter.defaultCenter().removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.resumed) {
      // 处理应用从后台恢复时的逻辑,如果需要的话
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Device Token: ${deviceToken ?? 'N/A'}'),
      ],
    );
  }

  @objc
  func receivedNotification(_ notification: Notification) {
    if let userInfo = notification.userInfo as? [AnyHashable: Any] {
      // 处理接收到的远程通知
      print("Received notification in Dart: \(userInfo)");
      // 更新UI或执行其他逻辑
    }
  }
}

注意事项

  1. 确保你的iOS项目配置了正确的签名和证书,以便能够接收远程通知。
  2. 上述代码示例仅为基础实现,可能需要根据实际需求进行调整。
  3. 插件的具体方法和功能请参考其官方文档或源码。

这个示例展示了如何在Flutter中集成ios_communication_notification插件,并通过原生代码和Dart层代码实现iOS通知的注册和接收。希望这对你有所帮助!

回到顶部