Skip to content

Instantly share code, notes, and snippets.

@enappd
Last active Sep 20, 2022
Embed
What would you like to do?
Ionic React Capacitor Push Example - Push functions
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 >
)
}
@LuthandoMaqondo
Copy link

LuthandoMaqondo commented Sep 20, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment