IBM Z Day on Nov. 21: Discover the ideal environment for modern, mission-critical workloads. Learn more

Add push notifications to your hybrid mobile apps

Note: This pattern is part of a composite pattern. These are code patterns that can be stand-alone applications or might be a continuation of another code pattern. This composite pattern consists of:

Summary

In this code pattern, you learn how to add push notifications to a hybrid mobile app using the IBM Mobile Foundation APIs.

Description

Push notifications are integral part of mobile applications. For companies to advertise their latest offerings, or for financial institutions to alert customers on transactions, or for stores to notify customers on any important announcements, push notifications come in handy. Push notifications can be used for real-time information like weather updates or travel related updates. If the customer installed a mobile application and subscribed to notifications, then it is the quickest and easiest way for businesses to convey a message to end user and request them to take action if needed. Push notifications originate from the server and based on the devices, different services are used to deliver the notifications.

IBM Mobile Foundation provides a unified set of API methods to send either push or SMS notifications to iOS, Android, Windows applications. The unified notification mechanism makes the entire process of communicating with the users and devices completely transparent to the developer.

In this code pattern, we are going to use the base code pattern, “Develop a hybrid mobile app with a cloud native backend,” and add a push notification feature to it. Users can select an area in a Google map, and then subscribe to receive notifications on problems reported in that area. When any user submits a problem in that area, a notification is sent to all the users who have subscribed for the same.

After you complete this code pattern, you will understand:

  • How to create tag-based push notifications with IBM Mobile Foundation
  • How to create push notification tags on the IBM Mobile Foundation server with its REST API
  • How to send notifications with IBM Mobile Foundation REST APIs.
  • How to use Cloudant geospatial index queries to find a set of locations within a specified radius of the user’s location.

Flow

Architecture diagram for tag-based push notifications

  1. The user launches mobile app, and then either enters their credentials on the login screen or chooses a social login. The home page of the app shows the grievances that were reported within a radius of 1000m of user’s current location. The user opens the Watch Area page, selects a location in the map, and clicks Receive notifications.
  2. The Push Notification Subscription API is invoked with the tag name that is the same as the area name that the user chose. On the IBM Mobile Foundation server, the tag is created (if it doesn’t already exist), and the application subscription for the tag is completed.
  3. A different user launches the mobile app, enters their credentials on the login screen or chooses a social login. On the home page, the user clicks the + button to report a new civic problem. After the user specifies a description and captures an image and geo-location for the problem spot, the user clicks the Submit button.
  4. The resource adapter is invoked.
  5. The mobile app uploads the textual data to Cloudant NoSQL DB.
  6. The mobile app creates a thumbnail image by resizing the captured image and uploads both images to Cloud Object Storage.
  7. The updated list of issues is shown on the mobile app home page.
  8. When a new issue is submitted by the second user, a call to the Push Adapter is made to send a notification to all users who subscribed to notifications for issues reported for that area.
  9. The Push Adapter sends the notification to Apple Push Notification service or Google Cloud Messaging.
  10. The Apple Push Notification service or Google Cloud Messaging sends the notification to all the tag-based notification subscribers.

Instructions

Please see detailed instructions in the README.

Devipriya Selvarajan
Balaji Kadambi