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:

android/app/src/main/res/raw

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

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