当前位置: 首页 > news >正文

给Flutter + FireBase 增加 badge 徽章,App启动器 通知红点。

在此之前需要配置好 firebase 在flutter 在项目中。(已经配置好的可以忽略此提示)

Firebase 配置教程:flutter + firebase 云消息通知教程 (android-安卓、ios-苹果)_flutter firebase_messaging ios环境配置-CSDN博客

 由于firebase 提供的消息通知测试只能做简单设置。所以这里需要自己搭建一个服务。

一、测试服务器搭建:

        1. 来到 fireBase 控制台,进入需要搭建的项目。(生成私钥)

               

        2.服务器环境-> 向特定设备发送消息

        

        官方文档给了六种服务器配置信息。以下例子采用 NestJs 进行快速搭建一个服务器。(搭建过程忽略)IDE使用的 Vscode。

        在搭建好的项目中 安装 firebase-admin 依赖 (Linux, MacOs 命令前需要加 sudo 提高权限)

npm i firebase-admin

        把上面在firebase 生成私钥 json 文件 复制到src文件夹下 并在service中引用。

        

Service 代码  :(NestJs)

FireBase 官方例子比较老旧 许多Api 已经更改,需要注意。

可以直接在 NestJs 代码中,Ctrl + 点击的方法进到 TypeScript 的类型声明文件中,查看相关Api 或者去官网查看相关已经废弃和新版Api。

官网Api参考连接:https://firebase.google.com/docs/reference/admin/node/firebase-admin.messaging.messaging.md?hl=zh-cn#messagingsend

import { Injectable } from '@nestjs/common';import * as admin from 'firebase-admin';
import * as serviceAccount from './serviceAccountKey.json';
import { ApiTags } from '@nestjs/swagger';const app = admin.initializeApp({credential: admin.credential.cert({projectId: serviceAccount.project_id,clientEmail: serviceAccount.client_email,privateKey: serviceAccount.private_key})
});// 此处放上 firebase 为你生成的 token
let token: string = 'dAevBHOOS9GtQwWQ5ffhtU:APA91bGlc_35hvVYzV18-Ok0-ejWJvGzwrvdoMGTZSuXSxSX_k_5ZrCyLU9HrAZZZsCH9cSjwdAVFoXsKzP0H2qTBBTUaHRTZ7bgijIevdnCiiQ7UGG7qRwM3Kyh5XrGl89G8GU1NLoQ';@ApiTags('App')
@Injectable()
export class AppService {async sendMessage(): Promise<string> {const message = {notification: {title: 'iwinvApp notification test2',body: 'body content',},data: {score: '850',time: '2:45'},apns: {payload: {aps: { // ios 设置徽章显示数字badge: 4,sound: 'default'}}},token: token};return await app.messaging().send(message)}
}

     执行命令 启动服务:注意main.ts 中的 listen(Numbr) 中的端口号。

npm run start:dev

此时可以访问连接 http://127.0.0.1:3000/ (3000是你自己的端口号) 也可利用postman进行访问测试 (此例子中在Nestjs中安装了 swagger 进行测试)

二、Android徽章问题:

对于支持应用图标徽章的 Android 设备制造商,当设备接收到 Firebase Cloud Messaging(FCM)推送通知时,往往会自动增加应用图标上的徽章数量。这种自动递增或增加徽章的行为通常是设备制造商或 Android 系统的默认行为,而无需应用程序代码进行特殊处理。

但是,这种行为可能会因设备制造商和 Android 版本而异。不同的制造商可能会有自己的徽章实现方式或默认行为。因此,虽然大多数支持徽章的 Android 设备在接收到 FCM 通知时会自动增加徽章数量,但在特定设备或情况下可能会有例外。

如果徽章功能对你的应用很重要,建议在支持的设备上进行详细的测试,以确保通知行为符合你的预期,并准备好处理任何可能的差异或问题。

安卓支持徽章的机型厂商 >> GitHub - leolin310148/ShortcutBadger: An Android library supports badge notification like iOS in Samsung, LG, Sony and HTC launchers.

三、flutter_app_badger  flutter 应用内使用

flutter_app_badger 插件地址>> https://pub.dev/packages/flutter_app_badger

安装插件:

flutter pub add flutter_app_badger

 ios 需要在 info.plist 中增加以下配置:

<key>UIBackgroundModes</key><array><string>remote-notification</string></array>

// 引入插件
import 'package:flutter_app_badger/flutter_app_badger.dart';// 增加徽章调用方法
FlutterAppBadger.updateBadgeCount(1);// 移除徽章方法 (ios 支持)
FlutterAppBadger.removeBadge();// 检查当前设备是否支持徽章功能 (异步)FlutterAppBadger.isAppBadgeSupported();

相关文章:

  • base64与BytesIO图片进行编码、解码;api调用
  • rk3566 armbian修复usb2.0并挂载U盘
  • Hadoop集群环境下HDFS实践编程过滤出所有后缀名不为“.abc”的文件时运行报错:java.net.ConnectException: 拒绝连接;
  • 数据分析-Pandas如何轻松处理时间序列数据
  • 【LeetCode:228. 汇总区间 | 区间】
  • 大模型学习之书生·浦语大模型4——基于Xtuner大模型微调实战
  • 开源加解密库之GmSSL
  • jenkins忘记密码后的操作
  • 网关Gateway
  • 机器学习笔记一之入门概念
  • (aiohttp-asyncio-FFmpeg-Docker-SRS)实现异步摄像头转码服务器
  • Python库学习(十四):ORM框架-SQLAlchemy
  • Jenkins-Pipeline语法总结大全
  • x-cmd pkg | trdsql - 能对 CSV、LTSV、JSON 和 TBLN 执行 SQL 查询的工具
  • 008-关于FPGA/ZYNQ直接处理图像传感器数据输出的若干笔记(裸板采集思路)
  • [译]Python中的类属性与实例属性的区别
  • 【React系列】如何构建React应用程序
  • 【跃迁之路】【585天】程序员高效学习方法论探索系列(实验阶段342-2018.09.13)...
  • Android交互
  •  D - 粉碎叛乱F - 其他起义
  • E-HPC支持多队列管理和自动伸缩
  • extjs4学习之配置
  • iOS小技巧之UIImagePickerController实现头像选择
  • isset在php5.6-和php7.0+的一些差异
  • Linux学习笔记6-使用fdisk进行磁盘管理
  • python学习笔记-类对象的信息
  • Python学习之路13-记分
  • VUE es6技巧写法(持续更新中~~~)
  • 马上搞懂 GeoJSON
  • 浅谈Golang中select的用法
  • 浅谈JavaScript的面向对象和它的封装、继承、多态
  • 学习笔记:对象,原型和继承(1)
  • 自动记录MySQL慢查询快照脚本
  • Hibernate主键生成策略及选择
  • 浅谈sql中的in与not in,exists与not exists的区别
  • 如何通过报表单元格右键控制报表跳转到不同链接地址 ...
  • 新海诚画集[秒速5センチメートル:樱花抄·春]
  • ​​​​​​​Installing ROS on the Raspberry Pi
  • ​2021半年盘点,不想你错过的重磅新书
  • (附源码)计算机毕业设计ssm基于B_S的汽车售后服务管理系统
  • (全注解开发)学习Spring-MVC的第三天
  • (未解决)jmeter报错之“请在微信客户端打开链接”
  • (一)spring cloud微服务分布式云架构 - Spring Cloud简介
  • (原創) 如何解决make kernel时『clock skew detected』的warning? (OS) (Linux)
  • (总结)Linux下的暴力密码在线破解工具Hydra详解
  • * CIL library *(* CIL module *) : error LNK2005: _DllMain@12 already defined in mfcs120u.lib(dllmodu
  • ***详解账号泄露:全球约1亿用户已泄露
  • .bat批处理(十):从路径字符串中截取盘符、文件名、后缀名等信息
  • .gitignore
  • .net Signalr 使用笔记
  • .NET 除了用 Task 之外,如何自己写一个可以 await 的对象?
  • .NET/C# 使用 ConditionalWeakTable 附加字段(CLR 版本的附加属性,也可用用来当作弱引用字典 WeakDictionary)
  • .NET下ASPX编程的几个小问题
  • @SuppressWarnings(unchecked)代码的作用
  • [20190113]四校联考