Push Notifications with Ionic 4 and Firebase Cloud Messaging

Push Notifications with Ionic 4 and Firebase Cloud Messaging

Learn how to create and send push notifications from Firebase Cloud Messaging to Ionic app. We will use Ionic 4 Cordova native FCM plugin to receive push notification in an Ionic 4 app. Learn how to send push notifications from Firebase and receive notification in an Ionic app.

In this step by step tutorial, we will learn how to create and send push notifications from Firebase Cloud Messaging to Ionic app. We will use Ionic 4 Cordova native FCM plugin to receive push notification in an Ionic 4 app.

A push notification is a message that shows up on a user’s mobile device. App owners can publish push notification at any time and send it to the user’s device.

Push notifications seem similar to SMS or text messages and mobile alerts. However, they only received by users who have installed your app. Almost every mobile platform supports push notifications such as iOS, Android, Fire OS, Windows, and BlackBerry.

Push notifications provide you updates, be it:

  • Latest offers to boost sales
  • Latest sports scores and news
  • Reports about traffic and weather
  • Flight check-in, change, and connection information
Prerequisite

To get started with this Ionic push notification tutorial, we must have the following tools, frameworks, and packages in our arsenal.

  • Latest Node
  • Ionic 4
  • Angular 8
  • Firebase FCM
  • Postman
  • Text Editor
  • Cordova
  • Ionic 4 Cordova Native FCM

If you do not have Node.js installed on your device then follow this tutorial on: How to Download and Install Node.js and npm

Firebase Setup for Android

To set up Firebase for Android, head over to console.firebase.google.com and create a Firebase project.

Next, a full-screen pop up appears on your screen, enter your project name in the input field and click on the continue button.

In the second screen, you will see Google analytics features you can enable them and click on the create project button.

In the dashboard, you will have options to set up Firebase account for iOS, Android, Web, and Unity. Click on the Android button, and you will be redirected to the given screen.

Next, we will add Firebase to our Android app.

To register the app add the Android package name in the input field. For instance, we entered com.positronx.pushnotification then provided the app’s nickname (same as Ionic project name); however, its an optional value. Then click on the Register app button.

Next, you will see the following screen that allows you to Download the config file, which is used to run the mobile app in the Android Studio or emulator.

Click on the Download google-services.json file. We have to add this file to the based folder of our Ionic app.

Click on the next button unless you reach to the last screen that can be skipped.

We have successfully created the Firebase application for Android platform.

Create Ionic 4 Push Notification App

Make sure you have the latest version of Ionic CLI and Cordova globally installed on your device, if not use the below command.

sudo npm install -g cordova ionic

Check out the version of Ionic by running the following command.

ionic -v

# 5.4.15

Use command to update Ionic and Cordova.

sudo npm update -g cordova ionic

Run the following command to create a brand new blank Ionic 4 Firebase push notification app.

ionic start ionic-firebase-push-notification blank

Get inside the project folder.

cd ionic-firebase-push-notification

Run the following command in the terminal to install the lab plugin as a dev dependency.

npm install --save-dev @ionic/lab

Run the command to start the app in the browser, we can see app in iOS and Android mode.

ionic serve -l

Install & Configure Ionic 4 Cordova Native FCM Plugin

Now, we type the below command in the terminal to Install Google Firebase Cloud Messaging Cordova Push Plugin and Ionic Native FCM plugin.

ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated

FCM offers basic functionality for Firebase Cloud Messaging (FCM) and It supports iOS and Android.

npm install @ionic-native/fcm

Open your Ionic project and head over to the config.xml file. Here you can see the widget id “com.positronx.pushnotification” that carries the unique identification of your push notification app, here you have to add the package name that we defined in the Firebase.

This time we will inject FCM service to enable the Push notification service in our Ionic app via Firebase FCM, go to app.module.ts file and add the following code in the main app module file.

// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

// FCM
import { FCM } from '@ionic-native/fcm/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    FCM,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})

export class AppModule {}

We imported FCM plugin and register in the providers array.

Push Notification Implementation in Ionic 4 with Firebase

Now, we will implement push notification in our Ionic 4 Cordova app through Firebase Cloud Messaging.

Place the following code in the app.component.ts file.

// app.component.ts

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { FCM } from '@ionic-native/fcm/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})

export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private fcm: FCM
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      // subscribe to a topic
      // this.fcm.subscribeToTopic('Deals');

      // get FCM token
      this.fcm.getToken().then(token => {
        console.log(token);
      });

      // ionic push notification example
      this.fcm.onNotification().subscribe(data => {
        console.log(data);
        if (data.wasTapped) {
          console.log('Received in background');
        } else {
          console.log('Received in foreground');
        }
      });      

      // refresh the FCM token
      this.fcm.onTokenRefresh().subscribe(token => {
        console.log(token);
      });

      // unsubscribe from a topic
      // this.fcm.unsubscribeFromTopic('offers');

    });
  }
}

We imported FCM API from ‘@ionic-native/fcm/ngx’ and Router from ‘@angular/router’.

Inject FCM and Router services in the constructor.

We can access to subscribeToTopic method via FCM package and subscribe to a topic, the subscribeToTopic() takes the topic name as a parameter.

The fcm.getToken() method returns a token of a push notification, and we are showing the token in the console.

The fcm.onNotification() method returns a push notification from Firebase Cloud Messaging.

The fcm.onTokenRefresh() method allows refreshing the Firebase Cloud Messaging (FCM) token.

Use unsubscribeFromTopic() method to unsubscribe from a topic from FCM.

Sending and Receiving Push Notification in Ionic 4 via FCM

In this step, we will create the project build; let’s run the below command to add the Android platform in Ionic app.

ionic cordova platform add android

In this step, we will add the google-services.json in the root of our project and also inside the platform/android folder file that we downloaded from Firebase FCM. This step is crucial, and it makes communication between the Ionic app and Firebase.

Run the Ionic app in the Android device by using the following command.

ionic cordova run android --livereload

We used the --livereload tag. It automatically creates the build as soon as it noticed any change in the application files.

Firebase Cloud Messaging Example

Go to your Firebase dashboard click on Grow > Cloud Messaging, we define Firebase Notification here, add the notification title, text even you can pass the notification image here.

Click on the ‘Send test message’ button, and it will open a popup where you have to define the Firebase Cloud Messaging token to send push notification to the Ionic 4 app.

Type chrome://inspect in the address bar, then select the inspect mode there you can see the Firebase push notification token that we will need in the next step.

We have done all the formalities, and now we will hit on the Test button to send a test notification.

Conclusion

The Ionic 4 Firebase FCM Push Notification Tutorial is over; in this tutorial, we have learned how to send push notifications from Firebase and receive notification in an Ionic app.

You can get the complete code of this tutorial on this GitHub repository.

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

What’s new in HTML6

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

ECommerce Mobile App Development | Ecommerce Mobile App Development Services

We are leading ecommerce mobile application development company. Hire our ecommerce mobile app developer for your custom Ecommerce project at competitive rates. **Know about [Top ECommerce Mobile App Development...

We are leading ecommerce mobile application development company. Hire our ecommerce mobile app developer for your custom Ecommerce project at competitive rates.

Know about Top ECommerce Mobile App Development Company

How to Build Mobile Apps with Angular, Ionic 4, and Spring Boot

How to Build Mobile Apps with Angular, Ionic 4, and Spring Boot

Run Your Ionic App on Android. Make sure you're using Java 8. Run ionic cordova prepare android. Open platforms/android in Android Studio, upgrade Gradle if prompted. Set launchMode to singleTask in AndroidManifest.xml. Start your app using Android Studio...

In this brief tutorial, I’ll show you to use Ionic for JHipster v4 with Spring Boot and JHipster 6.

To complete this tutorial, you’ll need to have Java 8+, Node.js 10+, and Docker installed. You’ll also need to create an Okta developer account.

Create a Spring Boot + Angular App with JHipster

You can install JHipster via Homebrew (brew install jhipster) or with npm.

npm i -g [email protected]

Once you have JHipster installed, you have two choices. There’s the quick way to generate an app (which I recommend), and there’s the tedious way of picking all your options. I don’t care which one you use, but you must select OAuth 2.0 / OIDCauthentication to complete this tutorial successfully.

Here’s the easy way:

mkdir app && cd app

echo "application { config { baseName oauth2, authenticationType oauth2, \
  buildTool gradle, testFrameworks [protractor] }}" >> app.jh

jhipster import-jdl app.jh

The hard way is you run jhipster and answer a number of questions. There are so many choices when you run this option that you might question your sanity. At last count, I remember reading that JHipster allows 26K+ combinations!

The project generation process will take a couple of minutes to complete if you’re on fast internet and have a bad-ass laptop. When it’s finished, you should see output like the following.

OIDC with Keycloak and Spring Security

JHipster has several authentication options: JWT, OAuth 2.0 / OIDC, and UAA. With JWT (the default), you store the access token on the client (in local storage). This works but isn’t the most secure. UAA involves using your own OAuth 2.0 authorization server (powered by Spring Security), and OAuth 2.0 / OIDC allows you to use Keycloak or Okta.

Spring Security makes Keycloak and Okta integration so incredibly easy it’s silly. Keycloak and Okta are called "identity providers" and if you have a similar solution that is OIDC-compliant, I’m confident it’ll work with Spring Security and JHipster.

Having Keycloak set by default is nice because you can use it without having an internet connection.

To log into the JHipster app you just created, you’ll need to have Keycloak up and running. When you create a JHipster project with OIDC for authentication, it creates a Docker container definition that has the default users and roles. Start Keycloak using the following command.

docker-compose -f src/main/docker/keycloak.yml up -d

Start your application with ./gradlew (or ./mvnw if you chose Maven) and you should be able to log in using "admin/admin" for your credentials.

Open another terminal and prove all the end-to-end tests pass:

npm run e2e

If your environment is setup correctly, you’ll see output like the following:

> [email protected] e2e /Users/mraible/app
> protractor src/test/javascript/protractor.conf.js

[16:02:18] W/configParser - pattern ./e2e/entities/**/*.spec.ts did not match any files.
[16:02:18] I/launcher - Running 1 instances of WebDriver
[16:02:18] I/direct - Using ChromeDriver directly...


  account
    ✓ should fail to login with bad password
    ✓ should login successfully with admin account (1754ms)

  administration
    ✓ should load metrics
    ✓ should load health
    ✓ should load configuration
    ✓ should load audits
    ✓ should load logs


  7 passing (15s)

[16:02:36] I/launcher - 0 instance(s) of WebDriver still running
[16:02:36] I/launcher - chrome #01 passed
Execution time: 19 s.

OIDC with Okta and Spring Security

To switch to Okta, you’ll first need to create an OIDC app. If you don’t have an Okta Developer account, now is the time!

Log in to your Okta Developer account.

  • In the top menu, click on Applications
  • Click on Add Application
  • Select Web and click Next
  • Enter JHipster FTW! for the Name (this value doesn’t matter, so feel free to change it)
  • Change the Login redirect URI to be <a href="http://localhost:8080/login/oauth2/code/oidc" target="_blank">http://localhost:8080/login/oauth2/code/oidc</a>
  • Click Done, then Edit and add <a href="http://localhost:8080" target="_blank">http://localhost:8080</a> as a Logout redirect URI
  • Click Save

These are the steps you’ll need to complete for JHipster. Start your JHipster app using a command like the following:

SPRING_SECURITY_OAUTH2_CLIENT_PROVIDER_OIDC_ISSUER_URI=https://{yourOktaDomain}/oauth2/default \
  SPRING_SECURITY_OAUTH2_CLIENT_REGISTRATION_OIDC_CLIENT_ID=$clientId \
  SPRING_SECURITY_OAUTH2_CLIENT_REGISTRATION_OIDC_CLIENT_SECRET=$clientSecret ./gradlew

Create a Native App for Ionic

You’ll also need to create a Native app for Ionic. The reason for this is because Ionic for JHipster is configured to use PKCE(Proof Key for Code Exchange). The current Spring Security OIDC support in JHipster still requires a client secret. PKCE does not.

Go back to the Okta developer console and follow the steps below:

  • In the top menu, click on Applications
  • Click on Add Application
  • Select Native and click Next
  • Enter Ionic FTW! for the Name
  • Add Login redirect URIs: <a href="http://localhost:8100/implicit/callback" target="_blank">http://localhost:8100/implicit/callback</a> and dev.localhost.ionic:/callback
  • Click Done, then Edit and add Logout redirect URIs: <a href="http://localhost:8100/implicit/logout" target="_blank">http://localhost:8100/implicit/logout</a> and dev.localhost.ionic:/logout
  • Click Save

You’ll need the client ID from your Native app, so keep your browser tab open or copy/paste it somewhere.

Create Groups and Add Them as Claims to the ID Token

In order to login to your JHipster app, you’ll need to adjust your Okta authorization server to include a groups claim.

On Okta, navigate to Users > Groups. Create ROLE_ADMIN and ROLE_USER groups and add your account to them.

Navigate to API > Authorization Servers, click the Authorization Servers tab and edit the default one. Click the Claims tab and Add Claim. Name it "groups" or "roles" and include it in the ID Token. Set the value type to "Groups" and set the filter to be a Regex of .*. Click Create.

Navigate to <a href="http://localhost:8080" target="_blank">http://localhost:8080</a>, click sign in and you’ll be redirected to Okta to log in.

Enter the credentials you used to signup for your account, and you should be redirected back to your JHipster app.

Generate Entities for a Photo Gallery

Let’s enhance this example a bit and create a photo gallery that you can upload pictures to. Kinda like Flickr, but waaayyyy more primitive.

JHipster has a JDL (JHipster Domain Language) feature that allows you to model the data in your app, and generate entities from it. You can use its JDL Studio feature to do this online and save it locally once you’ve finished.

I created a data model for this app that has an Album, Photo, and Tag entities and set up relationships between them. Below is a screenshot of what it looks like in JDL Studio.

Copy the JDL below and save it in a photos.jdl file in the root directory of your project.

entity Album {
  title String required,
  description TextBlob,
  created Instant
}

entity Photo {
  title String required,
  description TextBlob,
  image ImageBlob required,
  taken Instant
}

entity Tag {
  name String required minlength(2)
}

relationship ManyToOne {
  Album{user(login)} to User,
  Photo{album(title)} to Album
}

relationship ManyToMany {
  Photo{tag(name)} to Tag{photo}
}

paginate Album with pagination
paginate Photo, Tag with infinite-scroll

You can generate entities and CRUD code (Java for Spring Boot; TypeScript and HTML for Angular) using the following command:

jhipster import-jdl photos.jdl

When prompted, type a to update existing files.

This process will create Liquibase changelog files (to create your database tables), entities, repositories, Spring MVC controllers, and all the Angular code that’s necessary to create, read, update, and delete your data objects. It’ll even generate Jest unit tests and Protractor end-to-end tests!

When the process completes, restart your app, and confirm that all your entities exist (and work) under the Entities menu.

You might notice that the entity list screen is pre-loaded with data. This is done by faker.js. To turn it off, edit src/main/resources/config/application-dev.yml, search for liquibase and set its contexts value to dev. I made this change in this example’s code and ran ./gradlew clean to clear the database.

liquibase:
  # Add 'faker' if you want the sample data to be loaded automatically
  contexts: dev

Develop a Mobile App with Ionic and Angular

Getting started with Ionic for JHipster is similar to JHipster. You simply have to install the Ionic CLI, Yeoman, the module itself, and run a command to create the app.

npm i -g [email protected] [email protected] yo
yo jhipster-ionic

If you have your app application at ~/app, you should run this command from your home directory (~). Ionic for JHipster will prompt you for the location of your backend application. Use mobile for your app’s name and app for the JHipster app’s location.

Type a when prompted to overwrite mobile/src/app/app.component.ts.

Open mobile/src/app/auth/auth.service.ts in an editor, search for data.clientId and replace it with the client ID from your Native app on Okta.

// try to get the oauth settings from the server
this.requestor.xhr({method: 'GET', url: AUTH_CONFIG_URI}).then(async (data: any) => {
  this.authConfig = {
    identity_client: '{yourClientId}',
    identity_server: data.issuer,
    redirect_url: redirectUri,
    end_session_redirect_url: logoutRedirectUri,
    scopes,
    usePkce: true
  };
  ...
}

When using Keycloak, this change is not necessary.### Add Claims to Access Token

In order to authentication successfully with your Ionic app, you have to do a bit more configuration in Okta. Since the Ionic client will only send an access token to JHipster, you need to 1) add a groups claim to the access token and 2) add a couple more claims so the user’s name will be available in JHipster.

Navigate to API > Authorization Servers, click the Authorization Servers tab and edit the default one. Click the Claims tab and Add Claim. Name it "groups" and include it in the Access Token. Set the value type to "Groups" and set the filter to be a Regex of .*. Click Create.

Add another claim, name it given_name, include it in the access token, use Expression in the value type, and set the value to user.firstName. Optionally, include it in the profile scope. Perform the same actions to create a family_name claim and use expression user.lastName.

When you are finished, your claims should look as follows.

Run the following commands to start your Ionic app.

cd mobile
ionic serve

You’ll see a screen with a sign-in button. Click on it, and you’ll be redirected to Okta to authenticate.

Now that you having log in working, you can use the entity generator to generate Ionic pages for your data model. Run the following commands (in your ~/mobile directory) to generate screens for your entities.

yo jhipster-ionic:entity album

When prompted to generate this entity from an existing one, type Y. Enter ../app as the path to your existing application. When prompted to regenerate entities and overwrite files, type Y. Enter a when asked about conflicting files.

Go back to your browser where your Ionic app is running (or restart it if you stopped it). Click on Entities on the bottom, then Albums. Click the blue + icon in the bottom corner, and add a new album.

Click the ✔️ in the top right corner to save your album. You’ll see a success message and it listed on the next screen.

Refresh your JHipster app’s album list and you’ll see it there too!

Generate code for the other entities using the following commands and the same answers as above.

yo jhipster-ionic:entity photo
yo jhipster-ionic:entity tag

Run Your Ionic App on iOS

To generate an iOS project for your Ionic application, run the following command:

ionic cordova prepare ios

When prompted to install the ios platform, type Y. When the process completes, open your project in Xcode:

open platforms/ios/MyApp.xcworkspace

You’ll need to configure code signing in the General tab, then you should be able to run your app in Simulator.

Log in to your Ionic app, tap Entities and view the list of photos.

Add a photo in the JHipster app at <a href="http://localhost:8080" target="_blank">http://localhost:8080</a>.

To see this new album in your Ionic app, pull down with your mouse to simulate the pull-to-refresh gesture on a phone. Looky there - it works!

There are some gestures you should know about on this screen. Clicking on the row will take you to a view screen where you can see the photo’s details. You can also swipe left to expose edit and delete buttons.

Run Your Ionic App on Android

Deploying your app on Android is very similar to iOS. In short:

  1. Make sure you’re using Java 8
  2. Run ionic cordova prepare android
  3. Open platforms/android in Android Studio, upgrade Gradle if prompted
  4. Set launchMode to singleTask in AndroidManifest.xml
  5. Start your app using Android Studio
  6. While your app is starting, run adb reverse tcp:8080 tcp:8080 so the emulator can talk to JHipster
Learn More About Ionic 4 and JHipster 6

Ionic is a nice way to leverage your web development skills to build mobile apps. You can do most of your development in the browser, and deploy to your device when you’re ready to test it. You can also just deploy your app as a PWA and not both to deploy it to an app store.

JHipster supports PWAs too, but I think Ionic apps look like native apps, which is a nice effect. There’s a lot more I could cover about JHipster and Ionic, but this should be enough to get you started.

You can find the source code for the application developed in this post on GitHub at @oktadeveloper/okta-ionic4-jhipster-example.

Thank you for reading!

Top Mobile App Development Agency in Massachusetts

Top Mobile App Development Agency in Massachusetts

**Looking for Top Mobile App Development Agency at reasonable rates?** AppClues Studio is one of the top Mobile App Development Agencies in Massachusetts. We offer user-oriented mobile solutions to our clients globally. We offer Mobile app...

Looking for Top Mobile App Development Agency at reasonable rates?

AppClues Studio is one of the top Mobile App Development Agencies in Massachusetts. We offer user-oriented mobile solutions to our clients globally.

We offer Mobile app development services like iOS app development, Android app development, M-commerce development, Cross-Platform mobile app development, AR & VR app development, IoT app development, Wallet app development, Hybrid app development etc.

Why Choose AppClues Studio?
• Domain Expertise
• On-time Delivery
• 24/7 Support
• Aesthetic Designs
• Agile Development
• Smooth Handover

If you looking for your mobile application development, then get in touch with us!
Visit: https://appcluesstudio.com/mobile-applications-development-company-massachusetts
Email: [email protected]
Contact No.: +1-978-309-9910