Ionic 5 + capacitor push notification sound not working

Ionic Framework Ionic Angular
1

Hi everyone,

I have an Ionic 3 App that I’m upgrading to Ionic 5 with capacitor 2.4.9 and I need to make the notifications logic working again. My main issue so far is that the custom sound I use for the notifications it’s not working.
I have created a custom channel and assigned to it a sound with max priority (5) as per below

this.push.createChannel({
      id: 'custom-channel',
      description: 'my App Channel',
      importance: 5,
      sound: 'unconvinced',
      vibration: true,
      badge: true
    }).then((r) => console.log('APP COMPONENT CHANNEL CREATED? ', r));

the “unconvinced” file is an mp3 inside the assets/sound folder of my ionic and angular project.

The channel seems to be correctly created but when I receive the notification there is no sound.

I’m using ‘@ionic-native/push/ngx’ for the notifications.

This is my current Ionic configuration:

Ionic:

   Ionic CLI                     : 5.4.16
   Ionic Framework               : @ionic/angular 5.8.5
   @angular-devkit/build-angular : 0.1101.1
   @angular-devkit/schematics    : 13.0.1
   @angular/cli                  : 11.2.15
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.5.0
   @capacitor/core : 2.5.0

Utility:

   cordova-res : 0.15.3
   native-run  : 1.4.0

System:

   NodeJS : v14.17.0 (C:\Program Files\nodejs\node.exe)
   npm    : 7.20.2
   OS     : Windows 10

Below my package.json:

"dependencies": {
    "@angular/common": "~11.2.0",
    "@angular/core": "~11.2.0",
    "@angular/forms": "~11.2.0",
    "@angular/platform-browser": "~11.2.0",
    "@angular/platform-browser-dynamic": "~11.2.0",
    "@angular/router": "~11.2.0",
    "@capacitor/android": "^2.4.9",
    "@capacitor/core": "^2.4.9",
    "@capacitor/ios": "^2.4.9",
    "@ionic-native/core": "^5.3.5",
    "@ionic-native/deeplinks": "^5.3.5",
    "@ionic-native/fingerprint-aio": "^5.3.5",
    "@ionic-native/in-app-browser": "^5.3.5",
    "@ionic-native/market": "^5.3.5",
    "@ionic-native/ms-adal": "^5.3.5",
    "@ionic-native/push": "^5.3.5",
    "@ionic/angular": "^5.6.13",
    "@ionic/angular-toolkit": "^2.3.3",
    "@ionic/storage": "^3.0.6",
    "@ionic/storage-angular": "^3.0.6",
    "cordova-plugin-fingerprint-aio": "^4.0.2",
    "cordova-plugin-inappbrowser": "^5.0.0",
    "cordova-plugin-market": "^1.2.0",
    "cordova-plugin-ms-adal-is-back": "^0.10.10",
    "cordova-sqlite-storage": "^6.0.0",
    "crypto-js": "^3.0.0",
    "es6-promise-plugin": "^4.2.2",
    "ionic-plugin-deeplinks": "^1.0.22",
    "jetifier": "^2.0.0",
    "localforage-cordovasqlitedriver": "^1.8.0",
    "ngx-pinch-zoom": "^2.6.2",
    "phonegap-plugin-multidex": "^1.0.0",
    "phonegap-plugin-push": "^2.3.0",
    "rxjs": "~6.6.3",
    "tslib": "^2.3.0",
    "webpack-bundle-analyzer": "^4.4.2",
    "zone.js": "^0.11.4"
  },

  "devDependencies": {
    "@angular-devkit/build-angular": "0.1101.1",
    "@angular-eslint/builder": "1.2.0",
    "@angular-eslint/eslint-plugin": "1.2.0",
    "@angular-eslint/eslint-plugin-template": "1.2.0",
    "@angular-eslint/schematics": "^2.1.0",
    "@angular-eslint/template-parser": "1.2.0",
    "@angular/cli": "~11.2.0",
    "@angular/compiler": "~11.2.0",
    "@angular/compiler-cli": "~11.2.0",
    "@angular/language-service": "~11.2.0",
    "@capacitor/cli": "^2.4.9",
    "@types/crypto-js": "^3.1.47",
    "@types/jasmine": "^3.8.2",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "^16.7.10",
    "@typescript-eslint/eslint-plugin": "4.29.1",
    "@typescript-eslint/parser": "4.29.1",
    "eslint": "^7.29.0",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "^5.2.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "^4.0.1",
    "karma-jasmine-html-reporter": "^1.7.0",
    "protractor": "~7.0.0",
    "ts-node": "~10.2.0",
    "typescript": "~4.0.0"
  }

Thanks in advance for your help.

2

I’m facing the same issue. Did you found any solution?

3

unfortunately not… maybe citing @max will help us :slight_smile:

1 Like
4

FYI, citing a CEO of Ionic will not help.

5

Probably not but It’s worth a try :slight_smile:

6

Hey there, given that this post is pretty old, @mayankkataria can you share an updated code sample?

Also worth noting that the path needs to relevant to the res/raw directory for android.

1 Like
7

thanks for your feedback :slight_smile: the sound (an mp3 file) is in the res/raw for android but still…

1 Like
8

Yes, but the path you set for sound might be wrong.

9

I used the same path I used on ionic 3 which is working correctly

10

If you’re switching to Capacitor, the file path is probably different

11

Can you provide us an example please? much appreciate your help, thanks

12

My sound file sound.wav is present in res/raw directory.
And here’s my notification code -

async scheduleNotifications() {
    const notifications: LocalNotificationSchema[] = [];
    this.tasks.forEach(task => {
      if (task.reminders && task.reminders.length > 0) {
        task.reminders.forEach(reminder => {
          console.log('reminder: ', reminder, Number(reminder.id));
          notifications.push({
            id: notifications.length,
            title: task.name,
            body: task.description,
            schedule: {
              at: reminder.date,
              allowWhileIdle: true,
              on: {
                hour: reminder.date.getHours(),
                minute: reminder.date.getMinutes()
              },
              count: 1
            },
            sound: 'sound.wav'
          })
        })
      }
    });
    console.log('notifications: ', notifications);
    await LocalNotifications.schedule({
      notifications: notifications
    });
  }
13

@mhartington Did you found any solution? Please it’s urgent. I can also share my screen if you want.

14

While creating the channel we need to add the below,
visibility: 1
And while sending the notifications the channel id must be added.
Note: I have tried and it’s working properly.

2 Likes
15

Thanks for you feedback.