Ten things you can do to make your Iphone Web App work like an App

Skip to the Ten Things>>
The launch of the iPad has reinvigorated discussion on the use of small(er) scale devices. with particular interest from the UK HE sector. This may be partly attributable to meeting the technological expectations of students, as well as the constant problem of discovering just what they may be.

A discussion kicked off by Brian Kelly, the UK Web focus at UKOLN highlighted the appeal of Apple’s devices – in particular their UIs (discussion on just how revolutionary the iPad hardware is being beyond the scope of this post ;-) ) – and how they made some open source advocates think twice. The limitations of software sources (the App Store), the missing technologies such as Flash, and the pitfalls of the approvals process may be outweighed by the device’s promise.

The primary thinking on development for these devices is native, so discussion rarely looks at the most prevalent platform available to iPhones and iPads: The Web, plain old HTML.

This article on O’Reilly Radar was posted in a follow up to Brian’s topic and goes some way to explain the opportunities that Mobile Safari and HTML 5 offer, and what may be achieved when extend with Javascript libraries.

Apple have allowed web developers the techniques to ensure that web apps integrate with their devices as seamlessly as native apps. Home screen icons, full screen viewing, inline data loading, geolocation, offline data storage and multi-touch UI capabilities are all achievable using conventional web development techniques. They’re also very well documented on Apple’s site.

Ten Things…maybe eleven

There’s nothing new here, so if you’re familiar with the technology already there’s little to excite. However, reiterating these points may highlight just how accessible this technology can be for those in the front line of web-based information provision.

For more on the App vs Web App debate, take a look at earlier discussion on the QuirksMode Blog.

Below are a number of  features web developers can use right now on the Iphone and Ipod Touch to make their web apps run as smoothly as native ones.

1. Boomarking to the Home Screen

Once a user has visited your web app, they can choose to bookmark it. If they select to bookmark it to their device home screen, an icon based on a preview of the site will be placed there.

2. Use Custom Icons

If you don’t want a site preview for your icon, you can create and embed a custom icon in your HTML code which will be picked up when your web app is bookmarked to the home screen.

<link rel=”apple-touch-icon” href=”apple-touch-icon.png”/>

3. Use a Full Screen App view

A single line of code in your HTML turns a web site into an web app. Once a user bookmarks the page to their home screen, the developer is afforded the trust to run a web app full screen, with no Mobile Safari UI visible:

<meta name=”apple-mobile-web-app-capable” content=”yes” />

4. Keep things inline

Clicking on a link from your web app will invariably switch to Mobile Safari – but there are ways around it. See design decisions further down the page.

5. Extend beyond HTML

For Javascript support Mobile Safari can be treated very similarly to desktop browsers. You can use JQuery, Script.Aculo.Us and Prototype to your heart’s content. Additionally there are device specific events and features you can access, and dedicated libraries for Iphone development, such as JQTouch.

Using these libraries gives you improved control over the DOM elements for updating areas of your App page and makes data handling far simpler.

6. Use the Touch UI (and multitouch)

The Touch UI is available by default, but extending your web app with JQuery and the JQTouch plugin allows you to create multi-touch interactions such as scaling and rotating web page elements and even throwing them around the screen, should you need to.

7. Use Screen width detection

When the device is rotated, Mobile Safari will rotate the view accordingly, you can anticipate this in your CSS.

You can control how the screen behaves in terms of width, height and zoom properties using custom <meta> elements.

See the Apple Dev Centre guide to supported meta elements.

8. Use Geolocation services

As with other modern web browsers such as Firefox 3.5+, pages in Mobile Safari can request location information from a user. If provided this can be used to customise content based on location, putting custom maps,  location pushpins and  site-specific news alerts into the web developer’s toolkit.

This is especially useful to HE institutions with their need for Campus Maps.

Desktop Safari and Firefox 3.5+, and Mobile Safari all implement some if not all of the W3C Geolocation spec, so geolocation apps need only be written once for these browsers.

9. Use clickable Phone Numbers

Mobile Safari automatically makes phone numbers clickable. Embedding phone numbers in a basic <a> link can allow an Iphone user to start a call or send an SMS message with a click or to, just like the email Mailto.

<a href=”tel:11111111 “>Call now!</a>

10. HTML5 Canvas

It doesn’t have to even look like a web page.

Developed by Apple and now becoming widely adopted (a Google Code add-on, Explorer Canvas, ports most of the features to internet explorer too) the <canvas> tag allows scripting of vector shapes, the embedding and alpha transparency of images; repetition, scaling and rotation are all possible in page scripting.

This cuts server-side imaging libraries out of the loop for the data-driven site and brings code-based imaging and animation direct to web browsers, including Mobile Safari.

11. Cache In

Using the Iphone and Ipod Touch Caching capabilities, you can cache commonly used elements of your web app, such as the main User interface files and images. You can then control when they’re updated.

Additionally, you can cache data offline using the Javascript/SQLite databasing tools.

Safari Client Side Storage

Design Decisions – the app page

To keep a web app fullscreen it needs to stay on the one web page, and perform all subsequent data interactions using asynchronous requests.

By treating the one page as your bookmarked web app, you can supply data in RSS, JSON or just HTML over AJAX to update elements of your page.

You get to manage just one beautifully crafted home URL, cached with it’s component images and scripting, and link everything from it. Using a manifest file, you can then cache your UI on the device, so future loads are minimal.

What can’t be done

Web apps aren’t a panacea, there are of course things that you cannot yet acheive in Mobile Safari. Access to the accelerometer is currently unavailable, so shake actions, tilt detection and so on are out of reach, as are Apple push alerts.

How limiting these features are is dependent on what you’re trying to do, and what your user base expects. Custom tilt and shake actions are by their nature new functionality from the user perspective.Their appropriate application must be carefully considered by the developer and for end users how they operate must be learned or discovered, per app.

Screen interaction, for simple content delivery remains the most reliable and understood method of interacting with information on these devices.

Apple Push Alerts are again, limited in their use. The alerts notify the user with a short message, impressing upon them the need to launch the associated app to have it update with new information. The app can then be launched with click on the alert box.

However native apps, like web apps, do not update information in the background, they must be running on the screen for them to retrieve new data.

Conclusion

If there’s any conclusion to be drawn, it’s about understanding the technology and it’s appropriate application. There’s also the requirements of support availability, installation assistance, speed of updates and bugfixes to be considered.

If the above features are sufficient to deliver your content, then they also afford the opportunity to design and build killer interfaces to it, with just a few limitations.

More information on custom icons and web app configuration can be found here on Apple’s Dev site.

Of course if you’re thinking augmented reality, you might want to go native.

This entry was posted in Web Computing and tagged , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

I'm WP-Hashcash. I eat spam.