Best Way to Publish a Web App for Android

Let's see how to publish a web app for Android. The main idea is to have one code base and generate a product for different platforms. We will use Ubuntu as a working environment and show an app example published in the Play Store of Google. The same approach can also be used for iOS or Windows.

Publishing a web app for Android poses lots of questions and problems which must be solved. So I decided to collect all this information and share it here. I hope this will help people who decide to go down the same path.

Apache Cordova is a development platform which can wrap up a web app and builds it for different devices. This way you can use technologies like HTML5 and JavaScript and you don't need to learn the native language and use a different development environment for each platform. It is open source and there are many plugins for all functionalities you need for a mobile device.

Creating, building and publishing the app is a long process. We will have to touch many topics here and the article is going to be long. Our final goal is to publish the app. This is how the app will look like in the Google Play store:



Getting started with Cordova

All the steps below are valid for Linux environment, in this case we use Ubuntu 22.04. All the listed commands below must be executed from the terminal.

• Installing Cordova

First you need to add the Ubuntu Cordova Personal Package Archive to your Ubuntu system:

sudo add-apt-repository ppa:cordova-ubuntu/ppa

After that you must run update to retrieve the latest package lists:

sudo apt-get update

Next you can already install Cordova:

sudo apt-get install cordova-cli

• Installing SDK and platforms

This can be done with different tools and packages. We will go for an installation of Android Studio which also has an SDK and platform manager. Later we can also use Android Studio to debug our app.

First you need to add the corresponding repository and run update:

sudo add-apt-repository ppa:maarten-fonville/android-studio
sudo apt update

Next you can install Android Studio:

sudo apt install android-studio

When you open the Android Studio you can use the SDK Manager to install a given API. Open the manager from the menu Tools -> SDK Manager. You can see an example here where we have Android SDK Platform 34 installed:



• Create a project and add a platform

Before you can build your web app, you must create a project in Cordova and add your web app inside.

cordova create hello com.example.hello HelloWorld

Move to project directory:

cd hello

Add a platform:

cordova platform add android

Here you can choose a specific platform version by typing it as follows: android@x.x.x where x.x.x is the given version of the platform.

• Adding your web app inside the Cordova project

The example project already contains an index.html and index.js files which are located in the www and www/js subdirectories. Inside www/ you can also put all the files of your web app. You will have to align the index.html yourself. Make sure to include index.js and use the provided onDeviceReady() handle to start your web app.

• Building

You can perform a simple build of the project with the following command inside your project:

cordova build

You can already deploy this app on your Android phone or debug it with Android Studio.

• Generate a signed bundle

If you plan to publish the app in Google Play Store you will need to generate a signed release. You first have to generate a keystore and store it somewhere safe. Later you have to generate each new release with this keystore.

You can generate a new keystore using Android Studio. That can be done if you select from the menu Build -> Generate Signed Bundle/APK. From the opened dialogue box you can choose Android App Bundle. Below the field for Key store path, click Create new. In the window which opens you have to fill in all the required data like path where to store, password, alias, etc.

Once you have your keystore you can run a command to create a signed bundle release:

cordova build android --release -- --keystore=xx.keystore --storePassword=xxxxxx --alias=xxx --password=xxxxxx --packageType=bundle

You must replace the relevant "xx" data of the command with the corresponding information of your own keystore. This will generate a signed bundle with extension .aab of the file.

Adding various plugins

• Screen Orientation

You can add this plugin to your project with the following command:

cordova plugin add cordova-plugin-screen-orientation

You can use this plugin to setup a default screen orientation of your app.

Status Bar

You can add this plugin to your project with the following command:

cordova plugin add cordova-plugin-statusbar

You can use this plugin to customize and hide the status bar, so your app can take the full size of the screen. If you just want to show the app in full screen you don't need to install this plugin and you can just add this this setting in config.xml:

<preference name="Fullscreen" value="true" />

• Consent

You can add this plugin to your project with the following command:

cordova plugin add cordova-plugin-consent

If you consider showing ads in Europe, Middle East, and Africa (EMEA), you must first ask the user for a consent. This plugin will give you the opportunity to implement that fairly easy. Remember that you must ask the user for a consent before you show an ad. The consent is made to get an agreement to show personalized ads. Even if the user disagrees, this counts as the consent is given and you can show none-personalized ads.

Another important point is that you must provide the user the possibility to reset his consent and change it. For this purpose you can add a button and insert its handler first reset the consent and then ask for a new consent. No approach to do this is described in the howto of the plug-in, so this seems like the best option.

• Admob

You can add this plugin to your project with the following command:

cordova plugin add admob-plus-cordova

This point is very important if you want to monetize your app by showing ads. You can use the Admob platform of Google to create ad units. After that you can show this ads inside your app. There are two main options for Android apps - interstital ad and reward ad. The interstital ad can be played on request from your app, and the reward app can be requested by an action from the user. As a result of watching the reward ad you can also give the user given small prize that can help him in the game.

You must be very careful, because many of the available plugins can steal your traffic without even telling you that. You can check a list which compares the plugin with some of the other available admob plugins here: Admob Cordova Plugins Comparisson. You can see from the list that all of the other plugins use sharing. Some of them claim to be open source but they actually include precompiled binaries.

Here you can check the full source code of the project:

https://github.com/admob-plus/admob-plus

The author of Admob Plus states his plugin is completely open source. You can use this plugin for free, however please consider donating a few bugs to the author when your app starts showing ads.

The documentation of Admob Plus https://admob-plus.github.io/ shares all the needed details how to setup an interstitial and a reward interstitial ad. Basically first you must request and load an ad. After that you will be free to show the ad whenever you decide to. Make sure not to show ads too often, otherwise your users might get annoyed.

• Social Share

You can add this plugin to your project with the following command:

cordova plugin add cordova-plugin-x-socialsharing

This plugin will help you reach more users. You can add a share button inside your app and use it to open the native sharing function of you Android phone. Like that you can give the opportunity to any user to share your app with his friend using his favorite chat or social network program.

• In-app rating and reviews

You can add this plugin to your project with the following command:

cordova plugin add cordova-launch-review

Try to ask your users to rate your app and write you a review right inside your app. Google might limit the amount of times you can request a review. So it's good to do that automatically and choose the right moment to do that - when the user has already seen and experienced enough of your app. It's not wise to add a rate button because as mentioned Google might just ignore the request and not show the rating dialogue window.

Configurations

You must pay attention to some of the main configurations in the project. Check the config.xml file located in the main directory of the project. There you can change the following settings of the app:

- version and android version code: each release that you upload in Google Play store must have a unique version and version code.

- name of the app - the name of the app that will be displayed when installed in the device.

- icon - you can put your icon inside the project and set the path to it here.

You can add here additional plugin specific settings, like for example configure the status bar in case you have installed the status bar plugin:

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#AAFFFFFF" />

Publishing the app in Google Play Store

• Create a Google Play Console account



First of all you have to create an account in Google Play Console. It's very important what type of an account you will select - business or private developer. The publishing process for a private account is a bit more difficult, but we will share with you a few tips how you can solve the difficulties.

There is a long list with questions and information you need to fill in. After you are ready, you must get your account verified and approved, before you can publish a mobile app for Android.

• Create an App



Creating an app is already possible before your account get approved, but you just cannot publish it yet. There is also a small one time fee which you will have to pay. This is a lot more acceptable in comparison to the Apple Store development account, where you need to pay a lot bigger fee each year.

Let's have a look at some points during the publishing of your app. First you must create a new app and add images, description and other details. When you are done with the formality you can also upload an app bundle. This is the file with "aab" extension which you generated previously with Cordova. Remember that it must be properly signed before uploading it, otherwise you will get an error. Use the bundle explorer to upload a new bundle. Once this step is done, you can go and create a new release.

• Testing release

Here we come to a small difficulty if you have a private account. Since 2023 Google requires all apps to run a closed test with at least 20 developers for 14 days. This means you must create a closed test release and invite 20 people to install your app and participate in your test for 14 days. Once you create the release, you can give access to your developers by adding their emails which they use with Google Play Store. Once they have access activated, you can give them a link to your app and they can install it.

Thankfully there are also online platforms like peertest.com where people help each other to get through the closed test. You can create an account there and participate in the test release of 20 other apps, reach released app will give you a star. Once you get 20 starts you can publish your app and collect the required testers. Remember that the main idea is also to get some feedback so you can improve your app before releasing it.

Example app build with Apache Cordova for Android

Here will also review an app which is build with Apache Cordova for Android. As mentioned before Cordova supports also other platforms.

• Game app

Find the Nightingale is a puzzle game by Riongames where you must find hidden objects. It has an unique gameplay since it's not an ordinary hidden objects game. Here some of the targets will be moving. The main objects to find are cute little fruits which have human features and walk around or just stay around.



This fun game is available for free both online and in Google Play Store:
- Find the Nightingale online version - here you can play 12 levels for free.
- Find the Nightingale in Google Play Store - play 20 levels for free in the Android version of the game.



Each level of the game will take you to a different location. You will meet many cute little fruit. Your time will be limited so you must find all the objects as fast as you can in order to proceed. The final goal is to find where the nightingale lives and hear its magical song. You can play this free fun game both online and on an Android device. The game is suitable for little children and at the same time challenging for grown-ups.



This fun free game includes also a short comics story which you can follow. There are three comics slides plus one final scene at the end of the game.

You can also enjoy unique fun music made specially for the game. Original recordings of birds singing are adding more sound effects in the game.

Here you can see a short gameplay of the online version of the game:



• Technical realization

As expected this fun free game is first developed with HTML5 and JavaScript. After that it's built with Apache Cordova for Android. The game uses all the plugins mentioned above and you can see them all in action inside. First when you start the game you will be shown a consent dialogue if you are located inside EMEA. There is a button to review your consent agreement and change it in the main menu. When you finish the first level of the game and return to the main menu you will be asked to rate the game. Your support with a rating and review would be highly appreciated! You can also see a Share button in the levels map of the game. If you continue playing you can see the admob plugin showing an ad after the end of a level. The frequency of the ads is limited so it does not show ads too often. If you fail to finish a level you will see a button to watch a reward video ad and get extra 30 seconds.

You can take advantage of this opportunity and install the game to have a look how each of these plugins is working in reality.

Please share any thoughts in the comments. Did you use this or another approach for cross platform development to publish a mobile app?