How to Install FCM Push Notifications on Quasar Capacitor Android?
In a fast-paced digital landscape, staying connected with your app users is crucial for the success of your mobile application. Push notifications are a powerful tool for engaging your audience, providing timely updates, and enhancing user experiences. Whether you're a seasoned developer or just starting your journey in mobile app development, this guide will walk you through installing FCM push notifications on your Quasar Capacitor Android app. By the end of this article, you'll clearly understand how to set up FCM, configure your Quasar Capacitor project, and send push notifications to your Android users, ensuring your app remains engaging and relevant in today's competitive app market. So, let's dive in and harness the power of FCM push notifications in your Quasar Capacitor Android app.
Process to Install FCM Push Notifications on Quasar Capacitor Android
Installing FCM Push Notifications on Quasar Capacitor Android can be a multi-step process. Below is a simplified guide to help you get started. Please note that the exact steps may vary depending on the versions of the tools and libraries you're using, so be sure to refer to the official documentation for the most up-to-date instructions.
1 - Install Quasar Project
npm init quasar
2 - Add Capacitor into Quasar Project
quasar mode add capacitor
You'll be prompted to input an App ID. You can use any ID, such as "app.nodesol.com," when asked.
3 - Run Capacitor Project into Android Studio
quasar dev -m capacitor -T android4 - Create a Firebase Project
If you haven't already, go to the Firebase Console, create a new project, and follow the setup instructions.
5 - Add your project to Firebase
- Click "Add app" and select the platform (iOS or Android) you are developing for.
- Follow the setup steps for your chosen platform, including downloading configuration files (google-services.json for Android, GoogleService-Info.plist for iOS).
- Download the google-services.json file from Firebase and save it in the "app" folder, as shown in the image below:
6 - Go to Capacitor Project
cd src-capacitor7 - Install Push Notifications into the Capacitor App
npm install @capacitor/push-notifications8 - Sync Dependencies
npx cap sync9 - Add the following code
in src-capacitor/capacitor.config.json
{
"plugins": {
"PushNotifications": {
"presentationOptions": ["badge", "sound", "alert"]
}
}
}
10 - Create a boot file to add event listeners
# if you're in src-capacitor, go back to quasar root folder
cd ..
quasar new boot PushNotificationListeners
The command mentioned above will generate a file located at src/boot/PushNotificationListeners.js. To include it in your Quasar project, reference it below in your quasar.config.js file:
boot: [
'PushNotificationListeners'
],
11 - Put the following code
in src/boot/PushNotificationListeners.js
import { boot } from 'quasar/wrappers'
import { PushNotifications } from '@capacitor/push-notifications';
import {LocalStorage} from "quasar";
// "async" is optional;
// more info on params: https://v2.quasar.dev/quasar-cli/boot-files
export default boot(async ({ app, router} ) => {
const addListeners = async () => {
/**
* Triggered automatically when app is open
*/
await PushNotifications.addListener('registration', token => {
if(token.value) {
LocalStorage.set('deviceTokenForPushNotification', token.value)
console.log('Device Registration Token', token.value)
}
});
await PushNotifications.addListener('registrationError', err => {
alert('Unable to Register your device for push notifications');
});
/**
* Triggered when a new notification received
*/
await PushNotifications.addListener('pushNotificationReceived', notification => {
/**
* Write logic to do something when a new push notification received
*/
console.log((notification), 'notification received')
});
/**
* Triggered when click on a push notification from mobile notification bar
*/
await PushNotifications.addListener('pushNotificationActionPerformed', notification => {
/**
* You can redirect to user to any page when push notification was clicked
*/
router.push('/notification-detail')
console.log(notification, 'Action performed JS')
});
}
const registerNotifications = async () => {
/**
* Check for permissions
*/
let permStatus = await PushNotifications.checkPermissions();
if (permStatus.receive === 'prompt') {
permStatus = await PushNotifications.requestPermissions();
}
if (permStatus.receive !== 'granted') {
// throw new Error('User denied permissions!');
console.error('User denied permissions!')
}
await PushNotifications.register();
}
/**
* Add all the event listeners
*/
await addListeners()
/**
* Ask user for permissions and Register the device for the push notifications
*/
await registerNotifications()
})
12 - Add Push Notification Icon
in /src-capacitor/android/app/src/main/AndroidManifest.xml
On Android, the Push Notifications icon with the appropriate name should be added to the AndroidManifest.xml file. Add the following code within the application tag.
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@mipmap/push_icon_name" />
# To enable firebase messaging
<meta-data android:name="com.google.firebase.messaging.default_notification_channel_id" android:value="@string/default_notification_channel_id" />13 - Add the following code
in /src-capacitor/android/app/src/main/res/values/strings.xml
<string name="default_notification_channel_id" translatable="false">default</string>
14 - Test Push Notifications
- Copy the device registration token as shown in step #11.
- Log in to your Firebase account.
- Select your Android app and access the "Messaging" section in the left sidebar.
- Click "New Campaign" and choose "Notifications."
- Fill in the Push Notification Title and Text fields.
- Click the "Send test message" button to send a test push notification.
- If you encounter issues receiving push notifications on your emulator, consider testing on a physical mobile device.
Conclusion
In conclusion, integrating Firebase Cloud Messaging (FCM) push notifications into your Quasar Capacitor Android app can significantly enhance user engagement and inform your audience with timely updates. While the process may seem complex, following the steps outlined in this guide will help you set up FCM seamlessly. By creating a Firebase project, configuring your Quasar Capacitor project, and incorporating the Firebase Messaging plugin, you've taken a crucial step towards providing a better user experience. Push notifications can help you re-engage users, promote new features, and connect them to your app.
Ready to elevate your business to new heights? Let NodeSol Corp be your technology partner on the path to success. Contact us today to discuss your custom software development, IT consulting, and digital transformation needs. Together, we'll turn your vision into reality and drive innovation for your business.
