img-background

Auto update cordova applications in 3 steps

A step-by-step quick guide on how to allow a PhoneGap android application to upgrade new versions without Google play store or any auto-update plugins.

Auto update cordova applications in 3 steps

The following topics will be discussed in this post.

This post will quickly guide you through allowing auto-upgrade android apps to newer versions using PhoneGap and JavaScript from within the app itself (as shown in the screenshot below) without the need to the play store because it does not force the application to upgrade to the latest version.

By the time of this writing, I have been using the PhoneGap CLI version 6.3.4 to create a new mobile android app. The plugins applied across the whole post to force the application to upgrade are:

  1. Cordova app version: used to check the current application version.
  2. Cordova File: used to access the current device's storage folders to save files.
  3. Cordova android permission: used to allow the user to grant permission to the app to access the file storage.
  4. Cordova File Transfer: used to download external remote APK files.
  5. Web Intent: used to set up downloaded APK files.

Don't get overwhelmed by the number of plugins used as the whole operation code is super easy and makes sense everywhere it uses those plugins. As a first step make sure that you place the following plugin configurations in the app's config.xml so that PhoneGap installs the appropriate plugin versions used:

 <p><plugin name="cordova-plugin-file" source="npm" spec="~1.3.3" /> </p><p><plugin name="cordova-plugin-file-transfer" source="npm" spec="~0.5.0" /> </p><p><plugin name="cordova-plugin-app-version" source="npm" spec="~0.1.9" /> </p><p><plugin name="cordova-plugin-android-permissions" source="npm" spec="~0.10.0" /> </p><p><plugin name="WebIntent" value="com.borismus.webintent.WebIntent" /> </p>

Note: cordova-plugin-file and cordova-plugin-file-transfer plugins are not the latest versions. I have tried the newest version, but they never worked end to end saving the files on the device storage, but those older versions worked until the app saved those files into their destination folders. If you found the latest versions of those plugins working and saving your target files, then feel free to leave me a comment.

Once you have placed those plugins in your config.xml, you can run the command phonegap serve in your Node JS command prompt so that PhoneGap installs those plugins with their corresponding versions to your application's plugins folder. It's super easy installing those plugins using PhoneGap. Let's move to the next step, where those plugins will be used to do the overall force automatic update work.

Fast content approvals on our guest posts

Step 2 - The automatic APK update operation code

Before we get into the auto-update JavaScript code, let's explain the workflow first in the form of excellent and easy-to-understand steps that will connect the dots between the script used, and the required plugins mentioned earlier.

  1. The application will check the current app version and compare it to the latest version. (using the app version plugin - in 1)
  2. If the app version is not the most recent (which means it requires an update), then it will check if the current user allowed the storage permission. (using the permissions plugin - in 3)
  3. The user will grant the app the needed storage permission (as shown in the screenshot below)
  4. The application will download and save the latest version APK from a remote server. (using the file and file transfer plugins - in 2 and 4)
  5. The app will install the download APK from the remote server. (using the web intent plugin - in 5)

So now, let's jump into the code that does the above five steps and have some explanation around it. As we have discussed above, the first step in operation is checking for the current application version if it matches the latest version. The idea behind that is the app's latest version will be saved in a version.json file on a remote server in the following format:

"version": "3.3.5"

So in this case, the latest version is 3.3.5, and the app will perform a get request to that file and compare the version with the current application's version using the app-version plugin mentioned above in the plugins section.

  • hasLatestUpdate is a JavaScript function that will check if the current APK installed is the latest one and would call a callback function, passing the result to it as a parameter.
  • cordova.getAppVersion is the app-version plugin function asking for current installed app's version.
  • CommunityApp.dataAccess.callService(versionOptions); is the function that will perform the GET request AJAX operation. (you can find the code in the attachments section)

The other part of the code is the forceUpdate function that will use the hasLatestUpdate function as described in the five steps above.


Note: The code above is just for illustration purposes only, and it's very important to understand it rather than just copy/paste, though feel free to paste it into your application but take care of the unneeded parts of it and the pieces that will not make sense in your app.

  • window.requestFileSystem : requests a persistent file access to your current device storage.
  • permissions.hasPermission: checks if the current user has allowed the app to access the device storage.
  • permissions.requestPermission: allows the user to grant the app the requested storage permission, as shown in the screenshot.
  • fileTransfer.download: downloads the remote latest version APK file.
  • window.plugins.webintent.startActivity: installs the downloaded APK.

Get the whole code working in your app, and in case you have any questions, feel free to leave a comment.

What You Should Read Next

The following articles are related to auto update cordova applications in 3 steps.

The complete guide to migrating an existing Cordova application to a Cordova project on Visual Studio 2017 with building and running the app in 3 steps

A 6-steps super easy guide with commands that would walk you through building, signing and publishing an Android PhoneGap application to Google playstore.

Quick guide to fix the PhoneGap error "could not find any version that matches com.google.android.gms:play-services-g cm:9.8+" building android APK

Attachments
  data-access.js.txt
data-access.js code
Share:
img-background
Fady Soliman
Fady SolimanMember since
Jun 22, 2013
Loading...
Did you find this helpful?
9 Comments

Hey, thanks for sharing it, it's awesome

Hi , it ( seems ) perfect !!! but how to use it ?? can you provide an example , or is it for the top professional level of programmers ?

Iam getting error CommunityApp not defined why?

Hi Fady, unfortunately file data-access.js.txt in attachment can't accessible, could you please repair it?

Sir , Is the plugin cordova-plugin-file not supported in android version 6.3 and lower ? is there an alternative for the same ? thanks

Are you creating while opening the app on a browser? or using a device? These plugins must run natively on a device. To test it, download the "PhoneGap Developer" app on your phone from either the App store or Google Play and type in the server address and port - for example http://192.168.1.5:3000 - then wait until the app is rendered and test the plugin.

i am getting an error while while creating an object of fileTransfer it says that to be undefined , please help

Hi agam, CommunityApp.dataAccess.callService is just used to call external REST services. While checking the version of the app is done by the "hasLatestUpdate" function where it compares the current app version (using a Cordova plugin) with the live version written in the json file saved on the server.

Hi , can i get to know what " CommunityApp.dataAccess.callService " is? and how is it getting called while checking for the version as well as downloading the apk from the server ? Thanks

Leave your Comment
Loading...
Contact us now!
Loading...