Setting up Firebase Push Notifications in an existing NativeScript Angular application

When researching the implementation of Firebase Push Notifications, I came across many articles and snippets that were pretty dated or contained a lot of extraneous information. I felt it warranted to write a quick and simple, right-to-the-point article.

Adding the NativeScript Firebase Plugin

This step is a pretty simple one. If you have not already done so in your application, add the nativescript firebase plugin by executing the following command:

tns plugin add nativescript-push-notifications

Also ensure that you have the plugin setup in your project as specified on the plugin GitHub page.

Cloud messaging setup

Verify in your project root folder that the file ‘firebase.nativescript.json’ that the messaging property is set to true.

...
"messaging": true,
...

Setting up iOS for messaging

With Firebase being a Google offering, they made it very painless to incorporate messaging for Android – we’ve already done everything that we needed to do to get it to run there. We will have to perform additional steps for iOS.

Enable push notifications in Xcode

Using Xcode, in the ‘/platforms/ios/’ folder, open your ‘*.xcworkspace’ file. Select the project in the left hand treeview, them select the ‘Capabilities’ tab. Scroll down until you find ‘Push Notifications’, and toggle it to the ‘On’ position.

This will create an entitlements file located in ‘/platforms/ios/<project>/<project.entitlements’ – this file will need to be copied (or merged) to ‘/App_Resources/iOS/<project>.entitlements’. This will allow the entitlements to be copied over every time you remove and re-add the iOS platform.

Enable background notifications

In order to be able to receive notifications when the app is closed, you’ll need to enable background notifications. Open ‘/App_Resources/iOS/Info.plist’ and add this key:

<key>UIBackgroundModes</key>
<array>
  <string>remote-notification</string>
</array>

Generate an APNS authentication key

Go to ‘https://developer.apple.com’ and log in with your Apple developer account. Select ‘Certificates, Identifiers & Profiles’. Then, on the left hand menu, select ‘All’ underneath the ‘Keys’ section and click the ‘+’ button to add a key. Give the key a description, ensure you check the APNs checkbox, then click the ‘Continue’ button, then the ‘Confirm’ button to generate the key. Finally, download the key, we will be using it momentarily.

Verify your application has Push Notifications as configurable

In the Apple developer site, select your App ID and ensure that Push Notifications are set to ‘Configurable’. If it’s not, simply edit the form, and check the ‘Push Notifications’ checkbox.

If you’ve made a change, you will need to re-generate your development provisioning profile.

Add iOS Authentication key to Firebase

Log into your Firebase console, and next to ‘Project Overview’ click the cog button and select ‘Project Settings’. Select the ‘Cloud Messaging’ tab, then scroll down to the iOS app configuration section, and click the ‘Upload’ button.

You will now be presented with a form, upload the APNs authentication key that you generated earlier. Enter a 10 character Key ID (these 10 characters are the suffix to the key file that you downloaded) – and fill out your Team ID – this is located in the Apple Developer Console under Membership.

Add notification handling code

Open ‘/src/app/app.component.ts’ and in your ngOnInit handler within the firebase.init call, add the following code (firebase.init method included here for clarity):

firebase.init({
    showNotifications: true,
    showNotificationsWhenInForeground: true
  });

Send a test notification

Ensure you have your application running on actual device(s). I was only able to receive them when the apps were running on the device, disconnected from any computer.

In your firebase console, in the left hand menu, in the ‘Grow’ section – select ‘Cloud Messaging’. You can then author a message, select which app(s) to send the message to, and finally review the message prior to publishing.

• 

• 

• 

Once published, you will receive notifications on the devices you’ve selected.

That’s all there is to it, hopefully this will help someone cut to the chase and implement Push Notifications in their NativeScript application.