Push Notifications with Ionic and Cordova-Plugin-Firebase
This was a real journey full of pitfalls, so here’s the step-by-step for adding Cordova-Plugin-Firebase to your Ionic app.
Install plugin
Make sure you’ve set up NPM or Yarn, and Ionic. Then install the plugin:
ionic cordova plugin add cordova-plugin-firebasenpm install --save @ionic-native/firebase
or
yarn add @ionic-native/firebase
Add to app code
Next, add add the following code to your app.component.ts.
Plus, make sure to include these libraries in app.module.ts too.
Get icons
Create a 96x96px PNG that’s just white and transparent. Upload the image to the awesome Android Asset Studio — Notification icon generator. For the next step, we’re going to use “notification_icon” as the image name, but feel free to use whatever you like in your app. Download the package, create the directory {project root}/resources/android/notification and extract the icons there.
Add to config.xml
Finally, we’re going to get Ionic to copy our icon files to the Android bundle, and we’re going to make sure Firebase notifications actually use them:
Set up Firebase
Go to the Firebase console and create, or go to, your app. In the Cloud Messaging section, follow the instructions for adding Android and iOS apps. Make sure to set up the interface to the Apple Push Notification Service too.
—
And that’s it for setup! Build your Ionic app and deploy it to a device or simulator and open it up to grant permission to receive notifications. Send yourself some test notifications through the Cloud Messaging console (just set the Message Text, and Title in the Advanced options) and you should see notifications pop up with your spiffy new icon!
