How to convert an HTML5 project into a standalone Android application

A WebView is a mobile application that acts like a real-world window to a website. The user however doesn’t see any browser at all. One would ask: “OK! And what good is to have an application when the same website can be opened by just typing its address in the address-line of the browser?” The whole thing may sound like the ultimate nonsense but actually it is very interesting and useful. First of all, it offers to the user a simpler and friendlier way to open a website. That presentation has the advantage to be of a more professional look, since the webpage is opened without having on the screen the menus and the borders of the web-browser. Thus it is not the same like just creating a link-shortcut on the Home Screen of the mobile device. It can also be used, so that a website will be only a part of the functionality of an application, by first displaying to the user a UI navigation’s menu, like it is such an application called VMedia that I created for a friend who runs a web TV-station.

But that what is of more interesting is that a WebView application can encapsulate a local site with all sub-directories, including the ability to execute JavaScript programs.
In other words, such an application can turn a complete HTML5-project into a standalone package ready for uploading to the market, like it is Google Play or the App Store of Apple.

I will describe in this tutorial the case of creating a WebView application for the Android using the SDK, in the shortest way it can be done. It could come along with a whole bunch of other checking mechanisms (like error handling on loading, alert messages, progress bar, etc.) but I will write another tutorial for this reason.

For the lazy ones, there are several free tools (even online) that pick the main directory of an HTML/HTML5 project and produce an APK package from it but …if we always use tools, not knowing how to do it ourselves …then who’s gonna write the tools?

In the following, I will describe how I created a standalone application from an HTML5 game that I developed, called Spaceball.

For the history, I created the first version of this game using the SDK for Android (Java) in Eclipse and I put it to the Google Play Store https://play.google.com/store/apps/details?id=com.spaceball . After that, I decided to write it again using the very promising HTML5/JavaScript technology so that now it can be played in any device and in any operating system, just by opening this link: http://liknongames.com/spaceball/

It requires only a few simple steps in the Eclipse IDE (I think in Android Studio would not be much different) in order to archive the entire HTML5 project into an APK.

First …what else?… create an empty New Android Project.

Then drag with the mouse over the newly created “assets”-directory the entire root-directory that includes the html file that initiates the game. In my case this directory is called “Spaceball”
directory_spb

and this is how it in the project explorer looks now

eclipse_structure

I suppose you have already created an empty Activity-class. In case of my project I named this class “MainClass” (how genius!). Now, take the following snippet of code to feed the onCreate method, the one and only method that is required.

package com.spaceballwv;
import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.view.WindowManager;
import android.webkit.WebSettings;
import android.webkit.WebView;
public class MainClass extends Activity 
{
     WebView webview;
     Window window;
     @Override
     protected void onCreate(Bundle savedInstanceState)
     {
          super.onCreate(savedInstanceState);
          webview = new WebView(this);
          WebSettings settings = webview.getSettings();
          window  = getWindow();
          settings.setJavaScriptEnabled(true);
          window.setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN); 
          window.addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
          webview.loadUrl("file:///android_asset/spaceball/index.html");
          setContentView(webview);
     }
}
// (Yes, here is the end!) 

The decoding of this piece of source code is quite simple. The main idea is to replace the content of the displaying window with the WebView itself. This is performed by the setContentView method that is fed with the “webview” object. This object belongs to the class WebView and it is instantiated using the activity itself

webview = new WebView(this);

It is initialized with the index.html file we want to display

webview.loadUrl("file:///android_asset/spaceball/index.html");

The magic thing at this point is the declaration (in the loadUrl method) of the path that contains the previously dragged directory. The “file”///android_assets” points to the “assets” internal directory of the application. In case of a page that is located on the web, the path will be replaced of course with something started with http://…

Since my game is an HTML5 game it makes intensive use of JavaScript. By default the execution of JavaScript within a WebView is disabled and thus it has to be enabled.

First, we extract the settings of the recently created webview

WebSettings settings = webview.getSettings();

and having these setting it is very easy to enable the execution of JavaScript code

settings.setJavaScriptEnabled(true);

Our lonesome class is almost completed. Optionally, I raise two flags for the display. One is for keeping the screen always on.

window.addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);

and the other one is a request for exclusive use of the entire screen

window.setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN

well …that it!

Once the HTML5 project works fine in the external browser as a standalone page, then it is expected that it works even when it is running from inside the WebView application. That depends however on the implementation of the HTML5-project itself. If it make use of special features (of JavaScript,, CSS, or whatever else) that are supported only by specific browsers then this could lead to problems, since the WebView uses the core interpreter of the standard browser of the device. In any case, the best practice is to use methods that are supported by all browsers (refer to the w3c online documentation https://www.w3.org)

While developing (or, to be more precise: while typing…) the WebView-application, the logging from within the JavaScript is also there. The console.log function of JavaScript is traced in the LogCat of Eclipse with the WebCore tag.

D/WebCore(1988): Console: canvas.width=313 canvas.height=376 line: 348 source: file:///android_asset/spaceball/scripts/game.js
D/WebCore(1988): Console: STAGE.clientWidth= 313 line: 349 source: file:///android_asset/spaceball/scripts/game.js
D/WebCore(1988): Console: STAGE.clientHeight=380 line: 350 source: file:///android_asset/spaceball/scripts/game.jsD/WebCore(1988): Console: STAGE.offsetLeft= 0 line: 351 source: file:///android_asset/spaceball/scripts/game.js

You can download the SpaceballWV.APK and install it manually in your device to see all these in action.

Oh, not to forget it! The APK is an archive that can be opened using a regular compression utility (rar, zip,…), but if you want to see how the actual game is implemented in JavaScript, I will disappoint you, since the JavaScript code of the game is obfuscated 😉  So …it would take years to find out from there how it works. But there’s some good news! If you want to see how such an HTML5 game is created, simply read my tutorial about it. Create cross platform HTML5 games – Level 1



Theodosis Ekizoglou

Biography to be completed

More Posts - Website

Follow Me:
LinkedIn