Hexagon Geospatial
MENU

Developers Knowledge Base

Mobile and field solutions function as an extension of the overall enterprise, and include the ability to access, create, review and update geospatial data and asset information in real-time in the field.
Showing results for 
Search instead for 
Do you mean 

Push notification guide

by Technical Evangelist on ‎03-02-2017 12:46 AM - edited on ‎09-07-2017 03:42 AM by Technical Evangelist (984 Views)

This is a step by step tutorial of how to add push notification in the apps, built based on the MMW templates. It consists of the follwing parts:

  1. Overview
  2. Firebase cloud messaging configuration
  3. Android installation
  4. iOS installation
  5. App configuration
  6. Test
  7. Next steps

Overview

 In case you don't know what's the push notification is: https://en.wikipedia.org/wiki/Push_Notification

 

System architecture

In the app there is a phonegap-plugin-push which enables the app to communicate with the platforms' notification services.

Each platform (iOS, Android, Windows) provides a push notification service (APNS, FCM, WNS) which push messages to the device and receive information about how the pushed message was handled.

It is possible to communicate with each platform notification service directly, but there exist platforms which enable to send push notifications to a set of different platforms at once. The platform used here is called Firebase.

There are many alternative solutions. By accomplishing the tutorial you will familiarize yourself with the key concepts and the decision to choose different pltform will be easier.

Overview

 

How the push notification is handled on the device

Send a push notification to a single device or topic.

  • 1.a Application is in foreground:
    • The notification data is received in the JavaScript callback without notification bar message (this is the normal behaviour of mobile push notifications).
  • 1.b Application is in background or closed:
    • The device displays the notification message in the device notification bar.
    • If the user taps the notification, the application comes to foreground and the notification data is received in the JavaScript callback.
    • If the user does not tap the notification but opens the application, nothing happens until the notification is tapped.

Firebase cloud messaging configuration

First you need to setup a project for your app in the Firebase console

 

1. Login to the Firebase console

    It might be necessary to create a Google account first

2. Create a new project for your app

 

fcm1.png

 

3. Go to the project settings -> cloud messaging and remember that Server key and Sender ID are here

 

 fcm2.png

 

fcm3.png

 

Android installation

In order to make push notifications work with an Android device you need to do two things:

1. Make sure that your dev environment is setup. Take a closer look at the SDK Packages:

  • Android Support Repository version 43 or greater
  • Google Play Services version 38 or greater
  • Google Repository version 43 or greater

2. Configure your Android App in the Firebase console 

Go to Project -> Settings -> General Pick Add Firebase to your Android app

 

firebase6.png

 

When registering an app the package name is the app id which you used when creating your project in the Mobile SDK.

You don't need to provide any more information and just accept all the steps till the end of the wizard.

 

fcm5.png

 

After registering an app, download google-services.json file and move it to folder build\mobile\platforms\android\ inside your created project; google-services.json can be downloaded either from second screen on "Add Firebase to your Android app" wizard, or from app tab in Firebase console -> Settings -> General:

dl-google-services-json-1.png

dl-google-services-json-2.png

 

 

IOS installation

In order to make push notifications work with an Android device you need to do four things:

1. Make sure that your dev environment is setup e.g. Cocoa pods

2. Provision APNs SSL Certificates for your app

There are many guides avaialble, e.g https://firebase.google.com/docs/cloud-messaging/ios/certs

3. Configure your iOS App in the Firebase console 

Go to Project -> Settings -> General Pick Add Firebase to your iOS app

 

firebase6.png

 

When registering an app the package name is the app id which you will use when creating your project in the Mobile SDK.

You don't need to provide any more information and just accept all the steps till the end of the wizard.

 

fcm7.png

 

4. Upload the certificates form step one to the Firebase console.

Go to Project Settings -> Cloud Messaging -> Pick your app and upload the certificates

 

fcm8.png

 

App configuration

You will need the SenderId, which you can find in the Firebase console -> Settings -> Cloud Messaging

There are two steps:

1. Add push notification plugin to the app

At this point you should have a created project and at least one platform added. Run the command in your project directory:

 

grunt addpushnotification --senderId=[SenderId]

 

2. Register push notification in the app

Copy the file RegisterPushNotification.js to your project's src directory.

Replace the senderId placeholders with the correct value

Reference the file in index.html

 

Test

You are ready to test, if the push notification is working in your app !!!

1.Connect a device, build and run the app:

e.g.

 

grunt runandroid

 

2.Send a push notification

Go to Notifications -> Fill message text, pick app and send.

 

fcm10.png

 

fcm11.png

 

If your app is not running you should see a notification on your home/lock screen.

If your app is running you should see an alert box.

 

Next steps

It was only a starting point. If you wish to continue, there is a couple of useful links:

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

Message payload: https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/PAYLOAD.md

Firebase Cloud Messaging: https://firebase.google.com/docs/cloud-messaging/

Simple Node push notifications sender: https://github.com/ToothlessGear/node-gcm

 

 

 

Overview
Contributors