Firebase Push Notifications In Ionic Pro For iOS Devices

As there is no support of push notifications in Ionic Pro so far, it’s a big pain for developers to handle push notifications in Ionic Pro.

Prerequisites

You must have your development and distribution p12 files for push notifications. You can follow the tutorial for generating those files.

https://support.clevertap.com/docs/ios/how-to-create-an-ios-apns-certificate.html

Firebase Set Up

https://console.firebase.google.com/

Click on "Add Project", give any name to project, and click on "Create Project". The following window will appear. Click on "Add Firebase to your iOS app".

A window will appear. You need to add your bundle id there. Please note that this bundle id should match the app id that you created while generating the development and distribution certificates.

ionic

Now, click on "Register App". Next, it will ask you to download the GoogleService-Info.plist . Download this file and click on Continue until the end.

Now, navigate to "Project Settings".

ionic

Click on "Cloud Messaging" tab.

ionic

Here, you have to upload your development and production p12 files.

ionic

Now, Firebase set up is done.

Ionic Project Setup

Create a new blank Ionic project. Open your config.xml file, add the same bundle id that you entered for App ID and in firebase project.

Next, place the downloaded GoogleService-Info.plist file in the root of your folder. Run the following commands in terminal.

$ ionic cordova plugin add cordova-plugin-fcm
$ npm install --save @ionic-native/fcm

Open App module and import the FCM module, then write the imported module in providers as well.

import { FCM } from '@ionic-native/fcm';

Open app component and add the following code.

import {
FCM
} from '@ionic-native/fcm';
constructor(private fcm: FCM) {
fcm.getToken().then(token => {
console.log(token);
})
fcm.onTokenRefresh().subscribe(token => {
console.log(token);
})
fcm.onNotification().subscribe(data => {
if (data.wasTapped) {
console.log("Received in background");
} else {
console.log("Received in foreground");
};
})
}

Run the following command,

Ionic cordova add platform ios

This command will generate iOS folder under the platform folder. Now, navigate to the following folders.

ios\MyApp\Resources
ios\MyApp\Resources\Resources

Check the content of GoogleServices-Info.plist file if any of them is empty, copy and replace the downloaded file there.

Next, open the MyAppInfo.plist file present in \ios\MyApp

Add the following lines to it.

<FireBaseProxyEnabled>Yes</FireBaseProxyEnable>

Now, open the XCode Project file in Xcode. Navigate to the General tab and choose your push development and distribution profiles for signing in to Debug and Release mode.

Next, navigate to Capabilities mode and on the Push Notifications, enable Keychain sharing and remote notifications in Xcode.

Now, build your project in XCode.

Then, try to run the app in phone. Push notification will not work in the simulator. Send any message from Firebase console.

Click on "Notifications".

ionic

Click on "Send your first message".

Type your message, select you app, and click on "Send Message" button.

ionic

Now, you should be able to see any console message of receiving the notifications.

Please note that setting up the certificates is the most important part. If certificates are not set up correctly, push notifications will not work.