Over the past few months, we have been busy developing our own revolutionary product. My team and I decided to go with Meteor on this one as the intention is to develop a multi-platform application with real-time updates being a key factor. Along with Meteor, we chose to go with React JS for the template with Meteor for reactivity of data. Working on Meteor has been a great experience so far but every now and then we did hit a roadblock as there is very limited documentation on some of the functionalities – Push Notification being once such case. We had to spend a lot of working hours to decipher the problem and get it to work properly.
So, on this blog titled ‘How to enable push notification using Meteor JS, I’ll share a few important details as to how you can get the push notification to work using the Meteor JS platform. Let’s begin!
The first step towards implementing the push notification feature on Meteor JS is to obtain the Project Number and API Key from the firebase portal.
Use the following steps to get the required details:
1. Access the Firebase Developer Console.
2. Click on ‘create project’ and give it a suitable project name.
3. Once that is done, you’ll be able to see the Firebase Overview page. Now click on the ‘Project Setting’ link found on the top left (part of the hover settings).
4. Now click on ‘Cloud Messaging’ tab.
5. Write down your Sender ID (it should be all digits) and your Server key (has upper and lower case letters, numbers, underscores, and dashes).
Now Let’s Get Into The Coding Part
We have used “raix/push” for the push notification feature. The first step obviously is to install it. The installation process is as follows:
meteor add raix:push
meteor add cordova:cordova-plugin-device@1.1.5
meteor add cordova:phonegap-plugin-push@1.5.2
Now add Push.Configure as part of the client inside the Meteor Startup () block of main.js
Push.Configure({
android: {
senderID: xxxxxxxxxx,
alert: true,
badge: true,
sound: true,
vibrate: true,
clearNotifications: true
// icon: '',
// iconColor: ''
},
ios: {
alert: true,
badge: true,
sound: true
}
});
Additionally, you’ll have to include the mobile-config.js as well:
App.configurePlugin('phonegap-plugin-push', {
SENDER_ID: xxxxxxxxxxxxx
});
Once this part is done, add Push.Configure to the server inside Meteor.startup() block of main.js
Push.Configure({
gcm: {
projectNumber: xxxxxxxxxxx,
apiKey: 'xxxxxxxxxxx'
}
});
Now Try Sending The Push Notification:
The following code has to be included for the push notification to work efficiently:
Push.send({
from: 'push',
title: 'Push Notification',
text: 'Push Notification text',
badge: 1, //optional, use it to set badge count of the receiver when the app is in background.
query: {
// Ex. send to a specific user if using accounts:
userId: 'xxxxxxxxx'
} // Query the appCollection
// token: appId or token eg. "{ apn: token }"
// tokens: array of appId's or tokens
// payload: user data
// delayUntil: Date
});
We have completed the coding part and now we can test the push notification. The push notification feature will only work on mobile devices, so connect your Android phone (to get push notifications to work on ios refer this link) and input the following command in the terminal:
Meteor run Android-device
That’s it, your push notification feature should start working. Feel free to get in touch with me on Twitter if you run into any difficulties. Do share your thoughts in the comments section as well. Happy Coding!!
