Ionic React Capacitor Push Example - Push functions

Home.tsx

import React, { useEffect, useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton, IonFooter, IonList, IonCard, IonCardContent, IonItem, IonLabel, IonListHeader, IonText, IonButtons, IonMenuButton } from '@ionic/react';
import { PushNotificationSchema, PushNotifications, Token, ActionPerformed } from '@capacitor/push-notifications';
import './Home.css';
import { Toast } from "@capacitor/toast";

export default function PushNotificationsContainer() {
    const nullEntry: any[] = []
    const [notifications, setnotifications] = useState(nullEntry);

    useEffect(()=>{
        PushNotifications.checkPermissions().then((res) => {
            if (res.receive !== 'granted') {
              PushNotifications.requestPermissions().then((res) => {
                if (res.receive === 'denied') {
                  showToast('Push Notification permission denied');
                }
                else {
                  showToast('Push Notification permission granted');
                  register();
                }
              });
            }
            else {
              register();
            }
          });
    },[])
    
    const register = () => {
        console.log('Initializing HomePage');

        // Register with Apple / Google to receive push via APNS/FCM
        PushNotifications.register();

        // On success, we should be able to receive notifications
        PushNotifications.addListener('registration',
            (token: Token) => {
                showToast('Push registration success');
            }
        );

        // Some issue with our setup and push will not work
        PushNotifications.addListener('registrationError',
            (error: any) => {
                alert('Error on registration: ' + JSON.stringify(error));
            }
        );

        // Show us the notification payload if the app is open on our device
        PushNotifications.addListener('pushNotificationReceived',
            (notification: PushNotificationSchema) => {
                setnotifications(notifications => [...notifications, { id: notification.id, title: notification.title, body: notification.body, type: 'foreground' }])
            }
        );

        // Method called when tapping on a notification
        PushNotifications.addListener('pushNotificationActionPerformed',
            (notification: ActionPerformed) => {
                setnotifications(notifications => [...notifications, { id: notification.notification.data.id, title: notification.notification.data.title, body: notification.notification.data.body, type: 'action' }])
            }
        );
    }

    const showToast = async (msg: string) => {
        await Toast.show({
            text: msg
        })
    }

    return (
        <IonPage id='main'>
            <IonHeader>
                <IonToolbar color="primary">
                    <IonTitle slot="start"> Push Notifications</IonTitle>
                </IonToolbar>
                <IonToolbar color="light">
                    <IonTitle slot="start">By Enappd Team</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent className="ion-padding">
                <div>
                    <IonList>
                        <IonCard>
                            <IonCardContent>
                                1. Register for Push by clicking the footer button.<br></br>
                                2. Once registered, you can send push from the Firebase console. <br></br>
                                <a href="https://enappd.gitbook.io/ionic-5-react-capacitor-full-app/features/push-notifications" target="_blank">Check documentation</a><br></br>
                                3. Once your app receives notifications, you'll see the data here in the list
                            </IonCardContent>
                        </IonCard>
                    </IonList>

                </div>
                <IonListHeader mode="ios" lines="full">
                    <IonLabel>Notifications</IonLabel>
                </IonListHeader>
                {notifications.length !== 0 &&
                    <IonList>

                        {notifications.map((notif: any) =>
                            <IonItem key={notif.id}>
                                <IonLabel>
                                    <IonText>
                                        <h3 className="notif-title">{notif.title}</h3>
                                    </IonText>
                                    <p>{notif.body}</p>
                                    {notif.type==='foreground' && <p>This data was received in foreground</p>}
                                    {notif.type==='action' && <p>This data was received on tap</p>}
                                </IonLabel>
                            </IonItem>
                        )}
                    </IonList>}
            </IonContent>
            <IonFooter>
                <IonToolbar>
                    <IonButton color="success" expand="full" onClick={register}>Register for Push</IonButton>
                </IonToolbar>
            </IonFooter>
        </IonPage >
    )
}

I tried logging the token on via 'console.log(token)' and the registration listeners never returned anything. Basically, I'm trying to handle the result of a successful/failed registration but those two listeners don't seem to be triggered.

I tried wrapping the 'registration' success and failure/error listeners with a new Promise((res, rej)=>{}) in order to resolve that promise returning the registration token or error. But it ends up returning undefined.

The part of requesting permissions is covered.

const subscribeToPush = async ()=>{
    var pushRegistration;
    try {
        // Show us the notification payload if the app is open on our device
        PushNotifications.addListener('pushNotificationReceived', (notification: PushNotificationSchema) => {
            console.log('notification in: ', notification)
            // setnotifications(notifications => [...notifications, { id: notification.id, title: notification.title, body: notification.body, type: 'foreground' }])
        });

        // Method called when tapping on a notification
        PushNotifications.addListener('pushNotificationActionPerformed', (notification: ActionPerformed) => {
            console.log('notification action: ', notification)
            // setnotifications(notifications => [...notifications, { id: notification.notification.data.id, title: notification.notification.data.title, body: notification.notification.data.body, type: 'action' }])
        });


        pushRegistration = new Promise((resolve, reject)=>{
            // On success, we should be able to receive notifications
            PushNotifications.addListener('registration', (token: Token) => {
                console.log('Push reg. Token: ', token);
                alert('Error on registration: ' + JSON.stringify(token));
                resolve(token); // call resolve with results.
            });

            // Some issue with our setup and push will not work
            PushNotifications.addListener('registrationError', (error: any) => {
                console.log('Error on registration: ', JSON.stringify(error));
                alert('Error on registration: ' + JSON.stringify(error));
                reject(error); // call resolve with results.
            });
        });
        console.log('pushRegistration', pushRegistration);
        // Register with Apple / Google to receive push via APNS/FCM
        PushNotifications.register();
    } catch (error: any) {
        console.log(error)
        pushRegistration = {success: false, msg: "Couldn't opt in.", msg2: "During push registration.", msg3: error.message};
    };

    return pushRegistration;
}

Then below is how I call this function:

subscribeToPush().then(registrationResult=>{
      console.log('registrationResult', registrationResult);
})