firebaseionic-frameworkcordova-plugin-fcm

how to enable firebase notifications in ionic android application


i want to build an application and use firebase for notification done a lot of search over google but did not find any good guide and solution , everything i tried ended into some errors . i tried ionic docs but they are all messy after the ionic v4 they shows everything about v4 i have my app almost finished up just this thing remains . i will appreciate any help . Any idea how to proceed? I'm most probably not configuring Firebase properly. I have placed google-services.json in the root directory, no problems there. but after that its all out of my understanding

 AN ERROR OCCURRED WHILE RUNNING ionic cordova plugin add phonegap-plugin-push --variable SENDER_ID-150482406038 --SAVE EXIT CODE 1

Solution

  • Got this Working . Thanks everyone for help! refrences used-

    works for

    1. ionic 3.20.1
    2. cordova 8.1.2

    steps i followed

    1. Removed my android platform using ionic cordova platform removeandroid then i created it agin ionic cordova platform add android. just to avoid any errors which my be there with my old android version.

    2. Got the google-services.json and placed it in the rootDirectoryOfApp\platforms\android\app

    3. then i run $ ionic cordova plugin add phonegap-plugin-push $ npm install --save @ionic-native/push@4
    4. Edit config.xml look for <platform name="android"> under that i wrote <resource-file src="google-services.json" target="app/google-services.json" />
    5. Edit package.json look for "phonegap-plugin-push" and edit it something like this

      "phonegap-plugin-push": {
          "ANDROID_SUPPORT_V13_VERSION": "27.+", // already there
          "FCM_VERSION": "11.6.2", // already there
          "SENDER_ID": "numeric key obtain from firebase console" // added
        },
      
    6. Open app.module.ts and import import { Push } from '@ionic-native/push'; add Push under providers there ... providers: [ StatusBar, SplashScreen, Push, ....

    7. Then in a provider i imported import { Push, PushObject, PushOptions } from '@ionic-native/push'; then in costructor i added private push: Push, and in the class of that provider i wrote a function like below

      pushSetup(){

      // to check if we have permission
      this.push.hasPermission()
      
      .then((res: any) => {
      if (res.isEnabled) {
      console.log('We have permission to send push notifications');
      } else {
      
      console.log('We do not have permission to send push notifications');
      }
      });    
      // Create a channel (Android O and above). You'll need to provide the id, description and importance properties.
      
      this.push.createChannel({
      id: "testchannel1",
      description: "My first test channel",
      // The importance property goes from 1 = Lowest, 2 = Low, 3 = Normal, 4 = High and 5 = Highest.
      importance: 3
      
      }).then(() => console.log('Channel created'));
      // Delete a channel (Android O and above)
      this.push.deleteChannel('testchannel1').then(() => console.log('Channel deleted'));  
      
      
      
      // Return a list of currently configured channels
      this.push.listChannels().then((channels) => console.log('List of channels', channels))    
      // to initialize push notifications  
      
      const options: PushOptions = {
      android: {
      senderID:"150482406038",
      },
      
      ios: {
      alert: 'true',
       badge: true,
      sound: 'false'
      },     
      };
      
      const pushObject: PushObject = this.push.init(options);     
      pushObject.on('notification').subscribe((notification: any) => console.log('Received a notification', notification));     
      pushObject.on('registration').subscribe((registration: any) => console.log('Device registered', registration));     
      pushObject.on('error').subscribe(error => console.error('Error with Push plugin', error));
      }
      
    8. Now imported that provider where I want to use that , and called that function from there . but call it only after
      this.platform.ready().then(() => { or when a successful login.

    I have shared this because i found it little difficult and got confusing guides over web Please comment if you found it wrong or not working in your case.