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

news2025/1/11 14:56:50

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

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

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

一、测试服务器搭建:

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

               

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

        

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

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

npm i firebase-admin

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

        

service 代码  :

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();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1361887.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

3D空间漫游技术的日趋成熟,让博物馆数字化大放异彩!

随着科技的飞速发展&#xff0c;互联网已经成为人们生活中不可或缺的一部分。在这个数字化时代&#xff0c;博物馆也紧跟时代潮流&#xff0c;将传统的实体博物馆与现代科技相结合&#xff0c;诞生了一种全新的博物馆形式——3D线上博物馆。这种新型博物馆凭借其独特的魅力&…

RT_Thread 调试笔记:串口打印、MSH控制台 相关

说明&#xff1a;记录日常使用 RT_Thread 开发时做的笔记。 持续更新中&#xff0c;欢迎收藏。 1.打印相关 1.打印宏定义&#xff0c;可以打印打印所在文件&#xff0c;函数&#xff0c;行数。 #define PRINT_TRACE() printf("-------%s:%s:%d------\r\n", __FIL…

宏电股份5G RedCap终端产品助力深圳极速先锋城市建设

12月26日&#xff0c;“全城全网&#xff0c;先锋物联”深圳移动5G-A RedCap助力深圳极速先锋城市创新发布会举行&#xff0c;宏电股份携一系列5G RedCap终端产品应邀参与创新发布会&#xff0c;来自全国5G生态圈的各界嘉宾、专家学者济济一堂&#xff0c;共探信息化数字化创新…

GitHub 一周热点汇总 第4期 (2024/01/01-01/06)

GitHub一周热点汇总第四期 (2023/12/24-12/30)&#xff0c;梳理每周热门的GitHub项目&#xff0c;了解热点技术趋势&#xff0c;掌握前沿科技方向&#xff0c;发掘更多商机。2024年到了&#xff0c;希望所有的朋友们都能万事顺遂。 说明一下&#xff0c;有时候本周的热点项目会…

蟹目标检测数据集VOC格式400张

蟹&#xff0c;一种独特的海洋生物&#xff0c;以其强壮的身体和独特的生活习性而闻名。 蟹的身体宽厚&#xff0c;有一对锐利的大钳子&#xff0c;这使得它们在寻找食物和保护自己时非常有力。蟹的外观颜色多样&#xff0c;有绿色、蓝色、棕色和红色等&#xff0c;这使得它们在…

软件工程概论------文件管理

目录 1.文件的相关概念 2.文件目录 3.位示图 4.索引文件 5.例题 1.文件的相关概念 文件:具有符号名的、在逻辑上具有完整意义的一组相关信息项的集合。 逻辑结构:有结构的记录式文件、无结构的流式文件。 物理结构: 连续结构、链接结构、索引结构、多个物理块的索引表。 …

解决ChatGPT4.0无法上传文件

问题描述 ChatGPT4.0&#xff1a;上传文件时出错 解决方案&#xff1a; 仔细检查文件的编码格式&#xff0c;他似乎目前只能接受utf-8的编码&#xff0c;所以把文件的编码改为UTF-8即可成功上传

企业Aspera替代方案有哪些推荐

随着企业数据量的不断增加&#xff0c;数据传输和共享成为了一个重要的问题。Aspera是一款高性能、低延迟的数据传输工具&#xff0c;但是它并不是万能的&#xff0c;随着数据量的不断增大&#xff0c;也有一些企业需要寻找Aspera的替代方案。本文将介绍三种常用的企业Aspera替…

物联网的感知层、网络层与应用层分享

物联网的概念在很早以前就已经被提出&#xff0c;20世纪末期在美国召开的移动计算和网络国际会议就已经提出了物联网(Internet of Things)这个概念。 最先提出这个概念的是MIT Auto-ID中心的Ashton教授&#xff0c;他在研究RFID技术时&#xff0c;便提出了结合物品编码、互联网…

如何在群晖7.2中运行WPS Office镜像容器并使用固定地址公网访问

文章目录 1. 拉取WPS Office镜像2. 运行WPS Office镜像容器3. 本地访问WPS Office4. 群晖安装Cpolar5. 配置WPS Office远程地址6. 远程访问WPS Office小结 7. 固定公网地址 wps-office是一个在Linux服务器上部署WPS Office的镜像。它基于WPS Office的Linux版本&#xff0c;通过…

AI硬件2——SIPEED MaixCube(Kendryte K210)基础使用

系列文章目录 官方网站 开发文档 文章目录 系列文章目录前言一、特点介绍1、MaixPy2、KPU3、MaixPy IDE4、kmodel 二、环境准备1、USB 驱动安装1&#xff09;Linux2&#xff09;Windows 2、更新固件3、串口工具1&#xff09;连接硬件2&#xff09;Windows串口工具3&#xff09…

「优质Verilog刷题网站推荐」HDLBits

目前 集成电路领域算是风口行业之一 因此需要大量的芯片设计人才 而数字集成电路是其中的前端部分 设计数字集成电路所使用的主流语言是Verilog 然而 不像传统的编程语言C Java Python等有大量的刷题网站如力扣、牛客网等 支持Verilog刷题的网站不算很多 优质的就更少了 牛客网…

精选顶级期刊中的三幅可复现图表

简介 最近在阅读文献时&#xff0c;发现了一些出色的可视化案例&#xff0c;特此与大家分享。这些图共同的特点是&#xff1a;1. 易懂明晰&#xff1b; 2. 信息丰富&#xff1b; 3. 配色优雅。 小编有话说&#xff1a;以下三幅图选自领域内顶级期刊&#xff0c;虽然并非采用R语…

【ChatGPT】提示设计的艺术:使用清晰的语法

探索清晰的语法如何使您能够将意图传达给语言模型&#xff0c;并帮助确保输出易于解析 All images were generated by Scott and Marco. 这是与Marco Tulio Ribeiro共同撰写的关于如何使用指导来控制大型语言模型&#xff08;LLM&#xff09;的系列文章的第一部分。我们将从基…

快速了解云计算与云原生

快速了解云计算与云原生 云计算云原生DevOps容器持续交付微服务 云计算 在讲云原生之前&#xff0c;先来讲讲云计算 其中云原生属于技术架构理念&#xff0c;而云计算提供应用所需的基础资源&#xff0c;云计算是云原生的基础&#xff0c;两者是相辅相成的 云计算简单来说&a…

2024--Django平台开发-Web框架和Django基础(二)

day02 Web框架和Django基础 今日概要&#xff1a; 网络底层引入&#xff0c;到底什么是web框架&#xff1f;常见web框架对比django快速上手&#xff08;创建网站&#xff09;常见操作&#xff1a;虚拟环境、django项目、多app应用、纯净版逐点剖析&#xff1a;路由、视图、模…

SpringBoot基于Redis(7.2)分片集群实现读写分离

文章目录 一、前置提要二、集群搭建三、SpringBoot访问分片集群 一、前置提要 SpringBoot访问Redis分片集群和Redis哨兵模式&#xff0c;使用上没有什么区别。唯一的区别在于application.yml配置上不一样。 二、集群搭建 首先&#xff0c;无论如何&#xff0c;得先有一个Red…

零配置,零麻烦:MapStruct 的轻松对象映射之旅

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 零配置&#xff0c;零麻烦&#xff1a;MapStruct 的轻松对象映射之旅 前言MapStruct是什么快速上手&#xff1a;基础映射高级映射技巧1. 针对复杂类型的映射&#xff1a;2. 自定义映射逻辑&#xff1a…

【Sublime Text】| 01——下载安装注册

系列文章目录 【Sublime Text】| 01——下载软件安装并注册 【Sublime Text】| 02——常用插件安装及配置 失败了也挺可爱&#xff0c;成功了就超帅。 文章目录 前言1. 下载2. 安装3. 注册3.1 通过修改应用程序注册3.2 通过替换应用程序注册 感谢 前言 轻量代码编辑器有很多 之…

并发(4)

目录 16.sychronized修饰方法在抛出异常时&#xff0c;会释放锁吗&#xff1f; 17.多个线程等待同一个sychronized锁的时候&#xff0c;JVM如何选择下一个获取锁的线程&#xff1f; 18.sychronized是公平锁吗&#xff1f; 19.volatile关键字的作用是什么&#xff1f; 20.vo…