Ionic 4 | In App Version Check and Updater Dialog using App Update Native Plugin

Whenever we update APK with the latest version on Playstore, it remains unpredictable if users have upgraded to the latest version or not. So there is a possibility that most of them may have not opted for auto application update in Playstore application.

So as a solution to let the user know there is an updated version available, on application start we will show a Dialog box to prompt the user that there is an update available with OK and Cancel buttons.

On ‘Ok’ user will not be redirected to PlayStore but updated APK will be downloaded from a specified path and application will be upgraded.

In Ionic Application, we will create such behavior for auto-upgrade in the application by downloading the latest APK, after the user confirms on Prompt Dialog box.

Let’s get started with a new Ionic 4 Application

Create a New Application

First, create a new Ionic 4 application with a blank template using the Ionic CLI tool.

Install Native and Cordova Plugins

Next, we will install Cordova and Native wrapper for App Update plugin which will check the version code if there is any mismatch it will prompt ser to upgrade application.

Run the following commands to install the plugin:

Import Plugin in App Module

To make this plugin available throughout the app, we will import AppUpdate class in the app.module.ts file then update the Providers array as shown below:

Host XML file to a server

App Update plugin makes an HTTP call to an XML file which contains the Version Code of latest updated Application along with updated APK file path:
If our application’s config.xml is defined with version as “5.2.1” which looks like:

Then we will upload my_app_update.xml file on your hosting space with following XML code:

Note: We also need to upload APK file and specify its absolute path in XML file above.

Check App Version in Application

In our application, app component is loaded first when the app starts so we will add the following code to check the version and download the latest update if their version code is different.

How to test Version Update Plugin?

Step 1) Follow the above steps to install the plugin and make changes in the application.

Step 2) Create APK by running build Command (with version="5.2.1" in config.xml file for example)

 

Step 3) Upload my_app_update.xml file(with any name) on the server with APK (app-build.apk) on the server with the following code:

In this case, the user will not be prompt for an update as the version in config.xml in app and my_app_update.xml are same.

Step 4) Now make a change in config.xml with version="5.2.2" and my_app_update.xml with <version>50202</version>.

Now rebuild APK file then upload to server.

Step 5) Next when you will open previously installed app on the device, it will prompt for an update as the currently installed version is 5.2.1 and my_app_update.xml is having 50202

That’s it! now users can easily update version from the app it self. And developers also relax to know that their users will get updated bug-free version as they run the app.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

2
Leave a Reply

avatar
1 Comment threads
1 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Roman Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Roman
Guest
Roman

Nice article. Unfortunately, didn’t find it earlier.

I’m trying to implement app update in Ionic 3 with [email protected].0.
Plugin prompts for update, but installation of application fails. However, I could install updated apk manually by deleting existing app and click on new .apk file in downloads.

Any suggestions?

Roman
Guest
Roman

Answering myself 😀

I figured out how to solve it.
The problem was that I launch apk in Android Device Manager through command “ionic cordova emulate android”. After I installed my apk directly in AVD it updates successfully. So I made conclusion that emulation has some kind of protection that leads to app update fail.

Leave it here in case someone face with the same problem.