Push Notification

The push notification feature works when the admin add or modify the directory via the WordPress backend then users who are using the mobile application will get the notification.

Before going to make push notification work with your application, please do steps below:

  • Register FCM server key with your application ID
  • Setting FCM server key with your WordPress backend

1. Register FCM server key with your application ID

1.1 Add Firebase To Your IOS App

Access this URL https://console.firebase.google.com and select “Create a project

Create a project

After then from the panel of your project, please select menu Project Overview > then select the IOS icon for enroll the IOS application ID

Register your IOS app with Firebase

Add Firebase to your IOS app, please fill in these information

  • iOS bundle Id: bundle ID taken from your application. You can look for it in the source code ./source/ios/listar.xcodeproj/project.pbxproj and find the value of PRODUCT_BUNDLE_IDENTIFIER
  • App nickname: It is an optional value. This name will be used for present in the Firebase console
  • App Store ID: It is an optional value. You can skip it if your application haven’t registered and published in the Apple AppSore yet

Confirm your information by button Register App

Add Firebase to your IOS app

Click on the Download GoogleService-info.plist button to download the file then copy it to the ios directory of your project ./source/ios/GoogleService-info.plist . If the GoogleService-info.plist file already exists, delete the old file and copy the new file.

After you downloaded config setup then select Next button for complete add Firebase to your IOS app.

Download config file for iOS
GoogleService-info.plist for iOS

Please back your Firebase console for install Cloud Messaging to enable push notifications on iOS

Select Project Overview > Project Settings > Cloud Messaging tab

Cloud Messaging to enable push notifications on iOS

To setup the APNs Authentication Key, you must have an apple developer account. Visit page https://developer.apple.com and select your account

Certificates, IDs & Profiles
Select for create Keys
Setup & input require information
Confirm set up new Key
Download APNs Authentication Key for uses
Select for upload APNs Authentication Key
Select for upload the APNs Authentication Key from your local computer
Upload the APNs Authentication Key to Firebase console successfully

Install the push notification on source code. Please use Xcode application and open your source code ./source/ios/listar.xcworkspace then will see the GoogleService-info.plist

Xcode – GoogleService-info.plist

For make sure the push notification has been enabled from your application. Please select Runner > Signing & Capabilities tab and make sure Background Modes options has been checked

  • Background fetch
  • Remote notifications
Runner > Signing & Capabilities > Background Modes

Add Capability > Push Notifications

From the Xcode application select tab Capability, in there you can double click for open the modal add new Capability and select Access Wifi Information

Capability > Push Notifications

Then rebuild your project again, please check this Installation > Mobile Setup > https://passionui.com/docs/listar-pro/installation/mobile-setup

Then move to the next step setting > 2. Setting FCM server key with your WordPress backend

1.2 Add Firebase To Your Android App

Access this URL https://console.firebase.google.com and select menu Project Overview and select the Android icon for enroll the Android application ID

Enroll the Android application ID

Add Firebase to your Android app, please fill in these information

  • Android package name: You can look for it in the source code ./source/android/app/src/main/AndroidManifest.xml and find the value of package
  • App nickname: It is an optional value. This name will be used for present in the Firebase console
Select the package name of application
Add Firebase to your Android app

Click on the google-services.json button to download the file then copy it to the android directory of your project ./source/android/app/google-services.json . If the google-services.json file already exists, delete the old file and copy the new file.

After you downloaded config setup then select Next button for complete add Firebase to your Android app.

Download config file for Android
google-services.json for Android

Then rebuild your project again, please check this Installation > Mobile Setup > https://passionui.com/docs/listar-pro/installation/mobile-setup

Then move to the next step setting > 2. Setting FCM server key with your WordPress backend

2. Setting FCM server key with your WordPress backend

When you’re going to setup this step, for make sure you have done step 1 > Register FCM server key with your application ID

Please access your WordPress backed and select menu Listar > Settings > Push Notification tab

  • FCM Server Key: Access https://console.firebase.google.com > Project Overview > Settings > Cloud Message tab > Project credentials and get your setting server key
  • Allow Push: when you need push notification case on update or modify the directory listing data
  • Single Device Use: The push notification will work with last device login by this account used. Otherwise it will work with single account and multiple devices
  • Create New: Automatically send a push notification to all users every time your publish new directory listing
  • Create New Title: The push notification title will be shown on your mobile app when you create new the data.
  • Create New Push Content: The push notification content will be shown on your mobile app when you create new the data.
  • Update Exist: Automatically send a push notification to all users every time your update exist directory listing
  • Update Exist Title: The push notification title will be shown on your mobile app when you modify the data.
  • Update Exist Push Content: The push notification content will be shown on your mobile app when you modify the data.

You can try to use this FCK Server Key for project Listar Pro, please replace current value with this key AAAAtd98FSA:APA91bGE3jmQcxuwx4GbI91IXtXgDiZ3A4WfZrce4s-5wJE-GPkLpbf3dp7Vm7KKaF42PrgMAqispZ3ELVwjSbBxPa4LyHUg1bZsh1f8K5IY5XU-JFHiE-1f-REBZrMCLqmXEgXgusN2

Settings > Push Notification on the WordPress backend

select menu Listar > All Listings then try to add or modify the existing directory listing data. You will see the application push notification work like image below

Modify and get push notification