Difference between revisions of "Push Notifications"
(Created page with "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.com...") |
|||
| Line 1: | Line 1: | ||
Setting up firebase | == Setting up firebase == | ||
Get the package details from your application | === Get the package details from your application === | ||
Get the package name from the cordova config.xml | Get the package name from the cordova config.xml | ||
| Line 8: | Line 8: | ||
So in this case "com.thermomix.comapp" | So in this case "com.thermomix.comapp" | ||
Setup a new project in firebase | === Setup a new project in firebase === | ||
https://firebase.google.com/docs/android/setup | https://firebase.google.com/docs/android/setup | ||
| Line 14: | Line 14: | ||
Create apps for ios, android and web as required | Create apps for ios, android and web as required | ||
Update your application | === Update your application === | ||
Add the following plugin into the config.xml in the App folder | Add the following plugin into the config.xml in the App folder | ||
| Line 26: | Line 26: | ||
</plugin> | </plugin> | ||
Get the firebase config files | === Get the firebase config files === | ||
See https://support.google.com/firebase/answer/7015592?hl=en#zippy=%2Cin-this-article for more info but basically | See https://support.google.com/firebase/answer/7015592?hl=en#zippy=%2Cin-this-article for more info but basically | ||
| Line 44: | Line 44: | ||
Get a copy of firebase-messaging-sw.js and copy it into the UI/public folder | Get a copy of firebase-messaging-sw.js and copy it into the UI/public folder | ||
Add a UI handler for the messaging | === Add a UI handler for the messaging === | ||
Find an existing example in devops | Find an existing example in devops | ||
UI/PushNotifications | UI/PushNotifications | ||
| Line 52: | Line 52: | ||
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 | 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 | === Add a settings page to your app === | ||
UI/PushSettings | UI/PushSettings | ||
| Line 58: | Line 58: | ||
This will allow you to force the token refresh process, and quickly confirm that all looks ok | This will allow you to force the token refresh process, and quickly confirm that all looks ok | ||
Finally test time | === Finally test time === | ||
If all goes well, you should now be able to get a key in PushNotifications.js | If all goes well, you should now be able to get a key in PushNotifications.js | ||
Revision as of 10:48, 27 June 2022
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
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
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
