What's new

How to create an iOS web app

ardchoille

Well-Known Member
Joined
Mar 28, 2012
Messages
4,361
Reaction score
2,070
First of all, an iOS web app is simply a web page, or pages, that use html, css, javascript, jquery, and possibly others, to perform some type of function in iOS. Some iOS web apps are simple, others are complicated. iOS web apps are themed to blend with iOS to such a degree that the user will usually not know the difference between a web app or a compiled Objective C app. I have created my first iOS web app, albeit very simple, and will show you how I did it. My web app is simply a page of links that open my favorite sites in Safari.

1. The HTML file

First, I created a web page full of links. This web page uses HTML, CSS and a .png image (attached) to structure content and appear as if it were a real app. The html source is listed here:
Code:
<!DOCTYPE html>
<html>
<head>
  <title>Your Name Here</title>

  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
  <meta http-equiv="Content-Type" content="text/html">
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" href="iphone.css" type="text/css">
</head>
<body>

<div id="container">
  <div id="header">
    <div id="banner">
      <h1>Your Name Here</h1>
    </div>

<!-- this section can be copied and pasted to provide more section in the page -->
<!-- begin copy and paste, if desired -->
    <div class="topic">
      <p>Section 1</p>
    </div>

    <div id="utility">
        <ul>
            <li><a href='http://www.iphoneforums.net/index.php' target="_blank">&nbsp; iPhone Forums</a></li>
            <li><a href='http://www.iphoneforums.net/index.php' target="_blank">&nbsp; iPhone Forums</a></li>
        </ul>
    </div>
<!-- end copy and paste, if desired -->

    <div class="topic">
      <p>Section 2</p>
    </div>

    <div id="utility">
        <ul>
            <li><a href='http://www.iphoneforums.net/index.php' target="_blank">&nbsp; iPhone Forums</a></li>
            <li><a href='http://www.iphoneforums.net/index.php' target="_blank">&nbsp; iPhone Forums</a></li>
        </ul>
    </div>

  </div>
  <div id="footer">
    <p>Last Update: May 2, 2012</p>
  </div>
</div>
</body>
</html>

Copy the above code to an empty text file and save it as Portal.html. You can add any number of links desired in the apropriate section(s).

2. The CSS file

Second, I used CSS and a .png image (attached) to theme the web page to blend with iOS. The CSS code is listed here:
Code:
body {
    background: #c5ccd4 url(stripes.png);
    color: #000000;
    font-family: Geneva, Arial, Helvetica, sans-serif;  
    font-size: 14px;
    margin: 0;
    padding: 0;
}

#header h1 {
    margin: 0;
    padding: 0;
}
#banner h1 {
    background-color: #cccccc;
    border-top: 1px solid #ccd2da;
    border-bottom: 1px solid #2d3033;
    color: #ffffff;
    display: block;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
    text-shadow: 0px -1px 0px #48515c;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#b5c0ce), to(#6d83a1));
}

.topic {
    color: #354f80;
    display: block;
    font-size: 16px;
    font-weight: bold;
    padding: 0px 0px 0px 10px;
    text-align: left;
    text-decoration: none;
    text-shadow: 0px 1px 0px #ffffff;
}

#header ul {
    list-style: none;
    margin: 10px;
    padding: 0;
}
#header ul li a {
    background-color: #f7f7f7;
    border: 1px solid #a1a7ad;
    color: #222222;
    display: block;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: -1px;
    padding: 12px 10px;
    text-decoration: none;
}

#header ul li:first-child a {
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
}
#header ul li:last-child a {
    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
}

#header ul.hide {
    display: none;
}

#footer {
    color: #354f80;
    text-align: left;
    text-shadow: 0px 1px 0px #ffffff;
    padding: 0px 0px 0px 10px;
}

Copy the above code to an empty text file and save it as iphone.css. The .png image was created to mimic the stripes you see in the background of the Settings window in iOS. The stripes.png file is the second attached file to this post. Download it and save it to your computer along with the above two files of code (don't rename the stripes.png image).

3. Putting it all together

Place the Portal.html, iphone.css and stripes.png files on a server somewhere and open the Portal.html file in Safari on your iPhone/iPad. Hint: You can upload these files to the "Public" folder in your Dropbox account, grab the public link and open it in Safari.

4. Creating a custom home screen icon (optional) (added on May 4, 2012)
This step adds a custom icon for your web app to the device's home screen.

1. Create a custom icon that is 57 x 57 pixels square. By default, the iPhone will round the corners of your icon and overlay it with the famous glossy gradient, making it look like a three dimensional button.
2. Save the icon as icon.png and upload it to the same location as your other web app files. You should now have a total of 4 files for your web app (i.e., Portal.html, iphone.css, stripes.png and icon.png).
3. Edit the Portal.html file to add the below code shown in red:

Code:
<head>
  <title>Your Name Here</title>

  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
  <meta http-equiv="Content-Type" content="text/html">
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" href="iphone.css" type="text/css">
  [COLOR="#FF0000"]<link rel="apple-touch-icon" href="icon.png" />[/COLOR]
</head>

4. Open, or refresh, the page in Safari and tap the middle icon at the bottom of the Safari window (box with an arrow). Choose the "Add to Home Screen" item from the list. If you've already added the page to your home screen you may need to delete and re-add it for this custom icon to take effect.

Now you should have a new icon on your home screen for your web app that uses your custom icon.

5. Hiding the address bar (optional) (added on May 4, 2012)
Space is limited, so it is critical to hide the address bar when viewing your web app in Safari. The following JavaScript snippet placed between the <head></head> tags of your page will cause it to "disappear" after your page has loaded. Edit the Portal.html file to add the below code shown in red:

Code:
<head>
  <title>Your Name Here</title>

  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
  <meta http-equiv="Content-Type" content="text/html">
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" href="iphone.css" type="text/css">
  <link rel="apple-touch-icon" href="icon.png" />

  [COLOR="#FF0000"]<script type="application/x-javascript"> 
     
   addEventListener("load", function() 
   { 
   setTimeout(updateLayout, 0); 
   }, false); 
   
   var currentWidth = 0; 
   
   function updateLayout() 
   { 
   if (window.innerWidth != currentWidth) 
   { 
   currentWidth = window.innerWidth; 
   
   var orient = currentWidth == 640 ? "profile" : "landscape"; 
   document.body.setAttribute("orient", orient); 
   setTimeout(function() 
   { 
   window.scrollTo(0, 1); 
   }, 100); 
   } 
   } 
   
   setInterval(updateLayout, 100); 
   
  </script> [/COLOR]
</head>

Note: this simply pushes the address bar up above the page and out of sight, but it is still there. Scrolling up will cause it to come back into view.

The first attached image in this post shows what this project looks like on my iPhone 4S. Pretty neat, huh?

I'd like to thank Skull One for his assistance with this tutorial. Thanks, dude!
 

Attachments

  • $stripes.png
    $stripes.png
    149 bytes · Views: 322
  • $photo.jpg
    $photo.jpg
    7.6 KB · Views: 284
Last edited:
Very nice.

You should probably remove the duplicate line in your HTML file when you get a chance
Code:
<meta name="apple-mobile-web-app-capable" content="yes" />
and
Code:
<meta content="yes" name="apple-mobile-web-app-capable" />
do exactly the same thing.


Very nice use of DIVs with CSS to format everything. Now if you create a Bookmark with "Add to Home Screen" and then use that to launch it, it will remove everything but the status bar. And a screen shot of that mode would be good to have as well.
 
Very nice.

You should probably remove the duplicate line in your HTML file when you get a chance
Code:
<meta name="apple-mobile-web-app-capable" content="yes" />
and
Code:
<meta content="yes" name="apple-mobile-web-app-capable" />
do exactly the same thing.


Very nice use of DIVs with CSS to format everything. Now if you create a Bookmark with "Add to Home Screen" and then use that to launch it, it will remove everything but the status bar. And a screen shot of that mode would be good to have as well.
Ah, yes, thank you for catching that. I also need to credit you with teaching me about that line :)

Yeah, the DIV's and CSS took hours of editing/uploading and re-editing/re-uploading to get everything just right. But, it was totally worth the work.
 
Last edited:
I've updated the OP to add a couple more steps. I've also updated the iphone.css code to add a few more fonts. These new steps are optional but greatly enhance the appearance and function of the web app.
 
Last edited:
Top