HTML5 Guide

The Step-by-Step Guide to Publishing a HTML5 Mobile Application on App Stores



·

I suppose if you’re reading this you know what a HTML5 mobile application is, but you might not know how to actually get one on the Apple app store or Google Play.

It might feel a little bit naughty or wrong at first, but you can submit an application built purely with web technology to both of these stores just like you would a native application (even if you don’t have a Mac)… and despite what some native developers might tell you, they look, feel and perform just as well as native applications in most cases too.

There’s a few steps between here and there though. There’s a few conceptual differences to understand when creating a HTML5 mobile application, and you can easily get stuck somewhere along the way.

I’ve created this simple step-by-step guide to point you in the right direction no matter where you are along your app store journey – so let’s get right into it.

1. Understand the difference between native, hybrid and web applications

Before you even get started, you should understand why you’re building a mobile application with HTML5 and what the difference is exactly between web and hybrid (if you’re submitting your app to app stores, you will be building a hybrid application) and native.

If you’re a little short on time, here’s a little infographic I made that explains the conceptual difference in a very simplified way. Please note that there are a lot of factors this infographic leaves out, and a hybrid approach is not always the best solution:

The Difference Between Native, Web and Hybrid Mobile Applications

It’s easy enough to understand what a native application is: an application that was coded using the native language of the platform. A native application has immediate access to everything that platform has to offer with no restrictions whatsoever. The downside to this approach is that separate applications need to built for each platform.

A web application is an application that is powered by a browser through the Internet. A web application is typically built using HTML, CSS and JavaScript and can be served either through a desktop or mobile browser. A web application can be built to mimic the feel and behaviour of a normal native application, but instead just runs through a browser. Using this approach means you won’t have access to all the bells and whistles a native application does and you can’t distribute your application through most app stores.

A hybrid application is a mix of the native and web approach that allows you to build the application once and submit it to multiple app stores. A hybrid application uses a native packager like PhoneGap which essentially wraps up a browser into a native application and displays your web application through it. With this approach, users of the application will no longer be able to see the browser the app is being run through (so it will just appear like a normal native application to them), you have access to native API’s through Phonegap and you can distribute your application through app stores.

The most obvious question that might arise from this is:

If Hybrid applications are so great, why isn’t everybody using them?

To drill down into all the differences between a Hybrid and Native approach would take a blog post of its own. But in short, the main benefit of building native is that it offers the best speed and performance. In most cases the choice just comes down to personal preference though. Whilst native applications have the potential for much higher performance, in most cases it doesn’t make any noticeable difference.

You might need a high end gaming PC to play some games, but normal and applications and even most games will run just fine on a normal PC. Similarly, most applications will run just fine with a hybrid solution, but some applications may require the extra performance a native application can provide.

I have elaborated on the difference between web, hybrid and native before if you want to check that out.

2. Design your application

Before committing to a particular approach, make sure you have your requirements defined and that your approach is going to meet those requirements.

If you’re creating a pure web application (a HTML5 mobile application that does not require native APIs or to be submitted to app stores), then you only have access to features that are available to the browser. Make sure all of the functionality you require is available here. Don’t worry if you later decide to include native functionality, it’s extremely easy to convert your HTML5 mobile web app to a hybrid app.

If you want access to some native API’s or want to submit your application to app stores (or both) then a hybrid approach is going to be your best bet. We’ll talk more about integrating PhoneGap to access native API’s and wrap your application later, but make sure the functionality you require is available through PhoneGap by default or through a PhoneGap plugin.

When designing your application keep in mind the iOS Human Interface Guidelines and Android Design guidelines. Keep in mind that some of the information in these guidelines will be specific to native applications, so don’t worry too much about it. Just make sure you follow good design principles that are prevalent in most mobile applications.

If you’re building an application to be distributed through the Apple and Google Play app stores, you need to play by their rules. Make sure you comply with the Apple App Store Review Guidelines and the Google Play Developer Program Policies.

Apple especially can be a bit fickle with their application of the guidelines, but if you break any of them your application may be rejected and you will have to fix the problem and resubmit (and the review queue takes about 10 days to get through on average). Here’s a few “gotchas” to watch out for that might see your application be rejected:

  • Your app is more like a web page than a mobile application
  • You don’t handle online / offline states
  • Your app is slow or unresponsive

Apple is much more strict than Google in the review process, for more information check out my other blog post on the Apple review process.

3. Build your application using a HTML5 mobile framework

HTML5 mobile frameworks are the corner stone of developing HTML5 mobile apps. They fulfill a role similar to that of jQuery in normal websites.

On a website jQuery allows you to easily create animations, show and hide things, and so on. When building a HTML5 mobile application, frameworks like Ionic and Sencha Touch allow you to easily create typical mobile elements like scrolling lists, buttons and screen transitions.

HTML5 mobile frameworks are not strictly just for creating the user interface though, most also have ways to store and manage data (data that would populate a scrolling list for example).

If you were to try and recreate the behaviour of a native smooth scrolling list with accerlation and deceleration in plain old JavaScript you would likely not achieve a good result without an enormous amount of effort. In Ionic though, you can just do something like this:

<ion-list>
    <ion-item>
        Item 1
    </ion-item>
    <ion-item>
        Item 2
    </ion-item>
    <ion-item>
        Item 20
    </ion-item>
    <ion-item>
        Item 21
    </ion-item>
<ion-list>

and it’s done:

Ionic List Example

See this page in the Ionic documentation for an interactive demonstration.

These frameworks implement advanced techniques like recycling DOM elements in the list that are off screen to improve performance, so I highly recommend that you use one. Getting the same level of performance as a native application is a difficult challenge, and it’s something these frameworks have done very well.

There are many frameworks out there to choose from, but the most popular today are probably:

I would recommend Ionic to anybody who is just getting started as it is a powerful, scalable framework built on AngularJS and as an added bonus it’s completely free.

BONUS CONTENT: If you want to learn how to build Ionic applications and submit them to app stores, click here.

4. Test your application through the browser

The great thing about developing mobile applications with HTML5 is that you can test it right through your browser.

Different frameworks may be run in different ways but typically, you will be able to access your application through a local web server by going to:

http://localhost/MyApp

in your browser. If you’re using Chrome Dev Tools you can even emulate the device you are designing for by clicking the mobile icon in the top left:

Chrome Dev Tools

From here you can debug your application to your hearts content using the Console, Network, Timeline etc.

If you’re building a web application, then once you’ve finished this stage your app is all good and ready to go. But if you want to create a hybrid application that can access native API’s and be submitted to app stores, it’s now time to package the application.

5. Package your application

You can use a technology like PhoneGap to wrap your web application in a native wrapper and act as a bridge between your application and the native API’s of the device. If you want to build iOS applications but don’t have a Mac you can use the PhoneGap Build service.

I elaborate more on how PhoneGap works in this post, but the simplified version of what happens is:

  1. PhoneGap creates a native application that contains a web view
  2. All of the resources for your application are stored inside this native application
  3. PhoneGap loads your HTML5 application into the web view (the web view can not be seen by the user)
  4. The web view displays your application to the user

So really, our application is still a web application since it’s being powered by the browser, but now we also have access to the device through PhoneGap.

BONUS CONTENT:Grab my free PhoneGap Build eBook to learn more about how to implement PhoneGap in your own applications.

6. Access Native APIs (optional)

You can just use PhoneGap to package your application so that it can be submitted to app stores, but why stop there? We have access to all this magical native functionality now!

With PhoneGap we can access just about everything that a native application can. Rather than interacting with the device directly, we use PhoneGap to pass messages between the device and our application.

HTML5 app interacting with the device

Typically, the native functionality will be available through some Javascript object. We will use the Camera API as an example. To trigger the camera all we need to do is run the following bit of JavaScript:

navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
    destinationType: Camera.DestinationType.DATA_URL
});

function onSuccess(imageData) {
    var image = document.getElementById('myImage');
    image.src = "data:image/jpeg;base64," + imageData;
}

function onFail(message) {
    alert('Failed because: ' + message);
}

This tells PhoneGap to tell the device to launch the camera, and then we can grab the resulting image data from the onSuccess function. In this case the functionality is available through the camera object which can be found at navigator.camera. Sometimes though, like in the case of the AdMob plugin, the functionality will be available directly through an object that is available globally like:


admob.someMethod();

If you want more information on how to include and use plugins in your PhoneGap project, take a look in my free PhoneGap Build Quickstart Guide.

7. Test your application on a device

I mentioned before that one of the great things about HTML5 applications is that you can test them through your browser. Once you start integrating PhoneGap and native API’s though testing isn’t so great.

To test an application that is accessing native API’s you will need to run the application on an actual device. But how do you debug without your browser debugging tools?

Fortunately, there are a few options for debugging directly on your device. I believe the best option though is GapDebug. GapDebug allows you to easily install .ipa files for iOS or .apk files for Android onto your device and provides a debugging interface that almost exactly replicates the Chrome Dev Tools. Changes that you make through the debugging tools will be reflected live onto the application on your device.

It’s an important step in any case to test on a device, whether you’re using native functionality or not the behaviour on an actual device can be different than when it is viewed through a desktop browser.

8. Sign your application

To distribute your applications on app stores you will need to “sign” your application, and in the case of iOS you need to sign your application before you can even install it on a device.

For an iOS application you will need to create a .p12 personal information file and a provisioning profile. You can easily sign an iOS application if you have a Mac and XCode but it is also possible to sign an iOS application without a Mac (the article I linked above describes how to do that).

To sign an Android application, you simply need to create a single keystore file.

For more detailed information on how to sign iOS and Android applications using PhoneGap Build, again, take a look at my free PhoneGap Build eBook.

9. Distribute your application

You’ll need to sign up for the iOS Developer Program (in fact, you’ll have to do this to create your provisioning profile and such anyway) and as a Google Play Developer.

You will need to prepare your app store listings for both platforms and provide some details about your application. To submit to Google Play you will simply be able to upload your .apk file through the developer console. To submit to the Apple App Store without a Mac though you will need to use the Application Loader program, which is only available on Macs. You can use a service like Macincloud.com to get around this though.

My PhoneGap Build eBook goes through this process in a lot more detail. Thankfully, this is the last small hurdle you’ll need to get past! (and cross your fingers that Apple or Google don’t reject your application).

For a more complete walkthrough of creating an application from scratch and submitting it to app stores, take a look at Mobile Development for Web Developers.

What to watch next...

  • Shivas Jayaram

    Hey Josh,

    Awesome post !!

    A comment on one of your points “it’s extremely easy to convert your web app to a hybrid app” – This is only true if your web app is a pure client side app with JS+HTML+CSS and not a server side generated web app like asp.net or php

    Thanks,
    Shivas

    • Josh Morony

      Hi Shivas,

      I should clarify that point – I mean if you originally plan on building just a plain HTML5 mobile web app, and choose not to use PhoneGap (making it a hybrid application), then it is easy to just add PhoneGap in later if you change your mind / decide that you do actually need access to some native functionality.

    • Mark Nongkhlaw

      @Shivas,

      >pure client side app with JS+HTML+CSS and not a server side generated web app…

      I just wanted to draw your attention to the Rhodes platform (Rhomobile.com) which is cross-platform and can use either JS or server-side code with Ruby or both for UI and APIs, although there are still a few APIs which are only available via Ruby. The packaging for the different appstores, code signing etc. can also be done on your local dev machine, provided you have the framework and mobile-specific platform SDKs installed or via a cloud build service called Rhohub. There are other components worth mentioning like Rhoconnect, for syncing, push, etc., and RhoGallery for enterprise app distribution. Rhomobile was a startup which was acquired by Motorola Solutions and now, Zebra.

      HTH

      Disclaimer: I dont work for or represent any of the afore-mentioned companies

  • Thanks Joshua,

    This will definitely help me as I have a very simple HTML/CSS/JS app that I will be looking to turn into an iPhone app soon. Similar to Shivas question, can a Hybrid iOS app access a database on another server just the same as its Web Application app could? For instance, say I write a Web Application that stores data using a back-end language and a MySQL database on my web server…could the Hydrid iOS app access that database?

    • Shivas Jayaram

      Hi Timothy,

      As long as your web app (front end) accesses backend data using rest api’s you should be good. Your backend language can be anything. Your app can work from the browser as a plain website or as a packaged Hybrid app on a mobile device like Josh explains it.

      So for your Hybrid app to access MySQL, you need to create some rest api’s that return json from your MySQL database. Then in your javascript code, you can call these services to get the data. So your hybrid app does not access the database directly but through rest api’s

      Hope this helps

      Thanks,
      Shivas

    • Josh Morony

      Hi Timothy,

      Shivas has done a great job at explaining how that would work. You don’t necessarily need to use a REST API, but you will need an API of some kind to output your results in JSON. You might want to check out this tutorial: http://www.joshmorony.com/how-to-run-a-server-side-search-query-in-sencha-touch/ it will give you an idea of how you might remotely load / filter a list loaded from a MySQL backend in Sencha Touch.

  • Pingback: Guide to publishing a HTML5 mobile application on App Stores | Mobile Platform Development, Spring 2015()

  • Cameron Nicolson

    Out of interest. Why did you not add jQuery Mobile to the top of mobile frameworks? Surely jQuery Mobile is the most popular? I’m currently building an application using JQM and plan to use PhoneGap to publish it on the app store. I’m a little concerned that you’re going to say that JQM’s animations will be rejected by the app store or something to that extend. Is developing with JQM a good idea Josh?

    • Josh Morony

      Hi Cameron, jQuery Mobile is a popular choice – most people are already familiar with jQuery so it’s a natural extension to learn jQM. I must admit that I’ve never built a jQM app but from my research and understanding it is not as powerful / well performing as other frameworks. I would recommend Ionic to any beginners, if you’re not already familiar with Angular it will probably be a little harder to learn but it will be worth it. If you do decide to go with jQM I’m sure you won’t have any issues with your app being accepted if it is built well though, many people do use it.

      • Cameron Nicolson

        Hey Josh, thanks for your insightful response! I feel like it’s a little too late to switch to another framework at this point in time with this current project. I like to keep an open mind and will look into Ionic at some point. I’ve actually been building apps in Google Polymer recently. Is the binding functionality the same as a library like Polymer?

  • Mark Nongkhlaw

    @Cameron,

    Just to add to what Josh has said, JQM is great for webviews that support it and for relatively new devices with lots of memory, but might not work on older devices with non-webkit compatible webviews and low memory.

  • Pingback: How to Minify an Ionic Application for Production | HTML5 Mobile Tutorials | Ionic, Phaser, Sencha Touch & PhoneGap()

  • marie weaver

    I have a question about this Mobile Apps with HTML and a Local Database part.