SocialStack - User contributions [en-gb]

Push Notifications

2024-05-27T18:27:19Z

2A02:C7C:C43F:C600:2505:4C62:1C31:494D: /* Add a UI handler for the messaging */

== 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 ===

Install the push notifications UI module:

<syntaxhighlight lang="bash">
socialstack install UI/PushNotifications
</syntaxhighlight>

This module has the main job of registering for push notifications when the device is either in a native app or via the web. A device on the web will see the permission request for push notifications.

You'll need to edit the PushNotifications.js file to include the correct firebase config from the web application. This config is primarily used when your site is running from the web.

=== Add a settings page to your local wep app ===

This will allow you to test the token refresh process in a webapp, and quickly confirm that all looks ok

You need to add a page with the following component

UI/PushSettings
{\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}

Once added, when you visit the page it should try and get a token from firebase and then send an update to the community via /api.ashx/v2/mwa/user/device/add.json

This will add a device entry to the community and allow notifications to be passed back to the web app

There are some console log entries to confirm it has been added

=== 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
<syntaxhighlight lang="json">
{
"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"
?
</syntaxhighlight>

=== Backend Integration ===

Start by installing the push notifications module:

<syntaxhighlight lang="bash">
socialstack install Api/PushNotifications
</syntaxhighlight>

This module creates the UserDevice type and also provides the PushNotificationService which can be used to send push notifications to target devices.

Internally the PushNotificationService batches notifications together so can be used for large amounts of push notification traffic too.

=== IOS APNS Key Setup ===

To access iOS clients you will need to get a key from the Apple developer site and upload it into firebase:

https://learn.buildfire.com/en/articles/5760994-how-to-set-up-your-apple-push-notification-key-for-your-ios-firebase-certificate#:~:text=How%20do%20I%20upload%20my%20APNs%20key%20to,Step%203.%20Click%20on%20Certificates%2C%20IDs%20%26%20Profiles

=== References ===

see the devops projects THE-APP-MCP AND THE-APP-MAP

Push Notifications

2024-05-27T18:16:42Z

2A02:C7C:C43F:C600:2505:4C62:1C31:494D: /* Backend Integration */

== 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 local wep app ===

This will allow you to test the token refresh process in a webapp, and quickly confirm that all looks ok

You need to add a page with the following component

UI/PushSettings
{\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}

Once added, when you visit the page it should try and get a token from firebase and then send an update to the community via /api.ashx/v2/mwa/user/device/add.json

This will add a device entry to the community and allow notifications to be passed back to the web app

There are some console log entries to confirm it has been added

=== 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
<syntaxhighlight lang="json">
{
"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"
?
</syntaxhighlight>

=== Backend Integration ===

Start by installing the push notifications module:

<syntaxhighlight lang="bash">
socialstack install Api/PushNotifications
</syntaxhighlight>

This module creates the UserDevice type and also provides the PushNotificationService which can be used to send push notifications to target devices.

Internally the PushNotificationService batches notifications together so can be used for large amounts of push notification traffic too.

=== IOS APNS Key Setup ===

To access iOS clients you will need to get a key from the Apple developer site and upload it into firebase:

https://learn.buildfire.com/en/articles/5760994-how-to-set-up-your-apple-push-notification-key-for-your-ios-firebase-certificate#:~:text=How%20do%20I%20upload%20my%20APNs%20key%20to,Step%203.%20Click%20on%20Certificates%2C%20IDs%20%26%20Profiles

=== References ===

see the devops projects THE-APP-MCP AND THE-APP-MAP

Push Notifications

2024-05-27T17:57:14Z

2A02:C7C:C43F:C600:2505:4C62:1C31:494D: /* IOS APNS Key Setup */

== 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 local wep app ===

This will allow you to test the token refresh process in a webapp, and quickly confirm that all looks ok

You need to add a page with the following component

UI/PushSettings
{\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}

Once added, when you visit the page it should try and get a token from firebase and then send an update to the community via /api.ashx/v2/mwa/user/device/add.json

This will add a device entry to the community and allow notifications to be passed back to the web app

There are some console log entries to confirm it has been added

=== 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
<syntaxhighlight lang="json">
{
"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"
?
</syntaxhighlight>

=== 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

All requests are logged to the community event log if you look for category "MWA Notifications", so you should be able to see them coming in from the app

By default the community mwa extension will forward any community notifications to the app via firebase if the user has a valid key, which are stored in extended attributes of the user account

=== IOS APNS Key Setup ===

To access iOS clients you will need to get a key from the Apple developer site and upload it into firebase:

https://learn.buildfire.com/en/articles/5760994-how-to-set-up-your-apple-push-notification-key-for-your-ios-firebase-certificate#:~:text=How%20do%20I%20upload%20my%20APNs%20key%20to,Step%203.%20Click%20on%20Certificates%2C%20IDs%20%26%20Profiles

=== References ===

see the devops projects THE-APP-MCP AND THE-APP-MAP