Gagri Global IT services is having a team of executives who have good experience in developing applications on various platforms like SharePoint 2013/2010, Silverlight, net Framework 4.5 and Mobile tools.

2. Custom sound notifications in capacitor

Published on October 18, 2023 by Venu & Upendra

1. Install 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

2. Create a Raw Folder in App Root

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


3. Place Your Sound File

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

4. Create a Service for Push Notifications

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

            async addListeners() {
            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);

5. Implement 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) {

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


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.


All design and content Copyright © 2012-2018 Gagri Global IT Services Pvt.Ltd. All rights reserved