Developing Google chrome & Android apps with HTML5

  • Cubettech
  • Mobile Application Development
  • 10 years ago

HTML5 is one of the renowned and latest versions of markup language which is primarily used for the purpose of structuring and catering content for the web. The latest version of the HTML i.e. the HTML5 has been devised with the core aim of improving the coding language in such a manner that it is compatible with the latest multimedia while being easily understandable by humans as well as computers. As a matter of fact, HTML5 is a markup language that will enable you to formulate several prototypes in a jiffy. HTML5 comes with tons of advantages and functionalities. Continue reading to get an insight on how HTML5 can be used to develop chrome and android apps.

When it comes to developing applications or games one of the critical factors that you will face is its distribution. As similar to Android and iOS which has Play Store and App Store respectively, Google comes with a Store which is powered by HTML5 for highlighting both Apps and games. With Google Chrome, you can publish both web and mobile apps for the respective Web Browser and its operating system i.e. Chrome OS which again is an HTML5 based OS.

The first step is to install the development tools
Required features for all platforms:
Node.js from a version from or above 0.10.0 with npm.
– You can install the application via executables downloaded from nodejs.org.
get these via apt-get install ia32-libs.
Apache Ant
-Add apache-ant-x.x.x/bin to your PATH environment variable.

For creating a web app in Chrome, we initially need a manifest.json file which is described as follows:

When creating packaged apps, you need an additional JavaScript file which looks like this:
curl https://raw.github.com/creationix/nvm/master/install.sh | sh
source ~/.bash_profile || source ~/.profile || source ~/.bashrc
nvm install 0.10
nvm alias default 0.1
Android Application
In addition to installing Node.js, you also need to install some additional applications when planning to create an Android application.

The packages to be installled are:

– Java JDK (from version 7 or higher)
-Android SDK (from version 4.4.2 or higher)

Steps:

-Install all the developer tools associated with the android development tool bundle. Also install the android SDK.
-Add sdk/tools and sdk/platform-tools to your PATH environment variable.
-OS X: The Eclipse version that is embedded with the Android SDK will need JRE6. You need to install this via the relevant app store.
-Linux: The Android SDK needs 32 bit support libraries. When using Ubuntu, you can {
“name”: “Hello World!”,
“description”: “My first Chrome App.”,
“version”: “0.1”,
“manifest_version”: 2,
“app”: {
“background”: {
“scripts”: [“background.js”]
}
},
“icons”: { “16”: “calculator-16.png”, “128”: “calculator-128.png” }
}
Important: Chrome Apps must use manifest version 2.

chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create(‘window.html’, {
‘bounds’: {
‘width’: 400,
‘height’: 500
}
});
});

window.html

<!DOCTYPE html>

<html>

 <head>

 </head>

 <body>

   <div>Hello, world!</div>

 </body>

</html>

 You can run the App in the chrome by using the “Customize and Control Google Chrome” option seen on the top right side of the browser.

Converting the developed Chrome Application
Converting a Chrome Application to make it compatible with Google Play and/or the Apple App Store can always help you to create a huge audience. Given below are the steps to develop Android Application using HTML5.

Cca command-line tool installation

Step 1: Install cca via npm via the following command line:
npm install -g cca
Use the command line given below to check whether the installation was successful:
cca checkenv

Step 2: project creation
Create a Chrome Application in a directory with the name MyApp, use the below command line:
cca create MyApp
If you already created a Chrome App, you can use the below command line to port it to a mobile platform.
cca create YourApp –link-to=path/to/manifest.json
Use the command line to copy the existing Chrome App files.
cca create YourApp –copy-from=path/to/manifest.json

Step 3: Development
You can build and run the application by using a cca tool.
Android app is run on respective emulator i.e. cca emulate android.
This emulator can be set up by running an android avd.
For the cause of running the app on a connected Android device you can use the command: cca run android

Step 4: Improving mobile experience
You can always improve the experience of the mobile Chrome App that you just created on mobile devices using the Chrome App setting relevant for mobile platforms only. These are generally contained in the www/manifest.mobile.json file.
You can adjust the values as per your requirements:
Icons
When it comes to mobile app icons, you need a bit more resolutions when compared to the desktop Chrome Apps.
The general icon size for Android are mentioned below:
– 36px, 48px, 78px, 96px
A complete icon list would look like this in your manifest.json file:

“icons”: {
“16”: “assets/icons/icon16.png”,
“36”: “assets/icons/icon36.png”,
“48”: “assets/icons/icon48.png”,
“57”: “assets/icons/icon57.png”,
“72”: “assets/icons/icon72.png”,
“78”: “assets/icons/icon78.png”,
“96”: “assets/icons/icon96.png”,
“114”: “assets/icons/icon114.png”,
“120”: “assets/icons/icon120.png”,
“128”: “assets/icons/icon128.png”,
“144”: “assets/icons/icon144.png”,
“152”: “assets/icons/icon152.png”
}
These icons are supposed to be extracted into respective places for relevant platforms each time you run cca prepare.

Step 5: publishing
Follow the below given steps to publish the Android Application
1. run cca prepare after updating the two Android version ids.
The element ‘android:versionName’ can be set up via the version key given in the www/manifest.json.
android:versionCode can be set via the versionCode key in the
2. Edit (or create) platforms/android/ant.properties and set the key.store and key.alias.
3. Build your project:
./platforms/android/cordova/build –release
4. Find your signed .apk located inside platforms/android/ant-build/.
5. Upload your signed application to the Google Play developer console.
Packaging
For packaging the app, you need to use the option “Package”. When you use this option, the packager developes two files ie a .crx file (installation file) and a .pem file (comprising of private key). Make it a point to keep the .pem file confidential.

Packaging at the command line:

Use the below given code to pack extensions by invoking chrome.exe.
chrome.exe –pack-extension=C:\myext –pack-extension-key=C:\myext.pem

Know More About This Topic from our Techies

Got a similar project idea?

Connect with us & let’s start the journey!

Questions about our products and services?

We're here to support you.

Staff augmentation is a flexible workforce strategy companies adopt to meet specific project needs or address skill gaps.

Begin your journey!
Need more help?