KaiOS: Everything you need to know

April 08, 2021 by Huzaifa Arif
KaiOS: Everything you need to know

I’ve been tinkering with the KaiOS platform for some time now and in this post, I’ll try to sum up everything that I’ve learned about it — its application ecosystem, devices, and basically, everything that would help you to:

  • Get an insight into KaiOS.
  • Get an idea of how the feature phone ecosystem could benefit your product.
  • Get started with app development for KaiOS.

So let’s begin!

Intro to KaiOS

KaiOS is an operating system targeted towards feature phones. It allows the use of web technologies like HTML, CSS, and Javascript to develop applications for low-end devices that have limited storage, power, and screen sizes, and no touch support (though there is reportedly a KaiOS Touch version somewhere around the corner).

It is actually a fork of the, now deprecated, Firefox OS (codenamed Boot to Gecko), and basically uses the same architecture as its predecessor.

KaiOS uses Firefox v48 (in the latest stable release v2.2.0) to run web applications, basically using it as its JS runtime and rendering engine on top of a Linux kernel. More info on this can be found here.

Its technical details notwithstanding, KaiOS — with its limited support for the cutting edge JS features that are supported by all modern browsers — may appear to be outdated. This may also lead to a probable conclusion that the OS is not being maintained, because otherwise, they would have updated the Firefox version at least, right?

Well, not exactly! KaiOS depends on extensive support for Web APIs and Web Activities, which were also core to its predecessor — B2G. Now some of these Web Activities have been deprecated since B2G, and hence, upgrading the underlying Firefox version may mean losing those functionalities which are essential for app-to-device and inter-app communication on the KaiOS platform.

PS: The official documentation does mention that KaiOS supports Firefox up to v59 for development.

Is KaiOS worth developing for?

I imagine you’re asking — “Why should I care about a mobile OS that I haven’t heard about, seen anyone using, or used myself?”. Well, the answer lies in the target audience and actual adoption figures for the platform, and these might take you by surprise.

KaiOS is the third-largest mobile OS by market share in the world and the second most used OS in India, thanks to the Jio Phone lineup.

KaiOS_infographic.png

To understand the phenomenal growth of the platform, we need to look at the company’s goal, which is to get the next billion online. This demographic includes people from developing countries who have never used a smartphone before and can’t get a hold of one for a multitude of reasons.

Apart from the reach that KaiOS offers, another very compelling reason to build for KaiOS is the extremely low bar for entry.

  1. What I mean by this is that technically, any web application is capable of running on KaiOS, given just a couple of constraints or modifications. Also, all the dev tools required — the simulator, sample code for Vanilla JS, React, etc. — are also provided for free.
  2. Apart from the low development overhead is the fact that the KaiStore and developer access is also completely free. Yep! That means no registration or yearly fees!
  3. KaiOS also provides free QA and email support with a relatively decent turnaround time.

If that doesn’t tickle your curiosity, it might be helpful to note that several key players have partnerships with KaiOS, some of whom have their apps on the KaiStore already.

Want names? Well, try Facebook, YouTube, Google Assistant, Google Maps, or WhatsApp!

Is this really a Gold Rush?

Okay, so now I hear you ask — if it’s such an amazing opportunity with such a low bar for entry, why aren’t more people going after their slice of the pie here? And that’s a very valid question.

The answer lies in how the KaiOS ecosystem handles monetization on its store, which, to be honest, isn’t very lucrative.

Currently, the only way to monetize applications on the KaiStore is by integrating their homegrown KaiAds SDK. In the very minimal sense, you can think of it as a counterpart to Google’s AdSense.

So in short, you need to add this SDK to your app and probably link it to a container element (for non-full-screen ads), and then trigger the ads on either user action or page load/transition, etc.

NOTE: Integrating the KaiAds SDK is also sort of mandatory, as KaiOS recommends that you always monetize your apps, and if you don’t want to, you’ll have to give a reason while submitting your app to the KaiStore for review.

Now, this approach has a few glaring issues:

  1. Having advertisements as the only source of revenue with no paid apps support (yet!) is definitely not gonna sit well with many.
  2. KaiAds doesn’t necessarily cater to the user’s interests as it lacks the boatload of data that Google’s AdSense has, and can’t show ads that are relevant to the user from the get-go. Hence, your Ads impressions might be quite low.
  3. Revenue is controlled by KaiOS. So all impressions get credited to your KaiAds account (which has a pretty bare-bones dashboard for insights on your ads impressions), but you can only cash out once you hit the $500 mark. Now that’s a pretty steep incline given the lack of relevant ads and the scarce user base your app will probably have. And after all of that, KaiOS will keep a whopping 70% of the revenue. Yikes!

    Here, is a link to an official response from the KaiOS team on a Reddit thread addressing the issue. To be fair, some of their points do actually make sense when you look at the bigger picture. #JustSaying!

Also, here are some best practices that KaiOS suggests for app monetization on their platform.

Now that we have that out of the way, let’s talk development.

Getting started with KaiOS App Development

TL;DR

To get your existing web app to work on a KaiOS device, you just need to consider the following 3 things:

  1. Add a manifest.webapp to your project
  2. Make sure your app handles small screens and low resolutions well. Typical KaiOS device resolution is 240 x 320 (QVGA) in portrait mode.
  3. Handle keyboard (tab/D-pad) navigation
  4. PS: Make sure you have the correct polyfills (which, if you already have taken care of cross-browser compatibility, shouldn’t be a daunting task)

Tools for Dev Environment:

For the development environment you have 2 paths to choose from:

  1. Getting a physical device (recommended)
  2. Working with a simulator (has limitations)

Physical Device setup:

If working with a physical device, you’d probably need the following installed and configured:

  1. ADB (Android debug bridge)
  2. Firefox v59 or earlier

To break it down, Firefox is required to be used as a Web IDE from where to install your application on the test device and debug it using Firefox’s Developer tools (since the app is essentially a web application)

ADB is required for setting up the communication channel between your device and Firefox.

Detailed instructions for installing and setting up Firefox and ADB can be found here.

And here’s another very helpful article for troubleshooting USB debugging issues.

Simulator setup:

There are basically 2 simulators available that could enable you to get started with KaiOS development without a physical device:

  1. Official KaiOS Simulator (Linux only, recommended)
  2. Palemoon Browser (Windows/Linux — really a Firefox OS simulator, with a much older Firefox version)

Note that using a simulator would certainly limit you, as it is not adequate for testing device APIs.

Instructions for installing and using the simulator can be found here.

Application Basics:

The manifest:

As we already know, KaiOS apps are basic web applications with the addition of a single manifest file.

The manifest.webapp file has certain components that are required, and some that are optional. You can learn about all of them in detail in the official docs.

Access Levels:

Just like every other mobile OS out there, KaiOS has a set of permissions that dictate what access an app has, and also categorizes apps as Trusted and Untrusted applications.

As you’d expect, the recommended path is always the “Principle of Least Permissions”.

Since the KaiOS ecosystem is based on web technologies, the permissions don’t just deal with access to device APIs. They might also restrict or allow access to Web APIs, such as service-workers and fetch APIs.

A whole list of permissions can be found here.

Bonus tip: the list of permissions can also be found in the official Linux simulator and Palemoon Web IDE.

Application Types:

Applications are distinguished on the basis of their trust level and on the basis of how they are served on the platform.

When talking about trust level, the 3 broad categories of application are:

  1. Certified (Highly Trusted): Allowed only for vendors and OEMs, so basically system apps that come pre-installed with your device.
  2. Privileged (Trusted): These are basically third-party apps that have been reviewed and approved by KaiStore.
  3. Web (Untrusted): This category refers to general web content and apps with the least amount of access.

When talking about how the app is served, note that there are only 2 types:

  1. Packaged: Basically, a .zip file containing your web app. For instance, if it’s a React app, just create a build and zip the dist or build or whatever your output folder is. (Make sure that the zip contains the manifest.webapp file)
  2. Hosted: These are apps that are hosted on your own server. You only need to provide a URL to the manifest.webapp file — that is the only thing stored locally on the device, and everything else would be fetched from the remote server when the user accesses the app.

NOTE: Privileged apps can’t be hosted!

The KaiOS official docs cover App Security and the overall Security Infrastructure of the platform in more detail.

Getting your hands dirty!

So all talk and no action makes this a dull post, right? In this section, we’ll talk about actual code, boilerplate stuff, and some awesome stubs that will help get you started right away.

Sample Apps:

  1. Vanilla JS: This also contains an example of using themes.
  2. React: Includes an example to use indexedDB and translations.
  3. Vue
  4. Angular

Keyboard Navigation:

  1. Soft Keys
  2. Emulated Cursor
  3. D-Pad

These are just a few specific sections that I thought were worth mentioning. If you want to delve deeper, though, the KaiOS team has put together a pretty decent developer portal that you can go through in detail.

Bonus:

In this section, I’ll include some awesome GitHub repositories, blogs, and articles that I think would be really helpful to anyone developing apps for KaiOS (and also fill in a big void left by the official documentation).

  1. Firefox OS Boilerplate: Contains extensive examples of Web Activities, Web, and Device APIs.
  2. Mortar: A collection of templates to kick start app development. This one’s a bit old but provides a good bare-bones app structure as a starting point for complete beginners.
  3. Sekuta82/KaiOS-sample: This covers navigation, list view, grid, forms, and KaiAds integration.
  4. Arrow-key-navigation: A simple utility to add left/right focus navigation to a web/KaiOS app.
  5. Create KaiOS App Template: The Create KaiOS App helps build a KaiOS app quickly based on React and KaiOS designed UI components.
  6. KaiUI Components: A UI Component library for building KaiOS apps.

Caveats:

There are a couple of minor caveats that you need to be aware of while developing your KaiOS application:

  1. By default, inline JS will throw an exception due to the Content Security Policy (CSP). One of the not-so-trivial scenarios is when building a React app bootstrapped with CRA where the webpack includes an inline script in the output. To avoid that, set the environment variable: INLINE_RUNTIME_CHUNK=false (docs).
  2. SPA Routing will break in packaged applications if the app is not loaded from the default route — i.e. /index.html. This happens because packaged application resources are served using app:// URL pattern. Since there’s no webserver mapping all requests to index.html, it would just search for matching resources based on the current route, which would, obviously, break. Hosted apps are not affected by this since the requests can be handled as normally done using a web server.
  3. Sample apps provided on the KaiOS developer portal have a dependency kdeploy which is no longer available and hence running npm i would fail. There’s an alternate package — @filipe_x3/kdeploy (available here) — that you can use instead. This package basically helps in packaging and installing apps directly on a connected physical device over adb.

Finally, you can head over here to cross out all the prerequisites for app submission and then scoot over to the KaiOS app submission portal to submit your app for review and get it published on the KaiStore.

Please note that the Jio store is a separate marketplace maintained by RIL and there’s no app submission portal for the Jio store available yet.

kaiOSjio phonefirefox OSfeature phones

Got a project to discuss?