Assume, an app is used to share tasks across users in a team. A user is assigned a task which has to be completed by 5:00PM. Right now, the time is 4:30 PM and task is not completed. App wants to send an auto-reminder to the user about the task. But, app is not opened on user’s mobile device. So, app has to use third party services to send sms or email. In addition to these notification channels, a mobile operating system also provides a Push notification service. Using this service an app can send messages to the user even when the app is not in foreground.
Operating system maintains an http service to which all notifications have to be posted. This service acts as a post office. Each mobile app has to register with this service and should obtain a registration id. If any notification addressed to the registration id is received, then service will simply forward them to respective mobile device. Registration id is unique for each app on device. In iOS, this service is called Apple Push Notification service (APNS). In Android, this service is called Firebase Messaging Service.
- Mobile App registers for device notifications and gets registration token. This token functions as the address to send a push notification to.
- Backend server registers with APN server (iOS) and FCM server (Android) by submitting credentials.
- After receiving token, mobile app sends the token to backend server.
- Backend server stores it in the database for later use.
- When Backend wants to send a push notification to users, Backend retrieves the stored registration tokens of devices of those users.
- Then, a push notification request is sent to the corresponding user devices (identified with registration tokens) via FCM / APNS.
- FCM/ APNS will send push notification to all the devices which have this app installed.
A Cordova plugin called phonegap-plugin-push can be used by the app to create a message to be broadcast to all logged-in users.
For registration, app and backend server have to provide some information to push notification service so that they can be verified. These credentials have to be obtained first.
NOTE: In a WaveMaker application, ‘Application Id’ in ‘Build for Android’ dialog is used as the App Id.
Follow below steps to achieve the Android prerequisites:
- An app for Android should have google-services.json that has all information required for registering with Firebase messaging service. Follow below steps to obtain it:
- Open Firebase console. Create a new project to register for notifications.
- Select the created project and click the setting icon at the top and choose Project Settings.
- From settings, go to the general app and click ‘Add Firebase to your Android App’.
- A form appears to register your app. Application id that is mentioned in ‘export cordova dialog’ of your WaveMaker project has to be entered as Android package name in this form. Click Next.
- Download google-services.json and click next.
- Firebase also provides another JSON file that is required by the backend to push messages. This JSON is called the service JSON.
- Open Firebase console. Open your app that was created above.
- Select your project and click the setting icon at the top and choose Project Settings.
- In Firebase Console, go to settings and open ‘Service Accounts’ tab.
- A button with label Generate new private key is located the bottom of page. A JSON file is downloaded after clicking this button. Rename this file as FCM-admin-service-key.json.
Steps to configure iOS app in developer portal:
- App ID configured for Push Notifications on Apple Developer Portal has to be created first.
- Log in on Apple’s Developer Center.
- Select the Account tab to go to Certificates, Identifiers & Profiles.
- If you have not already created an App ID, create it now and make sure push notifications is enabled. Or edit your existing App ID and enable them. (NOTE: Wildcard (ending with an asterisk) app id is not allowed to use push notification service)
- Backend server requires to provide an APNS certificate to connect APNS.
- Edit the app id created above and open push notification section.
- Click Create Certificate and follow the instructions.
- When prompted upload the CSR file and continue. Download and install the certificates on your Mac. If the certificate is already created, a download option is shown.
- In Mac, open Keychain Access, click login and drag-drop the downloaded certificate.
- Navigate to the certificate you want to use for your push notifications. Right-click and export it as a P12 certificate. Use as name apns-dev-cert.p12 (in case of the development certificate). In this demo app, this certificate is named as Certificates.p12. When prompted enter a password to protect the file and note it for future use.
- Edit the app id created above and open push notification section.
- A provisioning profile has to be created for the app id created above:
- From File Explorer open pom.xml and add firebase-admin and javapns-jdk16 as dependencies as shown below:
- Import Resource: Import the following resources to the respective folders:
- Create a DB named DeviceDetails, which will store all the deviceIds, username and device type i.e. OS (Android or iOS). Mark these columns as unique.
- Turn on security. Here we are setting it to Demo.
- Create a Java Service named PushService. This service will contain registerDevice, unregisterDevice and notify methods.
- RegisterDevice will create a new record of the registered device details (deviceId, os, userName) in the db.
- UnregisterDevice will delete the device details record in db.
- Notify will request the GCM/APNS to broadcast the messages to the registered devices.
To obtain the above-specified functionality, download Java code file and include the Java code in this service file.
NOTE: Replace packageName, imports specific to the app, senderId, apiKey, iosCertificateName, iosCertificateKey (password for iosCertificate) values in above code.
- Create a service variable named RegisterPush to register the device to receive push notifications.
- On every successful login, register the device for receiving the push notification. For this, open the Actions dialog and select the pre-defined loginAction.
- If user is already logged-in, then enable push.
- Initialize the plugin to get the deviceId, and start listening to all the events when notification is received. Store the device Id in DB that we receive on successful registration event.
- Download the complete code snippet from here and use it in the app.js file.
- On the Main page, drag and drop a text widget and button as shown below.
- Create a service variable named sendNotification which will call notify method of PushService
- On Send button tap, invoke the sendNotification service variable created above.Enter the text and click on button, push message will be delivered to the devices.
- Create a service variable named UnregisterPush which will call unregisterDevice method of PushService
- Add an anchor in mobile navbar, on tap of this link invoke UnregisterPush service variable.
- Add a custom plugin in ‘Build for Android’ dialog
- Mention ‘git’ as source, ‘phonegap-plugin-push’ as plugin name and ‘https://github.com/wavemaker/phonegap-plugin-push.git#5817a63’ as spec. Then, click ‘Add’ button and ‘Save’ button.
- The plugin that is mentioned above uses ‘hook’ concept of Cordova for Android build. But, Hooks are not supported in build.phonegap.com. So, Android builds fail when this plugin is added in build.phonegap.com. But, Android app can be built using the using Build For Android menu option inside WaveMaker studio or through a manual build.
- iOS app can be created either through a manual build or through build.phonegap.com. Please make sure that provision profile that is created above (with app id that has push notifications enabled) should be used
- Build and test the app. Login in one device with user/user credentials. Login to another device with admin/admin credentials. If user sends a message, the other user should get a push notification.
Our aim is to show how this plugin can be integrated into WaveMaker and how to create push notifications. This integration logic can be used at various places as per your use-case. For complete features of the plugin, please visit the plugin site.