Posted on by & filed under Mobile Development, Web Development.

Last week, Financial Times launched their new app, but it’s not a traditional app. When you visit Financial Times on an iOS device, it asks if you want to switch to their new app, which is written with HTML 5, CSS, and JavaScript. And when you first load that page, a popover at the top of the screen walks you through the installation: click Add to Home Screen (a pretty simple installation).

After you do this, the icon appears on your iPad, iPhone, or iPod Touch’s home screen, and when you tap it, the experience is just like any other app. The first time you launch it, it prompts you to do something (increase your cache size) that makes it run better. After this, it really behaves just like another app.

What’s going on under the hood is interesting: when you add the site to your home screen, and then subsequently launch it, the app (really a collection of HTML, CSS, and JavaScript files) gets saved to a location on your device. All of the articles and images are pulled down and stored on your device as well. And all of this is enabled by web technologies: on iOS, HTML 5’s support for offline web applications is implemented in such a way that web developers–such as the Financial Times–can create an experience that’s just like using an app.

building iphone apps book cover image And if you’d like to give this a whirl yourself, check out Building iPhone Apps with HTML, CSS, and JavaScript by Jonathan Stark. You’ll learn about all the things you need to know to build apps like this: using CSS, jQuery, and more to create apps with a native iOS look and feel; creating web apps that store data on the client side so they don’t need to keep pulling the same information from the server; and going offline to make apps that can run even when a network connection isn’t available. These are the building blocks you’ll need to build apps that behave like the Financial Times app (now, doing a design that’s as wonderful as theirs will take some doing, but at least you know where to start now).



About Brian Jepson

Brian Jepson is an O’Reilly editor, hacker, and co-organizer of Providence Geeks and the Rhode Island Mini Maker Faire. He’s also a volunteer system administrator and all-around geek for AS220, a non-profit arts center in Providence, Rhode Island. AS220 gives Rhode Island artists uncensored and unjuried forums for their work and also provides galleries, performance space, fabrication facilities, and live/work space.

Tags: brian jepson, CSS, financial times,, html, iPhone app, iphone apps, iPhone development, Javascript, jonathan stark, Safari Books Online,

One Response to “iPhone HTML 5 Apps! What’s Going on Under the Hood by Brian Jepson, Senior Editor, O’Reilly Media”