How to use capacitor-firebase/messaging plugin without a framework?

Question

I migrated my Cordova project to capacitor 6.0.0 (without a framework). My app uses jQuery Mobile, and the code is maintained in Android Studio. I managed to get all plugins to work except the cordova-plugin-fcm which is incompatible with capacitor. Instead I want to use the @capacitor-firebase/messaging, but I am unable to find any documentations/demos on how to include it in my project in Javascript.

The only documentation that I find is for capacitor with some type of framework.

Answer 1

I managed to solve it.

1. Make sure the @capacitor-firebase/messaging plugin is installed

2. Include this code in capacitor.config.json file inside "plugins"

    "FirebaseMessaging": {
            "presentationOptions": [
                "badge",
                "sound",
                "alert"
            ]
        }
   

3. Include this code in your JavaScript file.

    const FirebaseMessaging = Capacitor.Plugins.FirebaseMessaging;
   
    //Check permissions set by the user               
    FirebaseMessaging.checkPermissions().then(
            function(value)
            {   //If checkPermissions value is prompt, then this is the first time and we need to requestPermission
                if(value.receive == "prompt")
                {       //Request permission from user
                        FirebaseMessaging.requestPermissions().then(
                            function(value)
                            {   //If permission is granted then get the device token and set the listener
                                if(value.receive == "granted")
                                {
                                     FirebaseMessaging.getToken().then(
                                        function(value)
                                        {
                                             console.log(JSON.stringify(value));
                                             FirebaseMessaging.addListener("messageReceived", (message) => console.log(message));
                                        },
                                        function(error)
                                        {
                                            console.log(JSON.stringify(error));
                                        }
                                     );
                                }
                            },
                            function(error)
                            {
                               console.log(JSON.stringify(error));
                            }
                        );
                }
                else if(value.receive == "granted")     //If checkPermissions value is granted, then user already made a selection and we need to get the token and set the listener
                {
                    //Get the token and add listener
                    FirebaseMessaging.getToken().then(
                        function(value)
                        {
                            console.log(JSON.stringify(value));
                            FirebaseMessaging.addListener("messageReceived", (message) => console.log(message));
                        },
                        function(error)
                        {
                             console.log(JSON.stringify(error));
                        }
                    );
                }
            },
            function(error)
            {
                console.log(JSON.stringify(error));
            }
        );
   

4. To test app notification, first you need to get the token of your emulator or physical device. To do this, run the app, you will see the token in the console. Then make sure the app is running in the background (i.e., not visible on the screen). Then login to firebase console, choose send a message to a test device, enter the token and send the message.