Complete Guide: How To Build Apps For Jio Phone?

Building apps for Jio Phone is extremely easy if you already know some web development. The first thing you need to know is that Jio phones run on the Kaios platform which is forked from B2G (Boot to Gecko), a successor of the discontinued Firefox OS. In this blog, we’ll learn some core concepts and We’ll Build Apps For Jio Phone.

Why?

The total number of feature phone users in India is about 300–350 million and Jio is soon going to capture most of them. It already has 25–30 million users and the number will only increase. So it makes sense to build apps for Jio phones to capture a massive audience.

About KaiOS

KaiOS is a web-based mobile operating system that enables a new category of smart feature phones.
KaiOS brings support of 4G/LTE, GPS, and Wi-Fi, as well as HTML5-based apps and longer battery life, to non-touch devices. It has an optimized user interface for smart feature phones, needs little memory, and consumes less energy than other operating systems. It also comes with the KaiStore, which enables users to download applications in categories like social media, games, navigation, and streaming entertainment.

KaiOS apps are based on web technologies — HTML, CSS, and JavaScript and are run by Gecko runtime. If you have written a web page you already know the basics.

Rendering is done by parsing HTML/CSS and painted using graphic APIs. JavaScript is executed by the JS engine SpiderMonkey and connected to C++ components by XPConnect and WebIDL bindings. Applications and the core process communicate only through IPC protocols defined by IPDL.

Additionally, a set of core components including file and memory management, threads and data structures, etc. are provided through the XPCOM component object model.

Requirements:

1. Firefox version 59.
2. ADB for running app on Jio phone.
3. Jio phone.
4. A simple web app.
5. manifest.wepapp file in your web app’s root directory.

You can reference os-env-setup for setting up the environment.

Manifest

The manifest.webapp file provides important information about the app, such as version, name, description, icon location, locale strings, domains the app can be installed from, and much more. Most importantly, it contains a list of APIs that your app needs. This allows users to make informed decisions about apps before installing them.

Your app’s manifest.webapp file should be placed in the root of your app directory, and contain a simple JSON structure. A simple App Manifest JSON looks like this:

{
	"version": "1.0.0",
	"name": "KaiOS App",
	"description": "A file simple example manifest.webapp",
	"type": "web",
	"launch_path": "/your/repository/index.html",
	"icons": {
		"56": "/your/repository/icons/ic_Appname_56.png",
		"112": "/your/repository/icons/ic_Appname_112.png"
	},
	"developer": {
		"name": "Your Name",
		"url": "http://yourawesomeapp.com"
	},
	"locales": {
		"en-US": {
			"name": "KaiOS App",
			"subtitle": "Short description for the user",
			"description": "Brief description of your app"
		}
	},
	"default_locale": "en-US"
}

You may reference the manifest for more information on the manifest file.

Some important things to consider

Softkeys

The software key appears at the bottom of the screen, which corresponds to the centre, right, and left hardware keys. Each key may or may not appear depending on the availability of features. In this case, the softkeys are:- Menu, View, and Back respectively. You can use these keys by adding event listeners on the document object for these key presses. Additionally, you can use Up/Down/Left/Right and any other key as per your requirement. You can read more about implementation in the documentation.

D-Pad Navigation

On non-touch devices, the preferred method of app navigation is to use the available hardware keys.

KaiOS feature phones generally come up with 4 directional arrow keys and confirmation keys. In the image below, the second item is highlighted in blue colour. you can easily navigate through these items with up/down/left/right arrows and select them with the OK(centre) key. You can play around with this example at http://jio.changa.in/app/search. More information on implementation can be found in the documentation.

The Menu

Suppose you have 5–6 routes in your app. How’s the user supposed to navigate through these routes? Here comes the menu route, you can route the user to the menu page by clicking the SoftRight key. In this example, we can easily navigate to all the pages from this menu page.

Multiple Resolutions

Applications on KaiOS should adapt to different resolutions. Current KaiOS devices support QVGA resolutions in portrait (240×320 pixels) or landscape (320×240 pixels). So while building your application, make sure that it looks good on the said resolutions(I personally got into a lot of trouble due to this?).

Push Notifications

Push notifications in Kaios can be implemented with W3C Push API. You can also use service workers with notifications to allow notifications while the app is not running(This thing is really cool?).

Note: You can’t use firebase cloud messaging(FCM) here as of now.

App Permissions

The permissions field in the app manifest controls the app’s access to various sensitive APIs on the device (sometimes called WebAPIs) e.g. audio-capture, camera, contacts, NFC-share(This is something really amazing?). The permissions are described in the following tables. The three levels of permission, in brief, are:

• Web apps: These only have a basic level of permissions, and don’t have access to privileged or internal APIs.
• Privileged apps: These have all the permissions of web apps plus more. Hosted apps can’t be privileged — they must be packaged apps.

Design Guide

The app we’re building is for a low-end feature phone. Having a consistent design across the application is really important. To do so, you can go through the design guide provided by Kaios.

Building a sample timer app

1. Make a file index.html and paste this code.

< body id = "app" >
	<
	style >
	*
	{
		margin: 0;
		padding: 0;
	}
nav {
	background: violet;
	color: white;
	position: fixed;
	width: 100 vw;
	display: flex;
	justify - content: center;
	height: 30 px;
}
footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100 % ;
	background - color: red;
	color: white;
	text - align: center;
	display: flex;
	justify - content: space - around;
}
#content {
	font - size: 30 px;
	color: black;
	background - color: lightgrey;
	display: flex;
	justify - content: center;
} <
/style> <
nav > Timer app < /nav> <
	div
style = " display: flex; justify-content: center; flex-direction: column; height: 100vh; background-color: lightgrey;" >
	<
	div id = "content" >
	<
	/div> <
	/div> <
	footer class = "softkey" >
	<
	div id = "softkey-left" > < /div> <
	div id = "softkey-center" > Play / Pause < /div> <
	div id = "softkey-right" > Reset < /div> <
	/footer> <
	script >
	let ref = {
		time: 0,
		interval: null
	};
const reset = () => {
	if (ref.interval) {
		ref.time = 0;
		clearInterval(ref.interval);
		ref.interval = null;
		document.getElementById("content").innerHTML = ref.time;
	}
}
const increment = () => {
	console.log(ref.time);
	ref.time += 1;
	document.getElementById("content").innerHTML = ref.time;
}
const play = () => {
	if (ref.interval) {
		clearInterval(ref.interval);
		ref.interval = null;
	} else {
		ref.interval = setInterval(increment, 1000);
	}
}
play();
const softkeyCallback = {
	left: function() {
		console.log('You click on SoftLeft')
	},
	center: play,
	right: reset
};

function handleKeyDown(evt) {
	switch (evt.key) {
		case 'SoftLeft':
			// Action case press left key
			softkeyCallback.left();
			break;
		case 'SoftRight':
			// Action case press right key
			softkeyCallback.right();
			break;
		case 'Enter':
			// Action case press center key
			softkeyCallback.center();
			break;
	}
};
document.addEventListener('keydown', handleKeyDown); <
/script> <
/body>

2. Insert manifest. web app file in the same directory as index.html.

Install your first app(Windows)

1. Open Firefox Web IDE and make sure you have connected your device and executed the commands. To start the WebIDE open up Firefox and click on the icon in the top right that looks like a globe behind a pencil or simply press shift+F8 and the WebIDE will open in a new window.

$ adb root
$ adb forward tcp:6000 localfilesystem:/data/local/debugger-socket

2. If you have packaged app stored on your laptop, click “Open Packaged App” on the left side and select your project folder.

3. Your project folder must have a manifest.web app file. Otherwise, the IDE cannot open your app. Check here to create a manifest.web app file.

4. After selecting your app, you should be able to see your app.

5. Install the app on your device with the RUN button and Debugger button to debug the top centre of WebIDE.

6. Install the app.

7. Then, you are available to use the basic tools in the web IDE for development, such as Inspector, Console, JavaScript Debugger, Style Editor, and Scratchpad.

8. Note: While running the app, you might see a black or white screen showing nothing on the mobile. Run the app a couple more times and that should work fine. If it doesn’t, you might want to check the console on WebIDE.

Conclusion

Building apps for Jio phones is really easy and worth it. If marketed well, you can gain a massive audience and in turn, good money. Hope you have learned something from this blog. We, at Codersera, aim to provide you with quality solutions and information that may come in handy to you each time.

For the initial launch, you can also use Firefox Emulator 2.2 (stable). It is now time to upload your first application to KaiOS. You can build your app in any client-side JS framework, such as Angular, React, or even plain javascript, but the most important thing is that it has a manifest.

The OS has an HTML5-based app store and is designed for non-touch phones. The KaiOS will be available for the first time on the JioPhone in India.

KaiOS does not support Android apps. These apps need to be adapted to HTML5-based apps that can run on the KaiOS platform.

KaiOS is an open-source platform and the world’s first mobile operating system for feature phones, complete with a marketplace for common apps and locally relevant content.

FAQ