You should ideally open the project in Android Studio and run using the Android Studio IDE. Open the project in Android Studio using

$ npx cap open android

Now run the app in your device using Android Studio, and you get this ! (Sample from my One Plus 6T, Android P)

Note: After adding a platform, if you make any changes in the app, you need to run ionic build and then npx cap sync to reflect those changes in the native platform

Test — Android

In the following test clip, you can see

• Device registers automatically and gives token (You can register on button click as well)
• First push comes in foreground, hence the data is directly received (no notification in bar) — pushNotificationReceived. This is also called silent push
  Because this doesn’t feel like a ‘real’ push, you can use Local Notification API of Capacitor to generate a notification for UX when push is received in foregroud
• Second push comes when app is minimized. On tap, the data is received in the app — pushNotificationActionPerformed

(If the GIF feels too fast) For clarification, following is the screenshot after two pushes arrive

Step 5- Sending push from Firebase console

To receive a push notification in the app, you will have to …. of course … send a notification first. You can do this from your server as well, but Firebase is easier.

We have a detailed tutorial on how to send Notifications using Firebase console

To send a notification, we can use Firebase console → Cloud messaging section.

• Notification Title — This is the title that shows up in the push message in Android devices. iOS does not show this title on push messages
• Notification Text — This is the main body of the message. This is the text content that users see in the push notification

Enter both these info. Now, you have two choice

A. You can send a simple push notification, OR

B. You can send a test push notification using your registration token

Method B is very useful when you have a live app, and you don’t want your test push to go to every user. I’ll use this method to stick to development guidelines.

Sending test push notification — Method B

Click Send Test Message in the notification section. You will be presented with the following popup

You need to find out your device’s device_token (which you received after registering the device on FCM) and enter that here. Click Send to send a test push notification to ONLY your device. So handy, right?

Case 1. Receive a push in Open app (in foreground)

In open app, you’ll receive the push without any notification in the notification tray. I have the notification data attached with the list, so the new notification will show up in the list, but you can always attach an alert or Local Notification in the pushNotificationReceived listener

I sent three push back to back, just in case you miss one. The data format received in foreground app is like this

{
"id":"0:1569331101047632%008d0b4c008d0b4c",
"data":{
"body":"This is my second push",
"title":"Test Push"
},
"title":"Test Push",
"body":"This is my third push"
}

Case 2. Receive a push in Background app (in background)

In minimized (background) app, you’ll receive the push with a notification in the notification tray. Once you tap the notification, the app with open, and the pushNotificationActionPerformed listener will be called. You can receive the data from this listener

The data format received in background app is like this

{
"actionId":"tap",
"notification":{
"id":"0:1628974753138149%3af2b6863af2b686",
"data":{
"google.delivered_priority":"high",
"google.sent_time":"1628974753129",
"google.ttl":"2419200",
"google.original_priority":"high",
"body":"This is me",
"from":"694030513078",
"title":"Helllo World",
"collapse_key":"com.enappd.ionreactfullapp"
}
}

You can see here that you can access the title , body parameters inside the data field of the payload. This data field can be populated in Firebase console using Additional Options Section

Case 3. Receive a push in closed/killed app

In a closed app, you’ll receive the push with a notification in the notification tray. Once you tap the notification, the app with open and the same data as Case 2 will be received in the app. The input of the push from Firebase console will also has to be same as Case 2. 

🎉🎉🎉 Congrats ! You just implemented Push notification functionality in Android using Capacitor Ionic React App !

///// iOS PUSH /////

To implement push notification in iOS, you’ll need following 

• An apple developer paid account, where you can generate a push certificate
• A Macbook with Xcode
• iPhone device. Push will not work on Simulator

Without the above, you won’t be able to implement push notification on iOS (sadly). iOS eco-system is very strict. 

Step 1 — Apple/iOS project settings

To be able to generate a push certificate for iOS app, you need a paid Apple developer account ($99/year). You can get more details onApple’s website.

Push certificate

Once you purchase the developer membership, you can generate a new Push Certificate by logging into your Apple developer account. Without going in too much detail, follow these steps

• In Apple Developer HomePage, click Certificates, Identifiers and Profiles
• Click the ‘ + ‘ button to create a new Push Certificate
• Select Apple Push Notification service SSL (Sandbox) option if you are creating for dev purpose, OR Apple Push Notification service SSL (Sandbox & Production) if you are creating for production purpose
• Next, select the app Bundle ID you are creating the certificate for. If your app’s bundle ID (com.xx.xxxxx) is not registered with Apple yet, you can register it from the Identifiers tab in the Certificates, Identifiers & Profiles page
• Once app ID is selected, upload a Certificate Signing Request (CSR) from your mac. If you don’t have one, you can generate it from Keychain. Check instructions here.
• Once CSR is uploaded, generate the push certificate. Download it on your system and double click to install it in the Keychain
• Open Keychain and look for the certificate. Expand the item and select the attached P12 file. Export it to a safe location, and give a password for it when asked.

Firebase Project settings

• Now open your Firebase project. Go to Project Settings. Create a new iOS app (if you haven’t already) with the same bundle ID as the one you used for Push Certificate (and same as the app you are building).
• Download the GoogleService-Info.plist from the iOS app. This will be used in next section
• In Firebase console Project Settings → Cloud Messaging tab, select the iOS app you just generate. Upload the push key/certificate you generated in the given inputs. Make sure you upload the dev and push certificate in their corresponding inputs. 

If you are using your own server to send push, you will have to include the .p12 or .pem file exported from your certificate to send the notifications.

Step 2 — Prepare app for iOS

iOS app platform

Install iOS platform with

$ npm install @capacitor/ios
$ npx cap add ios

You can sync the existing installed plugins and web assets using

$ npx cap sync ios

This will update the corresponding pods for iOS project.

Enable Push capability

Open the project in Xcode using

$ npx cap open ios

Click on App in left menu → Signing & Capabilities , select your development Team , keep Automatically Manage Signing checked. 

Add Capability by clicking the ‘ + ‘ icon, select Push . Push notification capability will be added to your app

Add Firebase SDK for Push

We need to add Firebase to the Podfile, which can be found in Xcode under Pods or find it in your Ionic project under ios/App

Add pod ‘Firebase/Messaging’ in the Podfile along with other existing pods.

Run pod install in ios/App directory, OR just run npx cap update ios from root directory. This will install the required Firebase pods.

Xcode Capacitor Push API changes

• After enabling the Push Notifications capability, add the following to your app’s AppDelegate.swift:

func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
Messaging.messaging().apnsToken = deviceToken
Messaging.messaging().token(completion: { (token, error) in
if let error = error {
NotificationCenter.default.post(name: .capacitorDidFailToRegisterForRemoteNotifications, object: error)
} else if let token = token {
NotificationCenter.default.post(name: .capacitorDidRegisterForRemoteNotifications, object: token)
}
})
}

func application(_ application: UIApplication, didFailToRegisterForRemoteNotificationsWithError error: Error) {
NotificationCenter.default.post(name: .capacitorDidFailToRegisterForRemoteNotifications, object: error)
}

• In your iOS project, add GoogleService-Info.plist to ios/App/App 

Xcode initialize Firebase

To connect to Firebase when your iOS app starts up, add an import at the top of the AppDelegate.swift file and FirebaseApp.configure()in the application(didFinishLaunchingWithOptions) method.

import Firebase

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after application launch.
FirebaseApp.configure()
return true
}

Step 3 — Build and Test iOS app

Make sure you include all app changes in the iOS build by running

$ ionic build
$ npx cap sync ios

Build the app on physical device (iPhone), and test. It should ask you for permission at first. Then it should proceed pretty similar to Android.

Once again, you have foreground, background and killed app pushes. All data comes in the same format as explained in Android section — Step 5

🎉🎉🎉 Congrats ! You just implemented Push notification functionality in iOS using Capacitor Ionic React App !

Conclusion

In this post, you learnt how to implement Push notification functionality in your Ionic React apps using Capacitor. We used Firebase to send and receive push in the apps.

We tested the functionality on Android and iOS device.

We also tested push in each of open, minimized and closed app case.

Happy coding !