Ionic 3 + One Signal handleNotificationReceived doesn't get fired - ios

Question

I'm following this Ionic SDK Setup link. I'm setting up the push notification on my app.
It's working, I can get the notification. Here's my code.
this.platform.ready().then(() => {
let OneSignal = window["plugins"].OneSignal;
OneSignal
.startInit(AppSettings.ONESIGNAL_APP_ID)
.inFocusDisplaying(OneSignal.OSInFocusDisplayOption.Notification)
.handleNotificationOpened(function(jsonData) {
console.log('OPENED');
})
.handleNotificationReceived(function(jsonData) {
console.log('RECEIVED');
})
.endInit();
OneSignal.getIds(notificationsCallBack.getIdReceived.bind(this));
});
However, the function handleNotificationReceived is only called if the app is open. I need to execute some code (I need an in-app badge), even if the app is closed. I'm setting the content_available to true on my OneSignal API, I also tested directly on the OneSignal website and I couldn't make it works. The function handleNotificationOpened works as expected.
How can I handle the notification received event when my app is not open?
I'm testing on iPhone 6+, iOS 11.0.3
My env:
Ionic 3.12.0
Cordova 7.0.1
My package.json
{
"name": "XXX",
"author": "XXXX XX",
"homepage": "XXX",
"private": true,
"scripts": {
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "4.2.2",
"#angular/compiler": "4.2.2",
"#angular/compiler-cli": "4.2.2",
"#angular/core": "4.2.2",
"#angular/forms": "4.2.2",
"#angular/http": "4.2.2",
"#angular/platform-browser": "4.2.2",
"#angular/platform-browser-dynamic": "4.2.2",
"#angular/platform-server": "4.2.2",
"#angular/router": "^4.2.2",
"#ionic-native/camera": "^3.4.4",
"#ionic-native/core": "^3.10.3",
"#ionic-native/facebook": "^4.3.1",
"#ionic-native/geolocation": "^3.2.2",
"#ionic-native/google-maps": "^3.4.4",
"#ionic-native/google-plus": "^3.4.4",
"#ionic-native/image-picker": "^3.2.2",
"#ionic-native/native-storage": "^3.4.4",
"#ionic-native/splash-screen": "^3.12.1",
"#ionic-native/status-bar": "^3.12.1",
"#ionic-native/toast": "^3.10.3",
"#ionic-native/transfer": "^3.2.2",
"#ionic/storage": "^2.0.0",
"bourbon": "^4.2.7",
"cordova-ios": "^4.5.1",
"cordova-plugin-camera": "^2.4.1",
"cordova-plugin-compat": "^1.2.0",
"cordova-plugin-console": "^1.0.7",
"cordova-plugin-crop": "^0.3.1",
"cordova-plugin-device": "^1.1.6",
"cordova-plugin-facebook4": "^1.7.4",
"cordova-plugin-googlemaps": "^2.0.11",
"cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git",
"cordova-plugin-googleplus": "^5.1.1",
"cordova-plugin-nativestorage": "^2.2.2",
"cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-statusbar": "^2.2.3",
"cordova-plugin-whitelist": "^1.3.2",
"cordova-plugin-x-toast": "^2.6.0",
"cordova-sqlite-storage": "^2.0.4",
"cropperjs": "^1.1.0",
"font-awesome": "^4.7.0",
"ionic-angular": "3.3.0",
"ionic-native": "2.9.0",
"ionic-plugin-keyboard": "^2.2.1",
"ionic2-auto-complete": "^1.5.0-beta",
"ionicons": "3.0.0",
"ios-sim": "^6.1.2",
"ng2-cookies": "^1.0.4",
"onesignal-cordova-plugin": "^2.0.11",
"rxjs": "5.4.0",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.12"
},
"devDependencies": {
"#ionic/app-scripts": "1.3.7",
"typescript": "2.3.4"
},
"cordovaPlugins": [
"cordova-plugin-device",
"cordova-plugin-console",
"cordova-plugin-whitelist",
"cordova-plugin-splashscreen",
"cordova-plugin-statusbar",
"ionic-plugin-keyboard",
"cordova-plugin-geolocation",
"cordova-plugin-compat",
"cordova-plugin-file-transfer",
"cordova-plugin-file"
],
"cordovaPlatforms": [
{
"platform": "ios",
"version": "",
"locator": "ios"
},
{
"platform": "android",
"version": "",
"locator": "android"
}
],
"description": "ion2-FullApp: The Best Ionic 2 Starter app",
"config": {
"ionic_sass": "./config/sass.config.js",
"ionic_copy": "./config/copy.config.js"
},
"cordova": {
"platforms": [
"ios"
],
"plugins": {
"cordova-plugin-camera": {
"CAMERA_USAGE_DESCRIPTION": " ",
"PHOTOLIBRARY_USAGE_DESCRIPTION": " "
},
"cordova-plugin-console": {},
"cordova-plugin-crop": {},
"cordova-plugin-device": {},
"cordova-plugin-facebook4": {
"APP_ID": "XX",
"APP_NAME": "XXX"
},
"cordova-plugin-googleplus": {
"REVERSED_CLIENT_ID": "XX"
},
"cordova-plugin-nativestorage": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-x-toast": {},
"cordova-sqlite-storage": {},
"ionic-plugin-keyboard": {},
"onesignal-cordova-plugin": {},
"cordova-plugin-googlemaps": {
"API_KEY_FOR_ANDROID": "XX",
"API_KEY_FOR_IOS": "XX",
"LOCATION_WHEN_IN_USE_DESCRIPTION": "Show your location on the map",
"LOCATION_ALWAYS_USAGE_DESCRIPTION": "Trace your location on the map",
"key": "XX"
}
}
}
}

Answer 1

The notification opened event was fixed in the OneSignal Cordova SDK 2.2.0. It was only an issue for iOS 11 devices.

Answer 2

you need to check this. Let me know if it works for you.
You need to set content_available and mutable_content in true in the body of the POST request.