Push Notifications
The feature integration is taken from Ionic Framework's official documentation
Last updated
Was this helpful?
The feature integration is taken from Ionic Framework's official documentation
Last updated
Was this helpful?
One of the most common features provided by application developers to their users is push notifications. In this tutorial, we'll walk through all the steps needed to get working on iOS and Android.
For the purposes of registering and monitoring for push notifications from Firebase, we'll make use of the in an Ionic + Angular application.
Building and deploying iOS and Android applications using Capacitor requires a bit of setup. Please before continuing.
To test push notifications on iOS, Apple requires that you have and a physical iOS device.
Before adding any native platforms to this project, the app must be built at least once. A web build creates the web assets directory that Capacitor needs (www
folder in Ionic projects).
Next, let's add the iOS and Android platforms to our app.
Upon running these commands, both android
and ios
folders at the root of the project are created. These are entirely separate native project artifacts that should be considered part of your Ionic app (i.e., check them into source control).
Before we get to Firebase, we'll need to ensure that our application can register for push notifications by making use of the Capacitor Push Notification API. We'll also add an alert
(you could use console.log
statements instead) to show us the payload for a notification when it arrives and the app is open on our device.
In your app, head to the home.page.ts
file and add an import
statement and a const
to make use of the Capacitor Push API:
Then, add the ngOnInit()
method with some API methods to register and monitor for push notifications. We will also add an alert()
a few of the events to monitor what is happening:
Here is the full implementation of home.page.ts
:
Before we can connect Firebase Cloud Messaging to your application and send push notifications, you'll need to start a project in Firebase.
Name the project, accept the Firebase ToS and click Create project to continue. A Project ID should be automatically generated for you.
Go to the Project Overview page for your Firebase project and, under the Grow section, click the Cloud Messaging option. At the top, click on the Android icon.
The next screen will ask you for some information about your application.
Your Android package name should match the appId from your capacitor.config.json
file
We used com.mydomain.myappname
for this Capacitor app ID, so that is what we'll use for this entry.
Nickname and Debug Signing Certificate are optional
Then click the Register app button.
google-services.json
fileThe next prompt will ask you to download a google-services.json
file. This file contains the information your Capacitor app needs to connect to Firebase from Android.
Download the google-services.json
file to your local machine. Then move the file into your Capacitor Android project directory, specifically under android/app/
.
We don't need to add any dependencies to our project because Capacitor projects automatically include a version of firebase-messaging
in it's build.gradle
file.
This part is very similar to the Android section above, with a few key differences.
First, go to the Project Overview page for your Firebase project. If you've been following this guide, you'll already have an Android application listed at the top of the page.
To add iOS to your Firebase project, click the Add App button and select the iOS platform.
The next screen will ask you for some information about your application.
Your iOS bundle ID should match the appId from your capacitor.config.json
file
We used com.mydomain.myappname
for this Capacitor app ID, so that is what we'll use for this entry.
App Nickname and App Store ID are optional
Then click the Register app button.
GoogleService-Info.plist
file to your iOS appNote: This is not the same file used for your Android app.
Download the GoogleService-Info.plist
provided to your local machine.
You'll then want to open Xcode...
... and move the .plist
file into your Xcode project as instructed by Firebase, ensuring to add it to all targets.
The Push Notification API on iOS makes use of CocoaPods - an iOS dependency management system - and we need to tell CocoaPods to make use of Firebase.
To do this, we need to modify the Podfile
, which can be found in Xcode under Pods
:
We need to add Firebase to the CocoaPods provided for our App target. To do that, add pod Firebase/Messaging
to your target 'App'
section, like so:
Your Podfile
should look something like this:
Now we'll need to ensure that our iOS project is updated with the proper Firebase CocoaPod installed.
Note: This part can take a while as CocoaPods needs to download all the appropriate files/dependencies.
To connect to Firebase when your iOS app starts up, you need to add the following to your AppDelegate.swift
file.
First, add an import
at the top of the file:
... and then add the configuration method for Firebase to initialization code to your AppDelegate.swift
file, in the application(didFinishLaunchingWithOptions)
method.
Your completed AppDelegate.swift
file should look something like this:
If you followed the instructions from the beginning, you'll have created an Apple APNS Certificate or an APNS Auth Key in the Apple Developer portal. You need to upload one of these to Firebase before Firebase can talk to APNS and send push notifications to your application.
To upload your certificate or auth key, from the Project Overview page:
Click on your iOS application and then the Settings gear icon.
On the Settings page, click on the Cloud Messaging tab.
Under the iOS app configuration header, upload your Auth Key or Certificate(s) using the provided Upload button.
Now for the fun part - let's verify that push notifications from Firebase are working on Android and iOS!
We need to fire up our application on Android or iOS so that our home.page.ts
page can register and receive notifications.
To open your Android project in Android Studio:
To open your iOS project in Xcode:
Once the project is open, side-load the application on your device using the Run feature of either Android Studio or Xcode. The app should start up on the home page.
Note: On iOS, you will see a popup asking you to allow notifications for your app - make sure you choose to Allow notifications!
If your app successfully registers and you followed the code above, you should see an alert with a success message!
Now we'll test to see if the notifications are received by our device. To send a notification, in Firebase, go to the Cloud Messaging section under the Grow header in the project pane.
Next, select the New Notification button.
When creating the notification, you only need to specify the following information:
The text of the notification
The title (Android only, optional for iOS)
The Target (either a user segment or topic; I recommend just targeting the iOS or Android app itself, see below)
The Scheduling (leave this to "Now")
At that point, you can Review the notification you've put together and select Publish to send the notification out.
If you've setup your application correctly, you'll see an alert pop up on your home screen with the push notification you composed in Firebase. You can then tap on the notification and you should get an alert
for the pushActionPerformed
event, per our code above.
Go to the and click the Add project button.
This section more-or-less mirrors the . See below for specific Capacitor-related notes.
iOS push notifications are significantly more complicated to set up than Android. You must have a and take care of the following items prior to being able to test push notifications with your iOS application:
for your iOS application in the Apple Developer Portal
for either Development or Production in the Apple Developer Portal
in your application in Xcode
Have a physical iOS device as per the guidelines in the documentation