Setting up Firebase Push Notifications in an existing NativeScript Angular application

68 VIEWS

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:

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.

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.


iOS Turn On Push Notifications
This will create an entitlements file located in ‘/platforms/ios//.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:

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.


Generate APNs Authentication Key

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.


Push Notifications Configurable

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.


APNs Authentication Key Configuration

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.


iOS Developer Team ID


Uploading APNs Authentication Key Form

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):

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.


Android Push Notification


iOS Push Notification

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

Do you think you can beat this Sweet post?

If so, you may have what it takes to become a Sweetcode contributor... Learn More.

Carey Payette is a Senior Software Engineer with Trillium Innovations, as well as an ASPInsider and Progress Developer Expert. She has an interest in IoT and is a member of the Maker community. Carey is also a wife and mom to three fabulous boys. She has a 2nd degree black belt in TaeKwonDo and enjoys coding for fun!


Discussion

Click on a tab to select how you'd like to leave your comment

Leave a Comment

Your email address will not be published. Required fields are marked *

Menu