Gagri Global | Enterprise AI & IT Solutions

1Install PushNotification Plugin from Capacitor Documentation

Start by installing the PushNotification plugin using npm and syncing your Capacitor project:

npm install @capacitor/push-notifications
npx cap sync

2Create a Raw Folder in App Root

Create a "raw" folder in your app's root directory, for example:

android/app/src/main/res/raw

3Place Your Sound File

Place your custom sound file (e.g., sound.mp3) in the "raw" folder.

4Create a Service for Push Notifications

Create a service to manage your push notification code. Add the following code to the service:

async addListeners() {
  PushNotifications.createChannel({
    description: 'General Notifications',
    id: 'PushDefaultForeground',
    importance: 5,
    name: 'My notification channel',
    sound: 'mymusic', // Replace with your sound file name
    vibration: true,
    visibility: 1
  }).then(() => {
    console.log('Push channel created');
  }).catch(error => {
    console.error('Push channel error:', error);
  });

  await PushNotifications.addListener('registration', token => {
    console.log('Registration token:', token.value);
    localStorage.setItem("Token", JSON.stringify(token.value));
  });

  await PushNotifications.addListener('registrationError', err => {
    console.error('Registration error:', err.error);
  });

  await PushNotifications.addListener('pushNotificationReceived', notification => {
    console.log('Push notification received:', notification);
  });

  await PushNotifications.addListener('pushNotificationActionPerformed', notification => {
    console.log('Push notification action performed', notification.actionId, notification.inputValue);
  });
}

async registerNotifications() {
  let permStatus = await PushNotifications.checkPermissions();
  if (permStatus.receive === 'prompt') {
    permStatus = await PushNotifications.requestPermissions();
  }
  if (permStatus.receive !== 'granted') {
    throw new Error('User denied permissions!');
  }
  await PushNotifications.register();
}

async getDeliveredNotifications() {
  const notificationList = await PushNotifications.getDeliveredNotifications();
  console.log('Delivered notifications:', notificationList);
}

5Implement the Service in app.component.ts

In your app.component.ts file, import the PushNotification service and use it as follows:

import { PushnotificationService } from '../app/services/PushNotification/pushnotification.service';

constructor(private push: PushnotificationService) {
  this.push.addListeners();
  this.push.registerNotifications();
  this.push.getDeliveredNotifications();
}

Make sure to replace 'mymusic' in the service with the actual name of your custom sound file.

Conclusion

In this guide, we've covered the process of working with custom sound notifications in Capacitor. By following these steps, you can create a notification service and set up custom sounds for a better user experience in your mobile app.

Custom Sound Notificationsin Capacitor

Ionic Services