iOS6 - The benefits for html5 web app development - Aaron Lumsden | Aaronlumsden.com Aaron Lumsden

IOS6 – The Benefits for HTML5 Web App Development Written by Aaron Lumsden on 12 Sep 2012

So IOS6 is about to be launched to the masses and brings good news for mobile web app developers. In this article I’ll look at some of the benefits.

With each update that Apple brings it is closing the gap between native and web apps. One of the most important updates for me personally is the introduction of the input file type. This allows us to upload photos and videos directly from the phones device and use them in our apps. This was currently only available through Phonegap. It also let’s us take a new image and upload that directly as well. Good move from Apple!

Input file type in IOS6

<input type=”file”>

By using the above input file type. We are able to pull in images from the device as illustrated below.

HTML5 Web Audio API

If like me you’ve made html5 games for iOS then one feature that gives the game away that it’s a web app as opposed to native is the delay in sounds that can sometimes occur. The web audio api steps in to solve this problem. Html5 audio is good but doesnt allow us to play several sonds at once or add effects to the audio. You can see an example of the web audio api in use on this midi synth. With the introduction of this api into mobile Safari we will now start to see some great audio apps that utilise this.

The HTML5 web audio api now comes to Mobile Safari.

CSS3 filters

Last month I showed you how css3 filters have been introduced to Google Chrome. Well now they’re available in Safari and mobile safari, which means we can now use them in our web apps. Awesome!

App Cache increases from 5MB to 25MB

Traditionally web apps could only store up to 5MB of data in mobile Safari. With more apps becoming available in offline mode, this has now been increased to 25MB meaning that we can now store a lot more data on the users device.

Webkit cross fade

‘Cross-fade’ renders a cross faded combination of two images that have been specified. The value can be used for any property that supports images such as background-image.

“Authors can also use the ‘cross-fade()’ function for many simple image manipulations, such as tinting an image with a solid color or highlighting a particular area of the page by combining an image with a radial gradient.”

This is how the syntax for cross-fade looks

<image-combination> = cross-fade( <percentage>? <image> [, <image> | <color> ]? )

You can implement it in your CSS by using

background-image: -webkit-cross-fade(
url("background.png"),
url("foreground.png"),
50%);

Web Inspector via Remote Debugging

If you’ve been using Adobe Shadow to debug your web apps. Now apple have brought a similar version to ios. You can now debug mobile Safari direct from your laptop or desktop. This has completely replaced the previous debugging tool that was implemented in previous versions of the operating system.

Do you plan on using any of these features in your next web app? Is there any features that you would like to see in the next update? Let me know your thoughts in the comments below.