How to Make an HTML5 iPhone App

How to Make an HTML5 iPhone App

You’ve been depressed for like a year now, I know. All the hardcore Objective-C developers have been having a hay-day writing apps for the iPhone. You might have even tried reading a tutorial or two about developing for the iPhone, but its C—or a form of it—and it’s really hard to learn.

I don’t want to say that you should give up on the objective: you can get it eventually. But in the meantime, there is something else that you can do.

You can create a native app that lives with all the other apps, and for the most part, it’s going to be a pitch-perfect imitation.

You can do this with the skill set you probably already have: HTML(5), CSS, and JavaScript.

I’ll show you how to create an offline HTML5 iPhone application. More specifically, I’ll walk you through the process of building a Tetris game.


What am I talking about when I say "offline"? Well, it means that we have a custom icon, a custom startup screen, a native look-and-feel, and you can use the app even when the phone isn’t connected to the Internet.

The app should be as functional as it can when it is offline, just like normal native mobile apps.

This is a tutorial specifically for iPhones but most of these techniques apply to all phones that have HTML5-capable browsers.

Yeah, I mean it, check out the following image. It has no URL bar and no navigation at the bottom. It looks just like a native mobile application.

Final result


You are going to need access to a server where you can change the HTTP Headers on your files. This is because we need to take advantage of HTML5’s offline caching (more on this later down the page).

Apache does this really well and you can just add something to a .htaccess file and it will just work. Here’s a tutorial on modifying HTTP headers using htaccess.

The other thing you need to do is to enable the debug bar in Safari’s web browser on your iPhone unit. Go to the > Safari > Developer on your iPhone, then turn on the debug console. This will help you spot potential JavaScript errors.

Once you’ve built your app, you should turn this off so that you will get the full experience when testing your HTML5 iPhone app.


About the App

Icon and Startup Screen

The icon needs to be 57px x 57px.

The iPhone will round the corners of your icon, create a dropshadow, and add a shine to whatever icon you use.

It should be in PNG or JPG format.

Here is what I used for the tetris game.

Icon and Startup Screen

The startup screen needs to be 320px x 460px and should also be in PNG or JPG format.

Here is what I used for the startup screen.

Icon and Startup Screen

Some tips before you start

Stay small, sparse and simple.

Application Cache

This is a new standard, you can read the spec here.

Application caching allows browsers to determine in advance all the files a web page will need for the web page to work.

It will cache those files (to a fault, sometimes). The syntax of this file is simple: just list the locations of your files in either absolute (e.g. or relative to the manifest file (/picture.png). The browser will keep those files offline.

You can also list a few URLs that should not be cached, but this isn’t pertinent for our offline app (if you’re interested, read about this in the documentation).

One tricky part to this whole thing is that the manifest (the list of files that need to be cached offline) has to be passed with a filetype Header set to text/manifest. That is why you need access to a web server that can set HTTP headers.

Screen Size

A quick note when designing your application: When you are in app mode, you have a screen size of 320px x 460px. When you are in web mode, it has a screen size of 320px x 356px. This can affect the user interface of your offline HTML5 app.

Here you can see the difference side by side.

Screen Size


It’s a real browser so your HTML is exactly the same. The iPhone browser is also in the forefront of HTML5, so dig into the spec.

For more in-depth detail, check out the Safari Developer’s corner:

Let’s get coding

The app starts by defining your markup. here is the markup for my Tetris app.

<!DOCTYPE html>
<html manifest="tetris.manifest">

    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-icon" href="iphon_tetris_icon.png"/>

    <link rel="apple-touch-startup-image" href="startup.png" />
    <link rel="stylesheet" href="tetris.css" type="text/css" media="screen, mobile" title="main" charset="utf-8">

    <title>offline Tetris</title>
   <!-- Put your Markup Here -->
   <script type="text/javascript" src="tetris.js"></script>


First, notice the Doctype. Isn’t HTML5 awesome?

The manifest="cache.manifest" property on the <html> tag is how the browser knows that we want to cache this web page offline.

There’s proprietary Apple markup on our HTML5 page. A brief explanation of each:

Also note that you should put CSS at the top and JavaScript at the bottom (best practices still apply here).


It’s almost the same as a normal web page. There are some specific -webkit CSS rules that you can use that do some really cool things like animation, but this is a quick-and-dirty guide and that’s outside of the scope of this article.

The CSS is just Plain Jane.

body {
    background: #d7d7d7;
#tetris {
    width: 320px;
    height: 460px;

The style is really just to the div element on our web page to make sure it fits in the iPhone’s viewport properly.


I used a modded version of a JavaScript from Dalton Ridenhour; I found it on Github. The JS was written originally for a normal web browser. The only modifications I had to make was to support not having a keyboard.

In general, JS functions work just fine on the iPhone—there are exceptions though. Think about something like a mouseover, the event exists on the iPhone, but I am not sure how helpful it is when you don’t have a standard pointing device (such as a mouse). Quirksmode posted an article about events on the iPhone that is really helpful.

When you have all of that, you can test it out but opening your index.html in an iPhone, and you should be able to see everything work.

Then, next step is to server it from an actual webserver that can set the proper settings on the cache.manifest.

Then you could be able to add it to the home screen and have all the extras, and see the offline mode.

You can see a working version I have set up at:

Bonus Section: Offline Data

Along with the ability to keep files that are needed offline, you can also store user data in an offline database. There are two major APIs for per user and/or per page data. The first is localStorage. localStorage, is an easy to use key-value store with a dead simple API.

localStorage.dataToStore = 5;
console.log(localStorage.dataToStore); // 5 

You can use this for storing the user’s score, for example.

The second is actually an offline SQL engine, a webdatabase. The APIs are a little more advanced. Here is a little of you will see.

// Try and get a database object
var db;

try {
    if (window.openDatabase) {
        db = openDatabase("NoteTest", "1.0", "HTML5 Database API example", 200000);
        if (!db)
            alert("Failed to open the database on disk.  This is probably because the version was /
            bad or there is not enough space left in this domain's quota");
    } else
        alert("Couldn't open the database.  Please try with a WebKit nightly with this feature enabled");
} catch(err) { }

// Check and see if you need to initalize the DB
db.transaction(function(tx) {
    tx.executeSql("SELECT COUNT(*) FROM WebkitStickyNotes", [], function(result) {
    }, function(tx, error) {
        tx.executeSql("CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp /
        REAL, left TEXT, top TEXT, zindex REAL)", [], function(result) { 

// Insert a test Note. 
var note = {
    id: "1",
    text:" This is a test note",
    timestamp: "112123000",
db.transaction(function (tx) 
    tx.executeSql("INSERT INTO WebKitStickyNotes (id, note, timestamp, left, top, zindex) VALUES /
    (?, ?, ?, ?, ?, ?)", [, note.text, note.timestamp, note.left,, note.zIndex]);

// Get all the notes out of the database.
db.transaction(function(tx) {
    tx.executeSql("SELECT id, note, timestamp, left, top, zindex /
    FROM WebKitStickyNotes", [], function(tx, result) {
        for (var i = 0; i < result.rows.length; ++i) {
            var row = result.rows.item(i);
            var note = new Note();
   = row['id'];
            note.text = row['note'];
            note.timestamp = row['timestamp'];
            note.left = row['left'];
   = row['top'];
            note.zIndex = row['zindex'];

            if (row['id'] > highestId)
                highestId = row['id'];
            if (row['zindex'] > highestZ)
                highestZ = row['zindex'];

        if (!result.rows.length)
    }, function(tx, error) {
        alert('Failed to retrieve notes from database - ' + error.message);

Wrap Up

There is lot that can be done with offline HTML apps. Games, like tetris, are even possible, but you would probably want to consider what you want to do and make sure its right for an offline app. Quake 3 Arena, probably not. A to-do list app, definitely.

Let thousands apps bloom!


Related Content

About the Author

Alex Kessinger works for Yahoo! as a front-end engineer. Elsewhere, he likes to curate great stuff from the web on his blog, He is also a founding member of the Tastestalkr Network, a brand group. When not working, Alex lives in the bay area and enjoys really good food.

This was published on Mar 26, 2010


Sachin Mar 26 2010

I simply love this……Yahoooooooooooooooo!

Matthew Heidenreich Mar 26 2010

very creative article, nice job Alex.

Ben Mc Mar 26 2010

Excellent article! This mostly works for the Android as well.

TimHolmesDesign Mar 26 2010

I had no idea you could develop an app for the IPhone using HTML5… soooooo cool and opens it up to so many more who don’t have the C skills.

Cheers for the great post.


insic Mar 26 2010

Superb tutorial. Thanks for sharing.

Nice and simple tutorial, will be using this information very shortly

Haeussler3968 Mar 26 2010

Very cool, I really enjoyed it. Do you know of somewhere I can read more about it?

dolce Mar 26 2010

awesome – very interesting article

A. Cobo Mar 26 2010

Genious use of new and upcoming web standards

Graphpix Mar 26 2010

Thanks ;)

Is it possible to submit your app to the Apple AppStore? Or is it just a web app?

Guhan Iyer Mar 26 2010

Very intriguing article. I would caution folks using this technique to keep the Javascript light weight due to the memory restrictions on the iPhone. Thanks for posting!

great !!!!

Alex Kessinger Mar 26 2010

No, you can’t submit these kind of apps to the app store. Though you can look up this thing called phonegap, and run these kinds of apps inside and iPhone app, and then submit them to the app store.

naefaaxx Mar 26 2010


Askar Sabiq Mar 26 2010

whoa, very nice tuts !

selvagk Mar 27 2010


Another Dave Mar 27 2010

Great tutorial, thank you!

Although you should remove any references to the name of the game, which might be trade marked.

Mahmudur Rahman Mar 27 2010

Very understandable and well explained tutorial. Thanks for sharing this nice post. :)

Eric Perduel Mar 27 2010

Some people just don’t learn. Go ahead, repeat all the mistakes done with IE, browser sniffing, etc.

Next articles:
How to Make an HTML5 Symbian App.
How to Make an HTML5 MeeGo App.
How to Make an HTML5 Android App.
How to Make an HTML5 WebOS App.
How to Make an HTML5 Blackberry App.
How to Make an HTML5 WinMo App.

How about following the W3C specs (widgets, HTML5, CSS3)?And stop using proprietary sh*t which is EXACTLY as idiotic as doing something with ActiveX or for IE specifically?

Bruno Daniel Mar 27 2010

Great post, thank you. A quick tip: in your demo, the user can swipe and the whole screen will move, but this is easilly fixed by adding this meta tag:

Bruno Daniel Mar 27 2010

Hmm, seems the comment won’t accept HTML. Here’s the tag with brackets:

[meta name=”viewport” content=”width=device-width, user-scalable=no” /]

Very cool artikle and no restriction from Apple. thx for the work.

adkarta Mar 28 2010

wow,,,never thing that this is possible.

Bartosz Oczujda Mar 28 2010

One important question. Can you do it on a PC? And submit it to the app store?

Doug Montgomery (Douglife) Mar 28 2010

Alex, I’ve been doing some research on creating apps, and even to a coder some of the stuff is intense. Cocoa, ObjectiveC, etc. I wasn’t looking to create a whole game, just some great features for clients with Iphones. This has done it for me my friend, and I thank you.

Great tutorial by the way, well detailed, and to the point!

zpjet Mar 29 2010

@Bartosz: yes you can. Download and install Safari, go to Preferences > Advanced, turn on Develop menu, then you can change user agent to iPhone. You also don’t need iPhone to test it – iPod Touch is the same Mobile Safari device.

Alessio Bellisomi Mar 29 2010

Cool, but Perduel’s suggestions should be seriously considered

Aleksander Aas Mar 29 2010

Make sure to lay of the -webkit- nonsense and HTML5 apps are the future!

Jasper Mar 29 2010

You can also use to convert it into a real app, with native capabilities.

Nikos Mar 29 2010

Nice Article. Thanks for sharing!

jacopogio Mar 29 2010

as usaul, Alex, a very very good and interesting post !

Waiting for my android HTC tu upgrade to 2.1 to try something similar ;-)

Brady J. Frey Mar 29 2010

Thanks for this, there were a couple here I’d yet to hear of!

On an odd note, I know you may have copied and paste the code, but some of your tags are xhtml although you’re calling an html5 doctype. Now, it won’t necessarily mark you wrong, but it may warn you in a validator as bad habits and unneeded (see some of your meta and links).

…and in html5, script doesn’t require a type, as all scripts are javascript. Many thanks!

Vector king Mar 30 2010

I was abit scared at the beginning with all the http stuff but I managed to pull trough . Thanks Alex

stphen Mar 30 2010

well very nice techniques you have explained in order to develop HTML iphone app, very nice post with very exclusive content. thanks for this awesome post.

jaw crusher Mar 31 2010

It is good.


Not Q3Arena, and not demonstrated on a mobile device but someone’s getting close..
Original Quake in HTML5

Ashwin Apr 03 2010

Very nice article. Awesome intro to all HTML5 iPhone newbies like me. Thanks for sharing :)

Steve Judd Apr 03 2010

Thanks for this. I used your tutorial to guide me in building an “app” to help pick door prize winners (or other random numbers) for our users’ group meetings. Works in any compliant browser, and works offline on my Droid and iPod touch.

Andy matthews Apr 03 2010

I thunk you should be a little more clear about the fact that is NOT an IPhone app, but an hmtl5 web app that’s cacheable on the iPhone.

Hi Andy,
wonder if jquery transition effects for images would be a problem. I assume not, since this would practically be a web app – right?!

Theron Burger Apr 05 2010

Awsome! Am def going to give this a try!
Another MAJOR plus is not having to go through the app store. You can make your app do whatever you want and apple cant do a dam thing about it.

@Eric Perduel
I am new to this and want to learn, I would prefer to learn the standards and make it cross platform. SO… why not tell us what is wrong with his code (according to you) so that we can lean. That’s what this is all about, learning, in a fun, collaborative way.

LabsMs Apr 06 2010

Thx for post.
I want to learn Html5 for use iphone and ipad

Giacomo Ritucci Apr 08 2010

I can’t find anything on Google about the “filetype” header. May it be “Content-Type”?

Also, I can’t find the “text/manifest” MIME Tipe, but I found the “text/cache-manifest” content type that seems the one we are looking for.

Can someone confirm?

Giacomo Ritucci Apr 08 2010

I managed to set the “text/cache-manifest” MIME type with the following .htaccess directive

AddType text/cache-manifest .manifest

It seems that mod_headers cannot set the Content-Type header.

Nice tutorial. I was Googling on how to create app for Apple iPhone. I couldn’t agree more with you that “C—or a form of it—and it’s really hard to learn.” It is really not easy especially for someone with no programming background.

Chad Smith Apr 19 2010

Great post! Thanks for making the effort to put a number of disparate HTML5 references into a concise post with a cool code example.

Roy Smith Apr 28 2010

It’s worth noting that there are a number of development tool companies now offering cross platform development (iPhone, iPad, Android) based on HTML5,CSS,JS. appMobi(from FlyCast) and AppCelerator both do this.

Kaithy Aravind Reddy Apr 30 2010

Very good technical article for a device on a new concept. please post complete code for above thanks.

Jonathan Stark May 15 2010

Nice work! You might want to add -webkit-user-select: none; to the controls. Cheers!

Lang Zi May 17 2010

Very interesting article. You created an icon and startup screen for the app but they’re never been used in this article. My question is if it’s possible to create an icon in your iphone screen to make it just like a normal application.When you click the icon your application will be launched.

Lang Zi May 17 2010

Please ignore my questions. I found the answer by myself. But I got another question. Is it possible to add the icon to home screen by program. For example, the user access your web site and find your application. You add a link like “installing the application” which will add your icon to iphone’s home screen. The next time users will be able to click this icon to launch your app offline.

Richard Jun 03 2010

Is there a way to hide the status bar completely?

sreedhar.R Jun 08 2010

Nice article

Jean-Philippe Jun 09 2010

Thanks Alex. Nice article.
By the way, do you know any HTML5/Webapp-capable repositories where we can publish and get some snipets ?

I wrote a basic iPad layout, which adapts itself depending on device orientation. Anyone to help me getting it improved ?

I’d be pleased to share.

Bitelchux Jun 14 2010

My first html5 game, compatible with iphone, ipad, android and desktop pcs

Laurie Cope Jun 18 2010

This is great. Just about to start iphone app development this will come in handy for web apps. thanks

Joshua Jul 01 2010

Great article. What have you found to be the practical limit to the ammount of data that can be cached on the iPhone?

Fuzebit Jul 02 2010

Excellent article. Working example is great.

hitesh vaghela Jul 09 2010

It’s very fine article for basic fundamental Knowlenge

Does not work for me using the iPhone G3S with software version 3.1.3 and Safari

Perhaps an update by apple stopped this bit of fun?

On my own server, using your example site, and also over at, I can only view in Safari as a web page, but not as an app.

Anyone get this to work recently?

How about showing us one with flash code? Considering the latest EU actions against apple, it looks like they’ll be forced to accept them on the iApps store soon enough.

Brady J. Frey Jul 18 2010

No one cares about Flash, Mike, even with the court debate. Besides, as bloated, proprietary code, you will be forced to use their paid flash application to build and render it. Buy flash and experiment, no need for a tutorial- that’s the same as me teaching you cobalt, it’s vintage quaint.

Brett Jul 21 2010

Great article but I believe you are overlooking a much better reason to use HTML5 over Objective C to develop. That reason is it offers the only way for your work to be cross platform. What do I mean by this, if you write in HTML5 generically then it can run in Iphone, IPad, Droid and whatever else is thrown our way coming up. Even Blackberry is moving to WebKit which will support it. This opens up a whole lot more market to one written in something that is already cross platform. If you write a big bloated application in Objective C and discover you could make more money having an Android version too then voila you now have to rewrite the whole thing from scratch. However, this isn’t the case writing it with HTML5. That is why it is key to use especially in the long run. Now if building an app good idea to have a backend code in any other language you want, Java, C#, etc and use REST services or jsps or whatever.
Also, Steve Jobs said it would be over his dead body before he will allow Flash to run in IPhone which pretty much puts Adobe’s product into crapville.

Great post! Thank you so much Alex
Quick questions, if the website that your working off is a CMS site running with Joomla how do you know what files to include in the manifest? Does this even work with CMS. Basically to make the site look like an app and to be able to flick through the pages of the site while still in the app screen?

flashmac Aug 12 2010

Ironic, I’ve just jumped from your HTML5 tut on nettuts (was googling your’ viewport’ tag) and landed here! Man your everywhere!!

Mr personal HTML5 hero today!

Look at this:

optimized for iPhone/PC, also runs with HTC Desire

Michael Persson Aug 16 2010

I have study the HTML5 from 2008 and had some interesting experiences, this is a little new and of course interesting to start trying. HTML5 is a FLASH KILLER and only that is very interesting for practice…

After hours trying to find out what was wrong with my app, I found a little mistake on the article :P The header for Content-Type must be set to “text/cache-manifest” not text/manifest! And a little advice, using php (which most servers allow) you can just create a php manifest and add header(Content-Type: text/cache-manifest); at the beginning :)

And my best congratulations for this article, it really helped me to start developing web apps for iphone :)

mamal Sep 05 2010


vinay Sep 13 2010

hey nice stuff… thanks for share…

Very well written article, thank you! There might be a typo:

[The manifest=”cache.manifest” property on the tag]

Should it be manifest=”tetris.manifest”?

Megaman Sep 18 2010

Cool stuff, keep it comin :)

I fully agree with Brett about the cross-platform capabilities. Enough with the proprietary crap and hurray HTML-5, JavaScript based apps. If you can deliver games for your web site and port them to any mobile, what would be more cool? Create once, use everywhere =D at least almost.

Food for thought.
P.S. Watch the movie Trashin from eighties, it’s a fun movie that has nothing to do with this article but it’s about skating and being young, about freedom and a girl to fight for ofcourse =D


Pawan Sep 20 2010

Thanks for the article.

How are you opening the site when you are testing it locally?


I have no idea what you are talking about but would love to understand the database crap that ringleaderdigital keeps putting on my iphone I hesr it is html5 also

Sarah Jones Sep 23 2010

I was planning to recruit one Developer to develop an HTML app for my i phone. This article made it easier, thanks

sohbet Sep 26 2010

thank you very nice posts

Rajviji Oct 01 2010


It’s very nice, i am very enjoyed..

Grant Oct 01 2010

A) How do you install a webapp? If you can’t install it why does it have a icon/loading screen. What use is the icon?
b) How do I even run his game on my iPhone 3G 3.1.3? I went to it in safari and it keeps the address bar and bottom navigation. How do you change between Web Mode and App Mode?

iPhone 3.1.3 User Oct 04 2010

@Grant: Go to the “+” in the bottom Bar to add as Bookmark, then select “Add to Home Screen”. Done

Brinley Ang Oct 06 2010

You should update your urls to Safari references to use the host name instead of its ip address.

Ishan Oct 14 2010

Hi folks,

If you’re developing a HTML5 web app for iPhone Safari you might want to checkout — it’s a primitive debugger for iPhone Safari.

Eugene Black Nov 04 2010

Alex, nice article, was very helpful, saved plenty of time for me!

Few things to share:
1. I’m checking Sencha Touch for building HTML5 for iPhone – looks wonderful, works perfect
2. Instead of debugging on iPhone Safari I use Chrome with it page analyze and debugging capabilities. Much better then Firebug
3. Added it to home screen – now nobody can distinguish between native app and my app!!
+no app store required
+works on Android as well

jbohaj Nov 05 2010

Please tell that, Whether it is a Web Application? Or it is a iPhone Application?.

Whether this Application can be Run on iPhone, without using Phonegap & without submitting to Apple App Store?

Eugene Black Nov 07 2010

1. It is Web Application.
2. It is HTML5 Web Application
3. When link to application added to home screen (it behaves 100% like native application. Just click the icon and open you app. No Safari’s address bar/
4. No App Store required
1. Navigate to you app site
2. Tap “+” on Safari’s status bar
3. Select “Add to home screen”
4. Review icon and app title
5. Tap add and enjoy your app

jbohaj Nov 13 2010

@ thanks. Eugene. What is the Role of iPhone to play this application.

Oak Hall Nov 21 2010

Hi get tutorial. Got me started. When I add to home screen and launch my “app” works great, if I click on a link that is included in the manifest it launches safari. Anyway to keep in in the “app” like enviroment? Thanks Oak

Oak Hall Nov 21 2010

I meant great not get

I feel kinda dumb for asking this, seeing how many people were able to accomplish this tut before me…but I have no idea how to “serve” the manifest with a filetype Header set to text/manifest. What does this mean? How do I write it? and where does the code go?

I’m trying to convert a mobile site to HTML5 so that I can show off an app I designed for a senior project (I don’t have an iPhone, only an iTouch…and the university doesn’t have WiFi access). The only way to accomplish my presentation is to somehow cache the pages.

This tut is exactly what I need, but I can’t seem to get it to work. Please help.

Jonny Oenning Nov 30 2010

This works for the ipad using versions previous to the i0s 4.2. However does not work after updating to 4.2. Does anyone know why? has apple broken the html 5 offline stuff or has it changed?

Any help appreciated.

Jonny Dec 01 2010

How can make a website can play audio files (.mp3) on iPhone? Thanks!

John Piasetzki Dec 06 2010

I believe behaviour changed as of 4.2. If you save it on the homepage it doesn’t cache (I’m not sure that it ever worked). A work around is to use base 64.

atomicca Dec 07 2010

awesome thing you wrote..
and i assume its web apps things right ?

or its iphone apps ?


Samueles Dec 15 2010

Hi all,

I am searching for an application to convert a HTML project to a Macintosh application (like “HTML 2 executable” for windows).

Any clue?

thank u very much in advance!

hi there,

I got a naive question for a beginner, hope you don’t mind answering.
I see that your app is on one single webpage, and it works well to “save to home” on an iPhone for offline use.

However, how to do it with the whole website. Let say you want to make an iPhone app that catch 15-20 pages to work offline as an app.

Million Thanks,

Very interesting article about the capability of HTML5 on mobile apps.

Started coding with HTML 5 this year…and I ain’t ever going back.
Nice article explained excellently…

anyone have any luck caching any type of audio file for an ofline iPhone webapp?

Montana Feb 07 2011

Actually HTML5 is not best for all developers…

Obj-C has full access (camera, hard drive, accelerometer, gyroscope, compass, and mic). HTML5 can’t (except the accelerometer, gyroscope (on the 4th gen iPhone and iPod touch) and the iPhone 3GS/4 compass).

Also, Webapps can’t do push/local notifications unless the user already has a native app installed on their device that allows the Webapp to do that.

Also, as previously stated, only apps written in Obj-C can be submitted to the app store. Sure, Apple has a Webapp directory, but it doesn’t get as much traffic as the App Store.

Montana Feb 07 2011

Also, you should add a CAPTCHA to block spambots. Not that you have any, but as a preventive measure.

Nice Job. Realy cool!

Nice Job. Realy cool! Thanks

SohoInteractive Feb 10 2011

Great tutorial, very inspiring. Thank you for sharing. Keep them coming.


Frank Podlaha Feb 16 2011

Hey all, this is an awesome article. For you jQuery / javascript gurus, try jqTouch for another very simple way to create websites that run on iPhones.

ps – This is not a plug, I have nothing to do with that company. I have used jqTouch in the past – really loved it.

Hi Alex,
I’m new to HTML5 and I want to ask if it is working with IIS? using localhost? I tried creating a simple application and run it with IIS but it isn’t working. I also tried uploading my files to a free web hosting site but the .manifest file can’t be uploaded (I think the web hosting site does not support this file extension?).
Anyway thanks for this tutorial and thanks in advance for answering my questions.

@Frank Podlaha – Thanks for the heads up on jqTouch!

Olavi Feb 20 2011

There are out many different frameworks to accomplish what you have done with less effort and greater speed. I suggest you can take a look at LimeJS (

Tamer Feb 21 2011

even works on my Samsung JET! very helpful article, thanks…

Felipe Bueno Feb 23 2011

Hey, dude, thanks a freaking lot!!!

jackiller Mar 08 2011

HTML5 – I’m like it.
Thanks for sharing html5 tutorials and techniques.

Mohammad Mar 14 2011

How we can deal with session variables in multi-page web-app?
session will be lost when closing web-app, but in normal browser base website we have it for 20 minutes (by default)

SoeMoeGyi Mar 14 2011

What a great tutorial! I really wanna try it on iPad.

Pankaj Mar 14 2011

Great Article Alex. Does HTML5 allows access to sensors data like GPS, Compass?

Nuigurumi Mar 16 2011

It doesn’t work for me while my iPod touch is not connected to wifi. I open this link:
then press “Add to home screen”, and everything seems all right, until I switch it to “airplane mode” or walk away far enough from the wifi router. Then it says that it could not be opened because it is not connected to the Internet. Am I doing something wrong?

Chris Mar 17 2011


What exactly is your complaint? The apple specific headers are to get Safari to hide it’s bars, put an icon on the homescreen, and to throw up a splash screen. -All are proprietary to how an iPhone starts an app, none of which is likely to be defined by the W3C. And the goal of this tutorial is to look like a native app.

You also will encounter issues with float, margins and the like and end up scrolling f you don’t set the size of the screen to the exact viewport.

So where exactly did the author miss the chance to be any more generic and grounded in standards?

DEJAY Mar 23 2011

THIS ROCKS MAN!!!!!!!!!!!

I’m having the same issue as Nuigurumi, the application here:
seems to work offline once you dismiss safari’s dialogs, it doesn’t open full screen from the desktop though (it opens inside a safari tab).
The demo application from the tutorial here brings up a dialog that forces you to either go online or exit the application, it doesn’t give you the option to just use the cached version.

Update: Apple has crippled web apps that launch from the home screen, here is an article written about it.

DC Web Design Mar 31 2011

great tutorial! I really wanna see this in better theme

I’ll save somebody 2 hours of diagnostic work:

On iOS 3.1.3 (highest my first-gen iPod Touch can go), tags for hiding the safari bars ONLY work if the page is named index.html.

On higher versions of iOS, pages can have any name and these tags will work as expected.

Benjamin Apr 04 2011

Great article! However HTML5 is not supported by all browsers yet. And i am waiting for browsers who support the phone’s native functionalities like tilt and camera. We made a list of all kinds of mobile (wapp) sites in all kinds of fategories:

Vaibhav Gupta Apr 12 2011

very nice to start with basic ideas…
Thank You man.

Gaurav Mishra Apr 18 2011

Thanks! just completed the one on the same HTML5 based iPhone App.
As The take away will be looking to implement some of the points mentioned in refinement phase.

Thanks! once again :)

James Apr 22 2011


I think that for beginners this is brilliant I was researching a lot because I wanted to create my own app, and some developers charge a lot per hour, but I think that I can manage to create my own app using HTML5.

Would you recommend any books or online courses to create small games?

Thank you,


Great tutorial.. thanks for sharing

Igor G. Apr 22 2011

Great tutorial. However, this app hardly works on a Droid. Even on an iPod touch, the touch events hardly register on the screen. Is this app responsive for you??

Stephen May 06 2011

Perfect!!! thank you!

parbat May 25 2011

very nice thing. :)

Thanks for the post,

I still think teaming up with a programmer is the way to go, rather than learning from scratch. But i guess if you have passion for making iphone apps, nothing should be able to slow you down…


Robert Jun 03 2011

You have got to be kidding. I tried this on an iPad 2 and it runs like a slug. If this is the future of Apps I’ll stick with the past.

Mauvis Ledford Jun 08 2011

This doesn’t (or no longer) works when saved to the desktop. See this post:

senthil Jun 11 2011

Thanks very much,with your help i create my website in mobile compact ability Thanks Lord……..

Ricky Jun 13 2011

Thanks, Great stuff, i’m keen on app dev for iphone & BB

Incircle Media Jun 15 2011

Thanks Alex you really did awesome job.

Gustl Jun 17 2011

I need to write an native app for iphone / ipad which i can successful submit to the appstore. With Picture Gallery, some different menus, and infos. All coming from a mysql. I need to go the normal way with imac developing tools? doesnt exist developing on pc, or webapp for this? How should i go on? Dont know nothing about developing on imac. i know php/sql/ajax/xml… What would be the best way for me? i am complete noob at this. Any help much appreciated. Thanks in advantage, greets gustl

Ubuntu Jun 28 2011

i +1 this

Alex, you are THE man. Thanks bro!

sachin Jul 08 2011


I have created web application, I just want to hide the address bar on ipad + safari 5.0. It works when i add it to home screen using below code, but when i navigate to other page it redirects me to safari browser and address bar displayed on the page.


Android platform has different screen size, may be it is difficult to do this.

Robin Nixon Jul 17 2011

This is an excellent article packed with solid advice. I hope you won’t mind the plug but, in case other readers are interested, my latest book, HTML5 for iOS and Android, goes a step further by enabling you to take web apps such as these and turn them into standalone apps that you can upload to the app stores (for free or to sell) – (the wrappers for the iOS and Android SDKs are free on the website).

sagar Jul 18 2011

I have created one website.
I opened that in safari(without completing cache 100%) and select add to home screen.
It’s get add to home page and when i tried to open it (with network connection available) its gets cached again
but when it completes doing the cache (in app mode )and if i goes offline.
then i tried to open it again(in offline mode only) its asking me for the network connection.
so why its not referring the same cache?
and where does the app cache gets stored?

can you please help me with this?

Its really great article for beginners..

Andrea Jul 29 2011

Very interesting!! Thanks for sharing your work!!

May I asked a stupid question, how ‘native’ such an APP will be?
Can users notice ‘this is a html5 app’?
Does the safari app been invoked to display this “fake webpage”? Or everything is done like a true native App?

nithin Aug 09 2011

good one….thanks for sharing

Iori Fujita Aug 12 2011

I used many things.

touchMove = function(event) { // Prevent scrolling on this element event.preventDefault();

PC to iPhone redirect:

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))|| (navigator.userAgent.match(/iPad/i))) {
if (document.cookie.indexOf(“iphone_redirect=false”) == -1|| document.cookie.indexOf(“ipad_redirect=false”) == -1) window.location = “”;

Many functions can be onLoaded at once:

function addEvent(eventName, func) {
if (eventName.substring(0, 2) == ‘on’) {
eventName = eventName.substring(2);
// for addEventListener
if (window.addEventListener) {
window.addEventListener(eventName, func, false);
return true;
// for addEventListener
if (window.attachEvent) { // IE
window.attachEvent(‘on’ + eventName, func);
return true;
function func1() {
function func2() {
function func3() {
function func4() {
addEvent(‘load’, func1);
addEvent(‘load’, func2);
addEvent(‘load’, func3);
addEvent(‘load’, func4);

The web page is “Music in the Air” dedicated to Schoenberg and Kandinsky.


If you wish to go ahead and develop an HTML5 app with network retrieval and offline storage, to allow your app to look and behavior similarly when online and offline, read this:

sabarish Aug 22 2011


does it require internet connection for the first time.? if yes, can we develop applications which does not require internet.??

macrao Aug 22 2011

Hi, I have a application built on adobe flex/flash and now we want to take this application on to mobile devices like iPAD etc..

what is the best way to convert the current application from flex/flash into HTML5 so that it can run on mobile devices?

Thanks in advance..

jack Gao Aug 29 2011

thanks for this doc!!!

Akanksha Urvashi Sep 08 2011

I found this article very helpful…..thanks a lot.
I have a doubt…why some applications are not compatible on iphone but its working on ipad perfectly??


you dont need to convert it to html5. Use Flash builder 4.5.1 and adobe air to package ypur application for amy mobile platform.

very simple, i llllove it!!

James Sep 23 2011


Nice tutorial, can I just ask though, you say it’s a HTML5 web app, so how would I make money from it ?

I would want to make an App that could be downloaded from the app store, so how would I change the game to be able to download from the App store or would I need to use a completely different programming language for it to work in ?


James Sep 23 2011


Good tutorial, How would you turn this into a downloable app where you could charge people to download it ?
Would that have to be written in another programming language ?


it works on my site thanks for sharing it such a big big help thanks again

Colin Sep 28 2011

So I tried this out, but I can’t seem to actually use it offline. I browse to the website:

On my iPad or iPhone, and while the browser window is open the app still runs, but if I close the browser window…then what?

I tried saving it to the home-screen, and I get the little icon and the splash/startup screen, but then the phone/ipad says ” could not be opened because it is not connected to the internet.”


Can this be published on the app store?

Niklas Oct 04 2011

Great tutorial, but has anyone a solution for the offline + start screen problem yet?

I’ve built a website, i want to know if this can be published as an app without the browser stuff as in the address bar, etc

Jeronimus Oct 18 2011

This is great. I can’t wait to try it out.

Chunsheng Oct 19 2011

Great tutorial!

shaji Oct 19 2011


Kaitherine Oct 28 2011

Realy This tutorial specifically for iPhone application development

geoffrey Nov 01 2011

i wish to be useful in a way. is there a way you think you can make me useful and atleast make earn a deserved living. am a jobless kenyan but with an undergraduate degree in computer science

Josef.dalal Nov 04 2011

Hi Alex I like your post, I wonder if it’s possible to store an audio file on the db browser with HTML 5? And play it while browsing on the site?
Thanks in advance,

Mark William Nov 09 2011

Started coding with HTML 5 this year…and I ain’t ever going back. Nice article explained excellently…
Thank you for sharing.

Josef Nov 09 2011

hello alex, you have a very inspiring article here. Can’t wait to try it out at home! Thanks in advantage

Kundan Singh Nov 10 2011

Its an good starting to learn for beginners from your post towards the mobile apps with HTML5 if you post about phone Gap it will be more intresting

Josef E. Nov 21 2011

Now that flash will pass away on mobile devices,
i think i need to start at your code. Looks very helpful.

Jitendra Shah Nov 28 2011

Very interesting article. If anyone wanted to look into this then this is a good place to start!

This comment section is closed. Please contact us if you have important new information about this post.