How to implement Push notifications in Quasar with capacitor 3

Capacitor
1

Hello, hope the fellows of the forum can help me, I tried many ways to use push notifications on Quasar mobile app but without luck. Some one has a guide to do it or can guide me in the right way.

Any help will be apreciated.

2

I followed this guide - Capacitor - build cross platform apps with the web

Please let me know if you have any specific questions. I am using the Ionic Framework with Vue but that shouldn’t matter as there isn’t anything framework specific that you need to do.

3

Thank you so much for the guide, finally I can achieved to push notifications works, but now I have another issue maybe you dealing with that before. The issue that I have it’s if the app is in background I receive the notification but when it’s in foreground or closed I didn’t receive any notification.

4

I cannot remember where I read it, but when the app is in the foreground, it won’t show the notification. It just triggers the pushNotificationReceived event. I display it using the Local Notification plugin. My code is below - it is pretty custom with some custom objects and such but hopefully gives you an idea.

await PushNotifications.addListener(
    'pushNotificationReceived',
    async (notification: PushNotificationSchema) => {
        if (!(await MyLocalNotifications.hasPermission())) {
            return
        }

        const action = ActionNotificationItem.fromJson(notification.data)

        LocalNotifications.schedule({
            notifications: [
                {
                    id: new Date().getTime(),
                    title: action.title,
                    body: action.body,
                    largeBody: action.body,
                    channelId: 'actions',
                    extra: action,
                },
            ],
        })
    }
)
1 Like
5

hey! I’ve been trying to get Push Notifications to work with my Quasar app. I was wondering if you could help me out. Thanks!

6

Do you have any specific questions? The guide mentioned above is a good start if you are going to use Firebase for both iOS and Android.

7

I think since I’m using Quasar Framework it’s a bit, more involving.

For Firebase, I actually have it booting as the App loads, something to do with iOS needing to initialize at a specific time. I do not have anything Firebase related in Cocoapods.

This initializes firebase through Quasar on boot.

function whichAuth() {
    let auth
    if (Capacitor.isNativePlatform()) {
        auth = initializeAuth(firebaseConfig, {
            persistence: indexedDBLocalPersistence
        })
    } else {
        auth = getAuth()

    }
    return auth
}

Anyhow, I think I might need to do something here also.

From my understanding, home.page.ts, for Vue would be App.js where I would import the components and create a method that mounts. Then implement the cocoapod flow.

I just can’t find a good Vue.js or Quasar example and jostling between typescript, angular examples just adds more time lol but that’s fine.

8

To use Firebase for push notifications, there is no auth that needs to be done. Everything is based on the user’s FCM token. You use the Push Notification plugin to request permissions and to register the user’s device. Then you can either use the Capacitor FCM plugin to manage the user’s subscriptions client side or do it in your backend with the Firebase SDK.

9

Hmm, I’ll play with it a bit more. But that makes sense. Thanks!

10

Hello Sir, can you let us know how did you achieve it, if you can share the repository or sample code app it’ll be great. @wea1809