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 force the token refresh process, 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}

Finally test time

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