package id using the Cordova and Ionic Native plugin. Also, we will discuss how to change the version of the Ionic application for the next production release.
In the Ionic application, we may need application-related information like Application Name, Package Name/ID, Version Code, and Version Number.
As some of these values related to the application are dynamic and change every time we create a build for production, it becomes difficult to manually manage these values.
This gives a user information about the current version and control user experience if there is an update available. In Ionic we can get these values dynamically using a Cordova and Native plugins, it enables Ionic applications to fetch current version name and code.
Here we will create an Ionic Application to demonstrate Ionic Native’s App Version Plugin.
Let’s get started!
Install or Update Ionic CLI
To create Ionic applications, you need to install @ionic/cli package. If already have updated it to the latest version
$ npm install -g @ionic/cli
Create new Ionic Angular Application
We’ll create a new Ionic 5 application using Angular framework with a starter blank template.
Next, we need to import the AppVersion class in the App Module to make its methods accessible in the application components.
Open the app.module.ts file, import the AppVersion class then add in the providers array
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';
import { AppVersion } from '@ionic-native/app-version/ngx';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
AppVersion,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
Getting App Version and Other Information
After adding AppVersion in the app’s module, we will use this plugin in our Home Component.
Update Home Component
In the home.page.ts class file, we will define four variables to save values returned from methods of AppVersion class
The getVersionCode() returns the build identifier of the app. In iOS a string with the build version like “1.6095” In Android a number generated from the version string, like 10203 for version “1.2.3”
Now we’ll discuss how to change the current version of Ionic application to release in productions. To update the Application executable file like APK for Android we need to update the version code.
To change it open the config.xml file at the project root folder.
On the first tag <widget> you will see some important values related to the application like
id="io.ionic.starter" : The application package name/ ID.
version="0.0.1" : This is the version code that you need to change to “0.0.2” for example to release for next version on production or play store.
The <name>MyApp</name>is shown on the mobile screen after the installs your application.
The <author> tag having author-related information.
Conclusion
This is how we can get app-related information dynamically like Application Version Code, Package ID/Name, etc by installing the App Version naive plugin.
This can be useful to display the Application’s current version in About section or check if current version of application is the latest one or not to display the update application message inside the application.
You can check this post to update the application by directly downloading the APK file for Android application without leaving the application using Native plugin.
Please share your feedback. Thanks for reading…
Ionic Range Slider with draggable tick icons on the scaling bar; In this Ionic 5 tutorial, you will learn how to add a Range slider using the build-in UI components in the Ionic Angular application. A range slider component consists of draggable markers, which can be dragged on a defined bar to select a value. … Ionic 5 Range Slider…
In this tutorial, we will be discussing how to add Auth Guards in an Ionic 6 Angular application to limit page access. Auth Guards are used to restrict access to certain pages in the app based on user authentication status. This can be useful for pages that contain sensitive information or require a user to … Ionic 6: Adding Auth…
In this Ionic 5/6 tutorial, you will learn how to add Google Maps in the Ionic application using the latest @angular/google-maps package module by following a few easy steps. Google Maps implementation tutorial using @angular/google-maps 2022. The Google Map will have places search bar and Geocoder to display the address where the marker is dragged. … Ionic 6 Google Map,…
In this tutorial, we will be discussing how to integrate Admob Plus Cordova plugin in an Ionic 6 Angular application. Admob Plus is a Cordova plugin that allows you to monetize your mobile app by displaying ads from Google Admob. This plugin supports both Android and iOS platforms. How to Add Admob Plus in … Ionic 6 Admob Plus…
In this Ionic tutorial, you will learn how to migrate the Ionic Content Slider to the latest v6 implementation. Ionic Framework used Swiper Js slider in its slider till version 5. In which it creates its own Ionic-Swiper UI components to facilities Ionic developers. But in the latest version 6, the Ionic team has decided … Ionic 6 Slides using…
While running any of the following commands: cordova requirements android --verbose ionic cordova build android you may face an issue saying: Error: Cannot find module ‘cordova-android’
You may see this issue while building the Ionic Cordova application for Android * What went wrong: A problem occurred evaluating script. > No usable Android build tools found. Highest 30.x installed version is 30.0.2; Recommended version is 30.0.3.
1 thought on “Ionic 5 Check App Version Name, Code and Package Name Using Ionic Native Plugin”
Jorge Almeida
can probably use this by now:
npm install –save @ionic-native/app-version
can probably use this by now:
npm install –save @ionic-native/app-version