Tuesday, 8 June 2010

Making installable iPhone widgets

A lot of the developer community complain that Apple is closed and propietary and that the only way of installing an app is via iTunes. Both of these statements are untrue and this article will explain why.

It's true that Objective C development for native iPhone apps is proprietary and closed. However, it IS possible to create installable webapps using open standards and Apple's implementation of HTML5 and CSS3 standards surpasses any other vendor by miles. In this sense Apple is more open and far ahead of all its competitors and apps can be installed without iTunes.

Firstly lets explain what an installable webapp is. Its an web application which is run from the home screen via an icon where all the content used comes from local storage. In fact the app can be run without a network connection. The result, once installed, is an app which need not appear any different from an native application, but it was not installed from iTunes. Of course getting to the point of having it installed is a little more involved.

Making an installable webapp requires the use of two iPhone features:
  • HTML 5 application cache which enables the apps files to be installed an accessed locally from the phone
  • "Add to Home Screen" functionality which enables the app to be run from an icon and run full screen
How to use the application cache
Using the application cache is relatively simple but if you make a mistake it can be very hard to debug, we'll explain that in more detail in a moment. First all you have to do is change the tag to look like this...



<html manifest=offline.manifest>


Note the manifest must have a mime type of text/cache-manifest MIME. Without this setting none of this will work and you want get a meaningful error message either.

The contents of the manifest file will look something like this...

CACHE MANIFEST

NETWORK:
http://eyemags.com/feeds/myrss.xml

CACHE:
../../Images/Icon.png
../Images/ActivityIndicator.png
etc

A couple of things to note about this file:

  1. It needs to list all files accessed by the document in the cache section
  2. All urls must be relative and obviously from the same domain
OK, so that's simple, but the problem is getting it right, because we all make mistakes and spotting a mistake is really difficult with the application cache. There's two mistakes you can make; either you miss spell a filename or you forgot to reference something which is needed. If you miss spell a filename the phone will try to retrieve that filename and watching the logs on your server you'll see a 404 (file not found). If you forget to reference a needed file then you then the cache will fail to be successfully created and it will end up in the "uncached" state.

So what are the possible states of the cache. The cache can have 5 states:
  • 0 - uncached (error)
  • 1 - idle (ie sucess)
  • 2 - checking
  • 3 - downloading
  • 4 - updateready
  • 5 - obsolete (error)

So 0 and 5 are error states and the rest are not errors. State=1(idle) means the cache is OK and can be used (this is the state when you are offline and want to use the cached content). State=4 means a new cache has been created and can be switched into use and State=3 means the cache is updating via a download.

So as implied above you also need to know if the browser is online or offline this can be found from the following variable:

var isOnline = window.navigator.onLine;

It's also useful to have an offline event listener to set this if the situation changes:

document.body.addEventListener("online", function () {
isOnline=true;
console.log('The browser is online');
}, false);
document.body.addEventListener("offline", function () {
isOnline=false;
console.log('The browser is offline');
}, false);

Also you are going to want to know if the system is on the homescreen or not and is therefore running fullscreen.

var isFullScreen = window.navigator.standalone;

All this information is used to determine the state of the applicatin to know if it has been installed or it is still installing and whether or not its running in the browser or its running from the homescreen. Note on the iPad the application actually continues installing even when the browser is not running (proving that the iPad really is multitasking afterall).

To see all this working in action you can install any eyemag on the iPhone or iPad by going to eyemags.com on that device and then clicking install.

Finally a quick gotcha for all developers, there is a limit of 5Mbytes for each domain an app is installed from per device. This number is certainly the case with iPhone 3 and its unclear what the value is for iPhone 4 or iPad as the limit is not published anywhere.

Also be aware that if your code is cached then you cannot change it. To change the code you need to get the manifest to run and application cache refresh. What we do it put a date/time as a comment in the manifest file and whenever this is re-published it will trigger the cache to be updated.

So to conclude it IS possible to have installed widgets on the iPhone/iPad and the open features HTML5 such as application cache make the iPhone/iPad outstanding devices - no other device has this functionality yet.






No comments:

Post a Comment