Nice things to know when you’re doing Windows 8 app development in html and JavaScript

Recently, I had my first Windows 8 app going through the process of certification for the Windows Store. Certification did not going smoothly the first time.

For a Windows 8 app to be certified, it has to meet a number of requirements: http://msdn.microsoft.com/en-us/library/windows/apps/hh694083.aspx?ppud=4

Upon failure, the test results will only mention the requirements on which it failed. While the requirements in themselves seem clear, upon failure they become quite obscure as they do not tell you what really went wrong. The first requirement for example:
1.1 Your app must offer customers unique, creative value or utility

Ok, so you build an app that you think is unique and valuable. But the tester may think it’s not. There’s little room for arguing.

The problems with my app referred to these two requirements

1.2 Your app must be fully functional when the customer gets it from the Windows Store
3.2 Your app must not stop responding, end unexpectedly, or contain programming errors

They seem logical at first hand, but they may still puzzle you because it’s unclear what is wrong exactly. You have surely tested your app to not crash, and the app should be functional. Otherwise, you would not have submitted it, right? So what’s wrong?

Here are some tips that you may find useful in pinpointing issues.

The location api
The Windows runtime offers a very easy to use api for retrieving the user’s location.
http://msdn.microsoft.com/en-us/library/windows/apps/hh464926.aspx

When you add this capability to your app, through the manifest, the app will automatically ask for the user’s permission. You need to take care of a few issues in your app when using the location api:

  1. What will you do in your app if the user does not allow the use of the location? Will you offer an alternative, provide a default location? Or will you limit the functionality?
  2. The location api is not always reliable. In about 10% of my test runs, the app could not get a location. On a second run, without changing the code, there was no problem and the location was retrieved instantly.
  3. If you run the app in the simulator, you can simulate another location by setting different values for latitude and longitude. Especially when running in the simulator, problem nr 2 showed up, where no location was detected. More importantly, what will your app do if a location is far from your own location. Will it still display relevant data? This is important to check as a tester will unlikely have your location.

Certification issue 1.2 for my app was related to this location api. Due to various reasons, the app would not get a location or not a location for which it had relevant information. A few solutions to tackle this are:

    1. Try to retrieve the location a few times. Yes, that may sound weird, but my app now tries to retrieve the location 4 times:
    var locService = new location.locationService();
    setTimeout(function() { locService.getLocation(processLocation); }, 0);
    setTimeout(function() { locService.getLocation(processLocation); }, 1000);
    setTimeout(function() { locService.getLocation(processLocation); }, 3000);
    setTimeout(function() { locService.getLocation(processLocation); }, 8000);
    setTimeout(function() { testLocation(); }, 10000);

    The function getLocation() is simply a call to getGeopositionAsync() on an instance of Windows.Devices.Geolocation.Geolocator(), and calls back to processLocation when it’s done. The function is executed instantly, then again after 1, 3 and 8 seconds. After 10 seconds, there’s a test to see if the location was found. If not, a message will display. I have found that the app will sometimes have the location instantly, sometimes the second try or the third try. Still, there are cases when even after 4 tries, a location could still not be found.

    2. If you know that your app only provides relevant data within a certain area, you can add this as a comment to the tester when you submit your app. Of course, it’s better to provide the user with an alternative, like a default location or a way to enter a preferred location.

Displaying messages
You know that you should notify the user that there’s no network, a location could not be found, or any other situation that may impact the functionality of the app. This notification could be subtle in a status location, but you can also use this method:

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.popups.messagedialog.showasync.aspx

var message = new Windows.UI.Popups.MessageDialog("No network connection.");
message.title = "Network error";
message.showAsync();

The message is shown asynchronously, meaning that the application will continue even while displaying the message. If you have another message to show, then you will get an ‘access denied’ exception on showing the second message. If you do not handle that exception, your application will crash. This was certification issue number 3.2.

You fix it by keeping track of any open dialog messages. Or you can put the message.showAsync() method in a try-catch block. I chose the latter.

Other tips

The tips above were enough to fix the app and let is pass through the certification process. There are some other tips that helped me in building the app.

Windows 8 App Samples

Before you start building, download the Winodws 8 app samples: http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples

It’s like a buffet of code examples on how to accomplish certain things. The documentation on these samples are usually not that great, so you will have to take some time to figure out how a piece of code works fine in the example, but fail in your own app. Especially with the HTML/JavaScript examples, you will find that there’s a reference to an html-element in JavaScript that you don’t have (yet). With the XAML examples, that’s usually less of a problem because of compilation and type checking.

About page 

All apps have some sort of about page. If you request data from the internet, you will most likely also need some sort of disclaimer and privacy policy. These pages are supposed to be opened as a flyout, though the settings charm. Here’s the sample on how to create this page.

http://code.msdn.microsoft.com/windowsapps/App-settings-sample-1f762f49

CSS

Obviously, when you’re building your app in HTML and JavaScript, you also need to use CSS. This is all very convenient for web developers. If you are a more or less experienced web developer, that know your way around JavaScript and HTML, making an app for Windows 8 is pretty easy to do. There are a number of Microsoft-specific CSS rules that you will probably need to use:

  1. Grid Layout -  http://msdn.microsoft.com/en-us/library/windows/apps/hh453256.aspx
  2. Touch: Zooming and Panning – http://msdn.microsoft.com/en-us/library/windows/apps/hh453816.aspx
  3. Media Queries: http://msdn.microsoft.com/en-us/library/windows/apps/hh453556.aspx

The documentation is unfortunately lacking on a number of properties, and I cannot discuss them all here. You will not need them all, and most templates already have the necessary styles. One tip is to use

-ms-scroll-snap-type:mandatory;
-ms-scroll-snap-points-x: snapInterval(0%,50%);

This will make sure that when you have an app with multiple pages that you can slide from left to right, the page will ‘snap’ to the left of the screen. See: http://msdn.microsoft.com/en-us/library/windows/apps/hh441264.aspx

Happy coding.