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

In case you’re perusing this you would presumably realize what a HTML5 versatile application is, yet you won’t not know how to really get one on the Apple App Store or Google Play.

You can present an application manufactured absolutely with web innovation to both of these stores simply like you would a local application (regardless of whether you don’t have a Mac), and for the larger part of utilization cases it can look, feel and perform similarly and also local applications (as long as the application is outlined well).

There are a couple of ventures amongst all over, however. There are a couple of reasonable contrasts to comprehend while making a HTML5 portable application, and you can without much of a stretch stall out incidentally.

I’ve made this basic well ordered manual for point you the correct way regardless of where you are along your application store travel – this article should help give you the setting you require.

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:

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 be 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/Cordova 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 functionality through PhoneGap/Cordova 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 of 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 performance and feature set. In most cases, the choice just comes down to personal preference, and the skills that are available – most requirement sets could be satisfied by either a native or hybrid approach. Whilst native applications have the potential for much higher performance, in most cases, it doesn’t make any noticeable difference (again, assuming that the application is designed well).

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 (an 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.  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/Cordova to access native API’s and wrap your application later, but make sure the functionality you require is available as a Plugin API in Cordova or that there is a 3rd party Cordova plugin available that provides the functionality you need (anybody can create their own Cordova plugin that accesses native functionality).

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 are 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

3. Build your application using an 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 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 acceleration and deceleration in plain old JavaScript you would likely not achieve a good result without an enormous amount of effort – and there is a good chance your application may end up getting rejected.

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 through years of optimisation.

There are other frameworks available, but I would recommend Ionic to anybody who is just getting started as it is a powerful, scalable framework built on Angular and as an added bonus it’s completely free to use.

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:

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:

From here you can debug your application to your heart’s 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/Cordova 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, or Ionic’s own Package service. To build for iOS you need the appropriate SDKs installed on your machine, and you need a Mac for that, however, if you didn’t want to use one of these build services you could also do something fancy like setting up a virtual machine.

The basic role that Cordova/PhoneGap performs is this:

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

Our application is really still just a web application since it is being powered by the browser, but now we also have access to the device through Cordova, and it can be installed like a normal native application.

6. Access Native APIs (optional)

You can just use Cordova 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 Cordova, we can access just about everything that a native application can. Rather than interacting with the device directly, we use Cordova to pass messages between the device and our application.

Typically, the native functionality will be available through some global 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:

This tells Cordova 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:

If you are using Ionic, and I highly recommend that you do, using native functionality will look a little different because Ionic has some built-in support for doing this. This video may help to give you more context.

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 Cordova/PhoneGap and native API’s though testing through the browser 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? Don’t fret! You can still debug directly on your device and access the same browser debugging tools, you can check out the videos below for more information on how exactly to do that:

• Debugging Ionic Applications When Deployed to an Android Device
• Debugging Ionic Applications When Deployed to an iOS 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. The Ionic documentation has some examples of how to get through the signing process.

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.

Source-joshmorony

for more relevant ideas to develop mobile app and web development just click on www.4blocksinc.com

Thank You