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