How to Make an HTML5 iPhone App

You’ve been depressed for sort of a year currently, I know. All the hardcore Objective-C developers are having a hay-day writing app for the iPhone. you would possibly have even tried reading a tutorial or 2 concerning developing for the iPhone (iPhone App).

I don’t need to mention that you just ought to quit on the objective: you’ll cotton on eventually. however within the in the meantime, there’s one thing else that you just will do.

With the superficial quality of developing AN app, it should seem easier to pay some other person to try and do it for you. However, you’ll avoid the value of doing therefore just by following the directions I offer.

You can produce a native app that lives with all the opposite apps, and for the foremost half, it’s reaching to be a pitch-perfect imitation. All you have got to try and do is follow my style pointers and you’ll have a totally functioning HTML5 iPhone app in no time!

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

I’ll show you ways to make AN offline HTML5 iPhone application. additional specifically, I’ll walk you thru the method of coming up with a Tetris game.

Offline?

What am I talking concerning once I say “offline”? Well, it implies that we have a custom icon, a custom startup screen, a native look-and-feel, and you’ll use the app even once the phone isn’t connected to the web.

The app ought to be as practical because it will once it’s offline, rather like traditional native mobile apps. the most goal for your app is to create it as mobile-friendly as doable.

This is a tutorial specifically for iPhones, however, most of those techniques apply to all or any phones that have HTML5-capable browsers.

Yeah, I mean it, consider the subsequent image. it’s no computer address bar and no navigation at very cheap. it’s rather like a native mobile application.

Prework

You are reaching to would like access to a server wherever you’ll modification the hypertext transfer protocol Headers on your files. this can be as a result of we want to require advantage of HTML5’s offline caching (more on this later down the page).

Apache will this rather well and you’ll simply add one thing to a .htaccess file and it’ll simply work. Here’s a tutorial on modifying hypertext transfer protocol headers victimization htaccess.

The other factor you would like to try and do is to change the correct bar in Safari’s application program on your iPhone unit. visit the Settings.app > hunting expedition > Developer on your iPhone, then activate the correct console. this can assist you to spot potential JavaScript errors.

Once you’ve engineered your app, you ought to flip this off in order that you’ll get the total expertise once testing your HTML5 iPhone app.

About the App
Icon and Startup Screen

The icon must be 57px x 57px.

The iPhone can around the corners of your icon, produce a drop shadow, and add a shine to no matter icon you utilize.

It ought to be in PNG or JPG format.

Here is what I used for the Tetris game.

The startup screen should be 320px x 460px and will even be in PNG or JPG format.

Here is what I used for the startup screen.

Some tips before you begin

Stay small, distributed and easy.

Small: this can be mobile app development thus although you’re caching your stuff, it’s still a wise plan to stay your file sizes lean.
Sparse: you ought to try and keep the quantity of files you handle as low as attainable.
Simple: begin with a couple of easy ideas and execute it. By keeping your scope tiny, you’ll get things done quicker.

Application Cache

This is a replacement customary, you’ll browse the specification here.

Application caching permits browsers to see beforehand all the files an online page can want for the net page to figure.

It will cache those files (to a fault, sometimes). The syntax of this file is simple: simply list the locations of your files in either absolute (e.g. http://www.iamramraj.com/wp-content/uploads/2017/12/final_result_html5_iphone.jpg) or relative to the manifest file (/picture.png). The browser can keep those files offline.

You can conjointly list a couple of URLs that ought to not be cached, however, this isn’t pertinent for our offline app (if you’re interested, examine this within the documentation).

One tough half of the current unit is that the manifest (the list of files that require being cached offline) has got to be passed with a filetype Header set to text/manifest. that’s why you wish access to an online server that may set hypertext transfer protocol headers.

Screen Size

A quick note once coming up with your application: once you are in app mode, you’ve got a screen size of 320px x 460px. once you are in internet mode, it’s a screen size of 320px x 356px. this will have an effect on the computer programme of your offline HTML5 app.

Here you’ll see the distinction aspect by aspect.

HTML

It’s a true browser thus your hypertext markup language is precisely identical. The iPhone browser is additionally at the forefront of HTML5, thus poke into the specification.

Let’s get secret writing

The app starts with process your markup. Here is that 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="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>
</head>
<body>
<!-- Put your Markup Here -->
<script type="text/javascript" src="tetris.js"></script>
 
</body>
</html>

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

The manifest=”cache.manifest” property on the <html> the tag is, however, the browser is aware of what we wish to cache this online page offline.

There’s proprietary Apple markup on our HTML5 page. a short rationalization of each:

apple-mobile-web-app-capable: this can be an associate another tip-off that we wish to be an offline app.
apple-mobile-web-app-status-bar-style: This hides the standing bar, and nav bar once the app is offline.
apple-touch-icon: This is that the pointer to the image that wishes to be the icon.
apple-touch-startup-image: this can be a URL inform the startup image.

Also, note that you just ought to place CSS at the highest and JavaScript at very cheap (best practices still apply here).

CSS

It’s virtually identical to a traditional online page. There area unit some specific -WebKit CSS rules that you just will use that do some very cool things like animation, however, this can be a quick-and-dirty guide and that’s outside of the scope of this text.

The CSS is just Plain Jane.

body {
overflow:hidden;
background: #d7d7d7;
margin:0;
padding:0;
}
#tetris {
width: 320px;
height: 460px;
background:#000;
}

The style is actually simply to the div part on our online page to create certain it fits within the iPhone’s viewport properly.

JavaScript

I used a modded version of a JavaScript from Dalton Ridenhour; I found it on Github. The JS was written originally for a standard application program. the sole modifications I had to create ways to support not having a keyboard.

In general, JS functions work simply fine on the iPhone—there square measure exceptions tho’. have faith in one thing sort of a mouseover, the event exists on the iPhone, however, i’m undecided however useful it’s once you don’t have a customary inform device (such as a mouse). Quirksmode denotes a piece regarding events on the iPhone that’s extremely useful.

When you have all of that, you’ll take a look at it out by gap your index.html in associate iPhone, and you ought to be able to see everything work.

Then, next step is to server it from associate actual web server which will set the right settings on the cache.manifest.

Then you may be able to add it to the house screen and have all the extras and see the offline mode.

You can see an operating version I actually have established at:

Bonus Section: Offline knowledge

Along with the power to stay files that square measure required offline, you’ll conjointly store user knowledge in associate offline information. There square measure 2 major Apis for per user and/or per page knowledge. the primary is localStorage. localStorage is a {simple|a straightforward} to use the 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, as an example.

The second is truly associate offline SQL engine, a web database. The Apis square measure a little a lot of advanced. Here may be a very little of you may 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) {
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;
});
});

Wrap Up

There is heap which will be through with offline hypertext markup language apps. Games, like Tetris, or even potential, however, you’d in all probability need to think about what you would like ANd do} and check that its right for an offline app. Quake three Arena, in all probability not. A disturbance list app, definitely.