Nav & Search

Creating a HTML 5 Web App for iPad – Part 2

Projects

This is the second part of a two-part article mini-series (first part here) showing some basic techniques for creating a HTML 5 web app compatible or optimized for the iPad depending on how the techniques are used. It’s not the most exhaustive guide out there, but it’s basically what I now use to progressively enhance mobile versions of the websites I create. See it as a starting point for your own experimantation!

Local Storage

It’s possible to store data as strings in key/value array in HTML 5 through JavaScript. One example of when this is useful is to cache data for mobile apps and websites. Since the data is stored as strings a string representation is needed for data and data structures and JSON works like a charm for this. A JSON stringifier is needed (as well as parser although one is included in jQuery) since JavaScript can only interpret JSON (through eval()) and not output JSON.

if ('localStorage' in window && window['localStorage'] !== null) {
    localStorage["cacheData"] = $.toJSON(cacheData);
}

The local storage works well for data but to store application resources such as HTML, CSS, JavaScript and images a manifest file has to be created and declared in the document. It should list all resources to be cached and they are then fetched from the local storage rather than the web.

<html manifest="demo.manifest">

Touch, Scroll and Swipes

Since  point and drag is used for panning and scrolling there’s no way to use swipes and drags in the default web mode on iOS devices. However, there’s a way to bypass the default touch events and bind your own by adding event listeners for the touchstart, touchmove and touchend events in JavaScript. The first step is to remove the default functionality (pan) when pointing and dragging.

element.addEventListener('touchstart', function(e) {
    e.preventDefault();
}, false);
element.addEventListener('touchmove', function(e) {
    e.preventDefault();
}, false);

Using event listeners and jQuery it’s easy to bind swipes, taps, drags and custom scrolling. The position of the touch event is stored in an array inside the event object called targetTouches. Using this it’s quite easy to bind swipes to jump to the next or previous post by invoking .click() on the next and previous links that’s available in many WordPress themes.

element.addEventListener('touchstart', function(e) {
    e.preventDefault();
    offsetLeft = ($(window).width()-$(this).outerWidth(true))/2;
    data.x = e.targetTouches[0].pageX - offsetLeft;
}
element.addEventListener('touchmove', function(e) {
    e.preventDefault();
    var diffX = (e.targetTouches[0].pageX - offsetLeft) - data.x;
    if (diffX > 150) $("nav.next-prev a.next").click()
}, false);

Using a Custom Icon on the Homescreen

In order to choose the icon that’s used when the user chooses “Add To Home Screen” in the Safari status bar (so that the website can be opened as an app on the users homescreen) a specific link tag pointing out the icon is placed in the header.

<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-iphone.png" />

If no icon is specified a screenshot will be used instead. iPad icons are 72x72px and specific sizes can be set to cater for multiple devices, but the HTML header starts to get bloated with too many links like this, with no sizes-attribute specified the element defaults to 57x57px. The iPad (and other iOS devices) will automatically add rounded corners and a glossy effect if the -precomposed keyword isn’t added to the end of the file name. If no apple-touch-icon is given the device will search the web root folder for icons named apple-touch-icon-72×72.png or  apple-touch-icon.png. This helps with the bloat in the header bit if no icons is found this way either a screenshot will be used.

References

Do you want to read more posts like this? I now blog about Web Development at cleanwebdevelopment.com.


4 thoguhts on “Creating a HTML 5 Web App for iPad – Part 2

Bruno Duarte says 2012-2-14:

Thank you for this article. Helped me a lot.

Alex says 2012-6-29:

thanks!… this was really helpfull! both part 1 and part 2… I was wondering though… what would be best practice to get visitors til click “Add to homescreen”.. popup?.. or is it possible to automatically do it for them with code?

Leave a comment

Your email will not be published.

*