Push Notifications
Setting up firebase
Get the package details from your application
Get the package name from the cordova config.xml
for example <widget android-packageName="com.thermomix.comapp" id="com.thermomix.comapp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">
So in this case "com.thermomix.comapp"
Setup a new project in firebase
https://firebase.google.com/docs/android/setup
Create apps for ios, android and web as required
Update your application
Add the following plugin into the config.xml in the App folder
<plugin name="cordova-plugin-firebase-messaging" spec="~4.3.1">
<variable name="FIREBASE_MESSAGING_VERSION" value="20.1.+" />
<variable name="ANDROIDX_CORE_VERSION" value="1.0.+" />
</plugin>
Get the firebase config files
See https://support.google.com/firebase/answer/7015592?hl=en#zippy=%2Cin-this-article for more info but basically
Edit the config.xml in the App folder
within platform name = andriod
<resource-file src="google-services.json" target="app/google-services.json" />
within platform name = ios
<resource-file src="GoogleService-Info.plist" />
Download the 2 config files from the firebase application and copy then into the App folder containing the cordova config
Get a copy of firebase-messaging-sw.js and copy it into the UI/public folder
Pull in the required javascript files
Update the htmlservice config to include
"EndHeadScripts": [
{
"type" : "text/javascript",
"src" : "https://www.gstatic.com/firebasejs/7.14.0/firebase-app.js"
},
{
"type" : "text/javascript",
"src": "https://www.gstatic.com/firebasejs/7.14.0/firebase-messaging.js"
}
],
Add a UI handler for the messaging
Find an existing example in devops
UI/PushNotifications
Alter the PushRegister.js file to include the correct firebase config from the web application (see THE-COM-MAP for an example), this will be used to get a key in web mode and allow for quick testing of your backend
Add a settings page to your app
UI/PushSettings
This will allow you to test the token refresh process in a webapp, and quickly confirm that all looks ok
{\n\t\"c\": {\n\t\t\"t\": \"UI/PushSettings\",\n\t\t\"d\": {},\n\t\t\"i\": 2\n\t},\n\t\"i\": 3\n}
First Test Time To Get The Client Key
If all goes well, you should now be able to get a key in PushNotifications.js
see section
.then((currentToken)
You should get some data looking like this, the key can then be used in your backend to send notifications to the web app
notificationKey
xxxxxxxxxxxxxxxxx:yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy-zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
notificationKeyType
web
Backend Authentication
Create a service account via https://console.cloud.google.com/projectselector2/iam-admin/serviceaccounts?supportedpurview=project
Choose the application
Click on the service account (will initial say no keys under key id)
Click on keys
Create a new key (export as json) and copy the contents into the mwa core config -> messaging
The key should look something like
{
"type": "service_account",
"project_id": "com-theintelligence-app",
"private_key_id": "31dc7cc70581a64dd2fdcb8df2d6179b018a9698",
"private_key": "-----BEGIN PRIVATE KEY-----xxxxxxxxxxxxxxxxxxxx\n-----END PRIVATE KEY-----\n",
"client_email": "firebase-adminsdk-jgnr7@com-theintelligence-app.iam.gserviceaccount.com",
"client_id": "108818059171631247824",
"auth_uri": "https://accounts.google.com/o/oauth2/auth",
"token_uri": "https://oauth2.googleapis.com/token",
"auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
"client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-jgnr7%40com-theintelligence-app.iam.gserviceaccount.com"
?
Backend Integration
Using the client key you should be able to create a simple c# app using the firebase nuget package to send a test message
https://github.com/Firebase/firebase-admin-dotnet or see the repo https://4-roads.visualstudio.com/INT-TEL-APP
The webapp communicates via a rest api
https://{hostname}/api.ashx/v2/mwa/user/device/add
They are logged to the community event log if you look for category "MWA Notifications"
IOS APNS Key Setup
To access ios clients you will need to get a key fromteh apple developer site and upload it into firebase
References
see the devops projects THE-APP-MCP AND THE-APP-MAP
