Tips and Considerations for Creating HTML5 Apps

Here are a few tips and considerations before jumping into your first HTML5 app.

Packaged or Hosted?

App stores like the Firefox Marketplace provide two types of apps: packaged and hosted. Packaged apps are simple: zip up your HTML, CSS, and JavaScript, and upload the final app to the store. Hosted apps are essentially a web view or browser that display your app from a remote site. Each app type has its advantages. Hosted apps are best for:

  • subscription-based services
  • apps which will frequently change (avoids daily app upgrades)
  • apps which are essentially mobile-wrapped versions of websites

Packaged apps, on the other hand, are best for:

  • standalone games
  • apps which require no internet connection
  • apps which require special device privileges

Ultimately there are no steadfast rules for when to chose either, but weigh your goals with the technology to decide which is best for your app and, more importantly, your users.

Target Device Support

There are a number of devices with different screen sizes to consider these days, and even more, will be thrown at us in the future. When you go to submit your app to the Firefox Marketplace, you’ll be asked if the app will support mobile phone, tablet, and/or desktop. Remember that apps aren’t just for tablets and phones — your traditional desktop can install them as basic apps.

When you consider device support and code to accommodate for multiple platforms, remember that you must consider:

  • Responsive and fluid design: you don’t know the screen size!
  • Avoid explicit pixel dimensions to maintain fluidity
  • Feature detection: always a must!
  • Orientations may change: be prepared to detect a change in orientation!

The more devices you support, the better, as long as you take the time to flexibly design and develop properly.

Be Kind: Please Offline

A classic mistake by app developers, even developers of iOS and Android apps, is assuming that the user always has an internet connection. Packaged apps generally don’t need to worry about these problems, but without an offline strategy, hosted apps become useless.

HTML5 apps can take advantage of the Application Cache (AppCache) API. This API has long made developers groan, but it’s the best option for making HTML5 apps work offline. While the AppCache API may not adequately accommodate for expansive hosted apps, apps with basic to medium architecture will be a good fit.

The Storage APIs are also essential when working with hosted apps offline. Saving data to localStorage and then sending that data to the hosted site when an internet connection becomes available is a common practice, and makes your app appear more fluid and valuable to the user.

Size and Speed Matter

Developers always strive to make their sites as compact and efficient as possible, but this becomes even more important when constructing HTML5 apps. There are a number of reasons for this:

  • Most countries outside of the United States don’t provide unlimited data plans, and customers are charged based on the amount of data used
  • Mobile devices don’t have nearly the amount of storage as desktops
  • More requests can slow down an app immensely over a mobile connection
  • You want good performance with and without a local wifi connection

Don’t become complacent when creating your packaged or hosted HTML5 app. Minify, gzip, concatenate, and do everything you can to ease the monetary and data cost to your app users.

Fill the (phone)Gap

If you’re looking to push your app to Android, iOS, Blackberry, and Windows phone, you’ll need the help of a utility like PhoneGap. Supporting multiple platforms is a major consideration when creating an HTML5 app, especially if you plan on using Mozilla’s new Web APIs, which doesn’t yet have a PhoneGap port.

In this case, it’s incredibly important that you create checks (via feature detection) for which environment you’re in, and either use the Web API of choice or the PhoneGap equivalent. This means creating callback functions and passing them to either the native or PhoneGap methods.

L10N

In the case of Firefox OS and other HTML5-based mobile OS’, they will most likely debut and be possessed mostly by users who do not speak English. Localization of your app is paramount to early adoption and usability. Packaged apps allow for different locale files which will be loaded as specified by the OS settings, and hosted apps should detect user locale and serve content accordingly.

HTML5 apps are easy to make, but good HTML5 apps take planning, testing, and brilliant execution. Sure, it’s possible to just only create a webapp.manifest file and submit your app to a marketplace, but take the time to consider all the user, device, language, and cost possibilities that factor into an app. It could be the difference between the next big app and one user remove five minutes after installing!