Configuration and preparation of the iOS environment

Assuming you already got a paid developer account, go ahead and login to your Apple Developer account. Once logged in, you will be re-directed to the Apple Developer homepage. From there, you should see "Account" at the top navigation bar. Click that option.

Now you should be within your Apple Developer account.

Now look to the left side bar. The third row should say "Certificates, IDs & Profiles" Select that option.

Now that you are in the "Certificates, Identifiers & Profiles" page, look to left side bar and there should be a section called "Identifiers". Under that section, there is a link that says "App IDs" Press that.

You should see all your iOS App IDs.

Now at the top right, you should see a + button. Press that. After that, you should be at this stage:

We now need to fill out the followings:

  • App ID Description — Name. Here, you should put your app’s name (e.g. GoClixy - Online Business Directory)
  • App ID Suffix — Explicit App ID — Bundle ID. Here, you need to select a unique bundle identifier for your app (e.g. com.goclixy.app). Please make sure you use your own bundle ID specified in the config.xml file.

Then under App Services, tick "Push Notifications" Press continue.

After that, you will be redirected to a "Confirm your App ID" page. Press register.

Now we are back to our "iOS App IDs" page. Look for the App ID you just created. Press on it and you should see a a drop down of Application Services.
Scroll down until you reach the end of the drop down and you should see an "Edit" button. Press that.

The "iOS App ID Settings" page will show up, scroll all the way down until you see "Push Notifications".

It is time for us to create a "Client SSL Certificate" This will allow our notification server (Firebase) to connect to the Apple Push Notification Service. Under Development SSL Certificate, press on the "Create Certificate…" button.

Now we will see this.

To generate a certificate, we would need a Certificate Signing Request (CSR) file from our Mac. We will get back to this page later, but now we need the CSR file.
Generating a CSR file

To generate a CSR file, press cmd + space and do a spotlight search for "Keychain Access". Open Keychain Access, and go up to the menu to select Keychain Access > Certificate Assistant > Request a Certificate From a Certificate Authority…

A "Certificate Assistant" pop up should appear.

Fill in your email address and name. Choose "Saved to disk" and press Continue. Then save your CSR somewhere on your hard drive.

Uploading Your CSR File

Now that we have our CSR generated, it is ready to go back to the "Add iOS Certificate" page.

Scroll down. Press continue, and then click on the "Choose file…" button. Select the CSR file you just saved on your hard drive. Next, click continue again. Then the web page should say "Your certificate is ready"

Now you can go ahead and click on the blue download button to download your certificate.

Preparing the APNs Certificate

Now that you have created the iOS certificate, you will need to prepare the APNs (short for Apple Push Notifications) certificate, which will be used later in the Firebase configuration. Open up Finder and locate the certificate you downloaded earlier.

Double click the certificate file (e.g. aps_development.cer) to add the certificate into Keychain Access.

Now open up Keychain Access. Under the "My Certificates" category, you should see the certificate you just added. Click the expand arrow to the left of the certificate’s name to reveal the private key option. Right click on the private key and press export.

Once clicking Export, a pop up will prompt you to save your private key as a .p12 file. Go ahead and click save.

Then enter a password if you want to protect your exported certificate. Click OK to confirm.

Finally! We just completed the configuration and preparation for iOS. Now we are ready to move onto Firebase! Let’s get started.

Configuring Firebase for Push Notifications

First, head over to Firebase console. Sign in with your Google account to enter the console. If you don’t know how to switch to the console, there is a button at the very top right that says "Go to console".

Once you are at the console, click on the "Create New Project" button.

I name my project as "Firebase Notification Demo" but you’re free to use whatever the name you want. Simply click the "Create New Project" button to proceed.

After that, you are redirected to the project overview page. Now click the "Add Firebase to your iOS" button. Enter your iOS bundle ID, you can find it in beginning the config.xml file of your Mobile application.

Then click the "ADD APP" button.

Follow the on-screen instruction to download the GoogleInfo.plist file. We are going to need this file later.

Click "CONTINUE" to go to the next step. You will see instructions showing you how to add the Firebase SDK into our project. Since GoClixy Mobile App is not a native application, so we don't have to follow this step. Just ignore and click "Continue" to proceed. Finally click "Finish" to complete the configuration. You should then see your iOS app in the Firebase overview page.

For the Android you will click "Add Firebase to your Android" and follow the exact same steps, but instead of downloading the GoogleInfo.plist file you will download the google-services.json file.

Now, back to the iOS part, we need to add the APNs certificate that we create for the Push Notifications. Look for the setting icon at the top right. Click the Settings icon > Settings.

Select the Cloud Messaging tab.

Scroll down, and click the "Upload" button.

Then a pop should appear to ask you for your Production APNs certificate.

Click browse and choose your APNs certificate (i.e. .p12 file) that you prepared in the earlier section. If you configured the file with a password, enter certificate password, followed by clicking the Upload button.

Now you should see a Production APNs certificate file in the Cloud Messaging setting.

You can find more details about how to use the plugin in the project Github page:

https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/INSTALLATION.md

Awesome! We finally finish all the configurations. Let's do the configuration in our Mobile app.

Get your Firebase configuration files, GoogleService-Info.plist for ios and google-services.json for android, and place them in the root and platforms folder of your Mobile App project:

Copy the Server Key under the Cloud Messaging tab.

Login to your GoClixy Website Admin Panel, go to Settings->Mobile and click the Settings tab in the top right corner. Paste the copied Server Key in to the API Access Key input field and click the Save button.

That's it. You should be able to send Push Notifications to your registered mobile users.