Struggling with the complexities of iPhone app development for a year now? The landscape has been dominated by Objective-C developers, and you may have found the learning curve steep, especially if you’ve tried tutorials. But don’t lose hope—there’s an alternative path.While mastering Objective-C is a worthy goal, it’s not the only way to create an iPhone app. By following my instructions, you can create a native-looking HTML5 app that can coexist with other apps on your device. This method allows for a seamless user experience, mirroring that of a standard native app, without the need for deep Objective-C knowledge.With this approach, you can harness your existing skills in HTML5, CSS, and JavaScript to build an offline-capable iPhone application. I’ll guide you through the process, using the creation of a Tetris game as an example.What do I mean by “offline”? This means your app will have a custom icon, a unique startup screen, and a native appearance, allowing it to function independently of an internet connection. Just like native mobile apps, your HTML5 iPhone app should be fully functional when offline.The primary objective is to ensure your app is as mobile-friendly as possible. This tutorial is specifically tailored for iPhone development, but the techniques are applicable to any device with an HTML5-compatible browser. As evidence, check out the following image.It showcases an app without a URL bar or bottom navigation, resembling a genuine native mobile application. 
Access to a server where you can modify HTTP headers for your files is essential for utilizing HTML5’s offline caching capabilities. Apache is particularly adept at this, allowing you to easily adjust settings in a .htaccess file. I’ll provide a tutorial on modifying HTTP headers using htaccess.Additionally, enable the debug bar in Safari’s web browser on your iPhone. Navigate to Settings.app > Safari > Developer and turn on the debug console to identify potential JavaScript errors. Remember to disable this feature once you’ve completed your app to ensure a smooth user experience.Icon and Startup ScreenThe icon should be 57px x 57px in PNG or JPG format. Here’s an example I used for a Tetris game. 
The startup screen needs to be 320px x 460px and should also be in PNG or JPG format. Here’s an example I used for the startup screen. 
Preparation TipsKeep it small, sparse, and simple.
Small: Maintain lean file sizes, as even with caching, mobile app development benefits from minimalism.
Sparse: Minimize the number of files you handle to streamline the development process.
Simple: Start with basic ideas and execute them effectively. Keeping the scope small accelerates completion.
Application CacheThis new standard enables browsers to anticipate the files a webpage requires for optimal performance and caches them. The syntax for this file is straightforward: list the file locations in either absolute or relative to the manifest file. The browser will store these files offline.One critical aspect is that the manifest (the list of files to cache offline) must be served with a specific HTTP header. This is why access to a web server capable of setting HTTP headers is necessary.Screen SizeA quick note on designing your app: In app mode, the screen size is 320px x 460px, while in web mode, it’s 320px x 356px. This can impact the user interface of your offline HTML5 app.Here’s a side-by-side comparison to illustrate the difference. 
HTMLSince it’s a real browser, your HTML remains unchanged. The iPhone browser is at the forefront of HTML5 support, so refer to the specifications for more details.For in-depth information, visit the Safari Developer’s corner:
Safari HTML Reference
Safari CSS Reference
The app begins with defining your markup. Here’s the markup for my Tetris app.<!DOCTYPE html> <html manifest=”tetris.manifest”> <head> <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=”https://www.webfx.com/blog/web-design/html5-iphone-app/iphon_tetris_icon.png”/> <link rel=”apple-touch-startup-image” href=”https://www.webfx.com/blog/web-design/html5-iphone-app/startup.png” /> <link rel=”stylesheet” href=”https://www.webfx.com/blog/web-design/html5-iphone-app/tetris.css” type=”text/css” media=”screen, mobile” title=”main” charset=”utf-8″> <title>offline Tetris</title> </head> <body> <!– Put your Markup Here –> <script type=”text/javascript” src=”https://www.webfx.com/blog/web-design/html5-iphone-app/tetris.js”></script> </body> </html> Notice the . attribute on the <html> tag, indicating the browser that this is an offline app. The Apple-specific markup on the HTML5 page is proprietary.A brief explanation of each attribute:
: Signals to the browser that this is an offline app.
: Hides the status bar and navigation bar when the app is offline.
: Points to the icon image.
: Points to the startup image.
Additionally, place CSS at the top and JavaScript at the bottom of your files (following best practices).CSSIt’s similar to a standard web page. Some specific CSS rules can be used for animation and other effects, but this guide is a quick introduction; those details are beyond the scope of this article.The CSS is straightforward, targeting the <body> element to ensure proper fit within the iPhone’s viewport.JavaScriptI used a modified version of JavaScript from Dalton Ridenhour, found on Github.The original JS was designed for a standard web browser, and the modifications I made were to support the absence of a keyboard. Generally, JavaScript functions work well on the iPhone, with a few exceptions.For instance, mouseover events exist on the iPhone, but their utility without a standard pointing device is questionable. Quirksmode has an informative article on iPhone events. Test your app by opening it in an iPhone, and you should see everything working as expected.The next step is to host it on a web server that can set the appropriate settings on the . You can then add it to the home screen and enjoy all the additional features, including offline mode. You can view a working version I’ve set up at:
http://tetris.alexkessinger.net
With offline HTML apps, you can store necessary files offline and also maintain user data in an offline database. Two primary APIs for user and/or page data are:, a simple key-value store with a straightforward API., an advanced offline SQL engine.// 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 initialize the DB db.transaction(function(tx) { tx.executeSql(“SELECT COUNT(*) FROM WebkitStickyNotes”, [], function(result) { loadNotes(); }, function(tx, error) { tx.executeSql(“CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp / REAL, left TEXT, top TEXT, zindex REAL)”, [], function(result) { loadNotes(); }); }); }); // Insert a test Note. var note = { id: “1”, text:” This is a test note”, timestamp: “112123000”, left:10, top:10, zIndex:2 }; db.transaction(function (tx) { tx.executeSql(“INSERT INTO WebKitStickyNotes (id, note, timestamp, left, top, zindex) VALUES / (?, ?, ?, ?, ?, ?)”, [note.id, note.text, note.timestamp, note.left, note.top, 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(); note.id = row[‘id’]; note.text = row[‘note’]; note.timestamp = row[‘timestamp’]; note.left = row[‘left’]; note.top = row[‘top’]; note.zIndex = row[‘zindex’]; if (row[‘id’] > highestId) highestId = row[‘id’]; if (row[‘zindex’] > highestZ) highestZ = row[‘zindex’]; } if (!result.rows.length) newNote(); }, function(tx, error) { alert(‘Failed to retrieve notes from database – ‘ + error.message); return; }); }); There’s a vast array of possibilities with offline HTML apps. Games like Tetris are feasible, but consider the suitability of your project for offline use. A to-do list app, on the other hand, is an excellent choice. Let thousands of apps flourish!
W3C Offline Application Cache docs
How to create offline webapps on the iPhone
The HTML5 offline cache safari
Backchannel: an Offline-Capable Web App for the iPhone
iPhone offline webapps – a desk on iPhone apps.
A discussion of offline events by John Resig
Getting Started with iPhone Web Apps
10 Useful Gadgets for Mobile Computing
A Quick Look at Mobile Web Designs
The Remote Designer: How to Work While on the Road
Related categories: Web Development and User Interface
