How to Build An iPhone and iPad Web App

Building an iPhone or iPad Web App is not an easy endeavor. However, if you have any experience in HTML 5, Javascript and CSS its a lot easier to accomplish than you would think. Apple has built a lot of tags and templates into the building of there mobile safari browser. I am going to go over many of the things that I have found that have really helped me build my webapp.

 

Meta Tags Used By Mobile Safari

To make your app full screen when it is added to the iPhone /iPad home screen using the + button on the browser, the below meta tag will remove all buttons and the url bar and will give it the “native” app look that we are going after. To use any of the meta tags below just add them somewhere in your head tag.

<meta name=”apple-mobile-web-app-capable” content=”yes” />

Now when you pinch on the app it will still zoom and scale. Now, native apps will not zoom or scale, so when need to do something to stop that. Luckily Apple has designed a Meta tag to do that also..

<meta name=”viewport” content=”user-scalable=no, width=device-width” />

The last thing that you may notice is when you tug the app up or down it kinda zooms down and you can see the “background” of the browser. Apple has also designed a meta tag to get rid of that. However, you do need to add a tag to your body tag also. Below is an example…

<script type=”text/javascript”>// <![CDATA[ function BlockMove(event) { event.preventDefault() ; } // ]]></script>

Home Page Icons

Now to make a home page icon for your app, open your favorite image editor and start a new document sized 72×72. Then design your icon and save it as apple-touch-icon.png and save it to the same folder that your index.html file is located. Now take the below code and paste it in your head tag somewhere.

<link rel=”apple-touch-icon” href=”./apple-touch-icon.png />

Making Links Open Fullscreen and Not In Safari

Now this was one of the most frustrating problems I had with making my web app in the beginning. If you use…

<a href=”link.html”>Your Link/a>

that tag will take you straight out of your fullscreen app and right into the normal safari, we don’t want that. So the solution to get past this is to use a little bit of Javascript. Now, how we would do this using the Javascript is below…

<a ontouchstart=”window.location=yourlink.html’ “>Your Link</a>

Now some of you familiar with Javascript will see that we are using the ontouchstart instead of onclick. This is a iPhone/iPad only event trigger that will only work on iOS devices. Its a lot smoother on iOS devices but will not work on computers. You can use that event trigger anywhere in your web app. Since onclick takes about one extra second for the device to read, ontouch start is a great asset to have on our side.

Dragging and Dropping Elements

Now what if your user wants to take a certain element and drag it around with there finger? How are we going to do this? Well the technique that I am using is called Drag Drop Library. Its very simple to use, go to this website http://www.gotproject.com/blog/post2.htmll , download there JS Library using the green button. Then link to that JavaScript file on any page where you would want to use drag and drop. Now, the syntax for getting an element to be able to be dragged is below…

So what you are going to do is give an element that you want to be able to be dragged a unique ID using css. Then take that css and input it into the above code that reads ‘id_of_element’. So that sample code would find and html element that has a id=”id_of_element” and make it be able to be dragged around by the users finger. It’s fairly simple and creates an awesome “WOW” affect with your apps.

iPhone and iPad web apps are slowly becoming more wide spread around the world. Especially now that Apple is finally giving us Web Designers and Developers the required tools. Now every iOS developer doesn’t have to be an Obj C wizard and have a mac, any person with a little HTML know how can create easy, good looking apps.

Update 2/17/11:

Getting iPad Web App to Work Offline Using Localhost, not Cache-Manifest

I spent so much time looking around trying to figure out how I was going to get my web app to work offline. My client will be using the app at large conferences to showcase there product and give a presentation. Wifi is very very unstable at large conferences so it is necessary to make it work offline. What I finally decided to do was to Jailbreak each iPad, and install a server on the localhost of the iPad. To do that I used a program on Cydia called PHPod. This creates a server on that iPad and gives me access to files stored directly on the iPad. What I did next was SSH into the iPad and copy my entire Web App into the WWW directory. Next, I went to localhost on safari on the iPad, clicked my web app and boom there it is right on the iPad. It runs fast, my JQuery still works, all my forms work, its perfect. Now I am looking to make my own Cydia repo where I can host the web app so that the clients wont have to ssh into the iPad every time there is a change. It will just update the package and the site will be updated by the Repo. Yes there is the option to use Cache Manifest and all that but it doesn’t really work all the time and there’s a limit so I couldn’t cache all my videos and larger files etc.