Push Notification Setup – Initappz Documentation

To send push notifications to your users with Ionic and Capacitor you don’t need a specific service, but you need to configure a bunch of things up front to make it work.

In this tutorial, we will integrate Push Notifications using Firebase, since Firebase is basically required for Android anyway and you can easily use it to send our notifications, even without using the database at all!

Firebase Configuration

Get started by creating a new Firebase project or use an existing project that you already created for your app.

Simply specify a name and the default options to get started with a new project.

If you have a blank new app you should now see “Get started by adding Firebase to your app” in the dashboard of your app, otherwise, you can also simply click the gear icon and move to the project settings from where you can also add an app.

The dialog looks basically the same for both iOS and Android like in the image below, and the only important thing here is to use your package id for the apps!

Creating a Project for your App on Firebase

Before we can connect Firebase Cloud Messaging to your application and send push notifications, you’ll need to start a project in Firebase.

Go to the Firebase Console and click the Add project button.

Name the project, accept the Firebase ToS and click Create project to continue. A Project ID should be automatically generated for you.

Get Firebase Server KEY

In order to send a notification, we need the firebase server key to be set up on our owner / Admin Open.

To Get Firebase Server Key Go to the Firebase Console and click the Settings Icon On Top Of Console And Click On Project Settings

Now Click on Cloud Messaging Tabs.

Copy The Server Key And Follow Steps

Open Owner / Admin App Go To Profile Section On the bottom of the tab bar

Now Click On Settings on And On the bottom of settings page add FCM TOKEN with Firebase Server Key

Android

Integrating Firebase with the Android app

This section more-or-less mirrors the setting up Firebase using the Firebase console documentation. See below for specific Capacitor-related notes.

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.

Download and Use thegoogle-services.jsonfile

The 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.

iOS

Prerequisites

iOS push notifications are significantly more complicated to set up than Android. You must have a paid Apple Developer accountand take care of the following items prior to being able to test push notifications with your iOS application:

1.

Setup the proper Development or Production certificates & provisioning profiles for your iOS application in the Apple Developer Portal
2.

Create an APNS certificate or key for either Development or Production in the Apple Developer Portal
3.

Ensure Push Notification capabilities have been enabled in your application in Xcode
4.

Have a physical iOS device as per the guidelines in the Dependencies documentation

Integrating Firebase with our native iOS app

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.

Add theGoogleService-Info.plistfile to your iOS app

Note: 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…

npx cap open ios

Copied!

… and move the .plist file into your Xcode project as instructed by Firebase, ensuring to add it to all targets.

Add the Firebase SDK via CocoaPods

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:

Update the Project

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.

Add Initialization Code

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.

You’re completed AppDelegate.swift the file should look something like this:

Upload the APNS Certificate or Key to Firebase

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:

1.

Click on your iOS application and then the Settings gear icon.
2.

On the Settings page, click on the Cloud Messaging tab.
3.

Under the iOS app configuration header, upload your Auth Key or Certificate(s) using the provided Upload button.

Ultimate Grocery App