Ionic 3应用启动图标通知角标无法显示问题求助

我之前在Ionic 3项目里也踩过这个坑，给你梳理下完整且正确的实现流程，应该能解决你的角标不显示问题：

1. 确保依赖安装正确（关键第一步） #

Ionic 3需要搭配对应版本的Ionic Native和Cordova插件，别装错版本：

• 先安装Cordova的角标插件：

  cordova plugin add cordova-plugin-badge --save
  

• 再安装适配Ionic 3的Ionic Native Badge包（必须是4.x版本，因为Ionic 3对应Native 4）：

  npm install @ionic-native/badge@4 --save
  

2. 在AppModule中注册Provider #

很多人会漏掉这一步，导致注入失败：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { Badge } from '@ionic-native/badge'; // 导入Badge

@NgModule({
  declarations: [
    MyApp
    // ... 其他组件
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
    // ... 其他组件
  ],
  providers: [
    Badge, // 添加到Providers数组
    // ... 其他服务
  ]
})
export class AppModule {}

3. 正确调用角标方法（必须在平台就绪后） #

Cordova插件只有在设备完全就绪后才能调用，所以一定要包裹在platform.ready()里，同时推荐用Ionic Native封装好的方法，比直接调用原生Cordova接口更稳定：

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Badge } from '@ionic-native/badge';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(
    private platform: Platform,
    private badge: Badge
  ) {
    this.platform.ready().then(() => {
      // 先检查并请求权限（iOS必须，Android部分厂商需要）
      this.badge.hasPermission().then(granted => {
        if (!granted) {
          this.badge.requestPermission();
        } else {
          // 设置角标数量
          this.badge.set(10)
            .then(() => console.log('角标设置成功'))
            .catch(err => console.error('设置角标失败:', err));
        }
      });
    });
  }
}

4. 平台特殊配置注意事项 #

• iOS端：
  需要在config.xml中添加权限描述（iOS 10+要求），否则会被系统拒绝权限：

  <platform name="ios">
    <config-file parent="NSUserNotificationUsageDescription" platform="ios" target="*-Info.plist">
      <string>需要显示消息角标来提醒您有新通知</string>
    </config-file>
  </platform>
  

• Android端：
  不同厂商（华为、小米、OPPO等）的角标规则差异很大，部分厂商需要额外配置通知渠道（Android 8.0+），或者需要用户手动开启App的通知权限。建议测试时用对应品牌的真机，模拟器可能不支持角标显示。

如果你坚持用原生Cordova调用方式 #

如果你不想用Ionic Native封装，直接调用cordova.plugins.notification.badge.set，也要确保在platform.ready()之后执行，否则插件还没加载会报错：

this.platform.ready().then(() => {
  if (cordova.plugins && cordova.plugins.notification && cordova.plugins.notification.badge) {
    cordova.plugins.notification.badge.set(10);
  }
});

最后提醒：一定要用真机测试，模拟器的角标支持很有限，尤其是Android模拟器。

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