I’m using Ionic 4 and ANGULAR version 9 trying to send notification in IOS using Cordova.
I did all the requirements to push IOS notification and it was working fine before that but I’m not sure what happened if some packages version not match or whatever.
Here is my package.json
{
"name": "tagy",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "~9.1.6",
"@angular/core": "~9.1.6",
"@angular/forms": "~9.1.6",
"@angular/platform-browser": "^9.1.13",
"@angular/platform-browser-dynamic": "~9.1.6",
"@angular/router": "~9.1.6",
"@ionic-native/android-permissions": "^5.29.0",
"@ionic-native/app-rate": "^5.28.0",
"@ionic-native/app-version": "^5.30.0",
"@ionic-native/background-fetch": "^5.36.0",
"@ionic-native/background-mode": "^5.36.0",
"@ionic-native/badge": "^5.36.0",
"@ionic-native/barcode-scanner": "^5.30.0",
"@ionic-native/camera": "^5.27.0",
"@ionic-native/core": "^5.0.7",
"@ionic-native/fcm": "^5.31.1",
"@ionic-native/file-transfer": "^5.33.0",
"@ionic-native/geolocation": "^5.29.0",
"@ionic-native/location-accuracy": "^5.29.0",
"@ionic-native/native-geocoder": "^5.29.0",
"@ionic-native/onesignal": "^5.36.0",
"@ionic-native/photo-viewer": "^5.32.1",
"@ionic-native/push": "^5.36.0",
"@ionic-native/social-sharing": "^5.28.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^5.0.0",
"chart.js": "^2.9.4",
"com-sarriaroman-photoviewer": "1.2.5",
"cordova-android": "7.1.4",
"cordova-browser": "5.0.4",
"cordova-ios": "6.1.0",
"cordova-plugin-add-swift-support": "^2.0.2",
"cordova-plugin-android-permissions": "^1.1.0",
"cordova-plugin-androidx": "^3.0.0",
"cordova-plugin-androidx-adapter": "^1.1.1",
"cordova-plugin-app-version": "^0.1.9",
"cordova-plugin-apprate": "^1.5.0",
"cordova-plugin-background-mode": "0.7.3",
"cordova-plugin-badge": "0.8.8",
"cordova-plugin-camera": "^4.1.0",
"cordova-plugin-device": "2.0.2",
"cordova-plugin-dialogs": "^2.0.2",
"cordova-plugin-fcm-with-dependecy-updated": "2.2.5",
"cordova-plugin-file": "6.0.2",
"cordova-plugin-file-transfer": "1.7.1",
"cordova-plugin-firebase": "2.0.5",
"cordova-plugin-geolocation": "^4.0.2",
"cordova-plugin-ionic-keyboard": "^2.0.5",
"cordova-plugin-ionic-webview": "^4.0.0",
"cordova-plugin-nativegeocoder": "^3.4.1",
"cordova-plugin-nativestorage": "^2.3.2",
"cordova-plugin-request-location-accuracy": "^2.3.0",
"cordova-plugin-splashscreen": "5.0.2",
"cordova-plugin-statusbar": "2.4.2",
"cordova-plugin-whitelist": "1.3.3",
"cordova-plugin-x-socialsharing": "^6.0.2",
"cordova-support-google-services": "1.3.2",
"es6-promise-plugin": "^4.2.2",
"ionic-selectable": "^4.7.1",
"ngx-qrcode2": "^9.0.0",
"npm": "^7.21.1",
"phonegap-plugin-barcodescanner": "^8.1.0",
"phonegap-plugin-multidex": "1.0.0",
"phonegap-plugin-push": "2.3.0",
"rxjs": "^6.5.5",
"rxjs-compat": "^6.6.0",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.901.5",
"@angular/cli": "9.1.15",
"@angular/compiler": "~9.1.6",
"@angular/compiler-cli": "~9.1.6",
"@angular/language-service": "~9.1.6",
"@ionic/angular-toolkit": "^2.1.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^4.2.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.8.3"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-camera": {
"ANDROID_SUPPORT_V4_VERSION": "27.+"
},
"cordova-plugin-x-socialsharing": {},
"cordova-plugin-androidx": {},
"cordova-plugin-androidx-adapter": {},
"cordova-plugin-apprate": {},
"cordova-plugin-geolocation": {},
"cordova-plugin-nativegeocoder": {},
"cordova-plugin-android-permissions": {},
"cordova-plugin-request-location-accuracy": {
"PLAY_SERVICES_LOCATION_VERSION": "16.+"
},
"cordova-plugin-app-version": {},
"phonegap-plugin-barcodescanner": {
"ANDROID_SUPPORT_V4_VERSION": "27.+"
},
"cordova-plugin-file-transfer": {},
"cordova-plugin-fcm-with-dependecy-updated": {},
"com-sarriaroman-photoviewer": {},
"cordova-plugin-background-mode": {},
"cordova-plugin-badge": {}
},
"platforms": [
"ios",
"browser"
]
}
}
Here is app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
// FCM
import { FCM } from '@ionic-native/fcm/ngx';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
FCM,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
Here is app.component.ts
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { FCM } from '@ionic-native/fcm/ngx';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
public selectedIndex = 0;
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private fcm: FCM
) {
this.backgroundMode.enable();
this.badge.set(this.notiunread);
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleBlackTranslucent();
this.splashScreen.hide();
const SigninData = JSON.parse(localStorage.getItem("signindata"));
if(SigninData!=null){
console.log("have data");
this.router.navigate(["/tabs"], { skipLocationChange: true });
} else {
console.log("no data");
this.router.navigate(["/landing"], { skipLocationChange: true });
}
// this.fcm.subscribeToTopic('marketing');
this.fcm.getToken().then(token => {
console.log(token);
}, (err) => {
console.log(err);
});
// ionic push notification example
this.fcm.onNotification().subscribe(data => {
console.log(data);
if (data.wasTapped) {
console.log('Received in background');
this.router.navigate(['/tabs/tab1/notification']);
} else {
this.backgroundMode.enable();
this.badge.set(this.notiunread);
console.log('Received in foreground');
this.call(data);
}
});
// refresh the FCM token
this.fcm.onTokenRefresh().subscribe(token => {
console.log(token);
}, (err) => {
console.log(err);
});
});
this.providersservices.getObservable().subscribe((data) => {
console.log('Data received', data);
this.pic = data.pic;
this.name = data.name;
this.phone = data.number;
});
}
I’m using the same code with android, the notification badge working fine.
Could anyone help me check please? Thank you very much.