January 27, 2021
Hot Topics:

Developing Web Applications for the iPad

  • By Jason Gilmore
  • Send Email »
  • More Articles »

I've recently been spending the majority of my days working on a 100 percent JavaScript-driven Web application; that is, JavaScript is responsible for driving both the front end and the back end. While it's certainly an exotic approach, particularly for somebody who has spent the last decade immersed in more traditional server-side technologies such as PHP. The emergence of several cutting-edge technologies opens the door to building truly immersive, interactive Web applications which in every way resemble their desktop-tethered brethren.

Even given all of these promising new features, it's pretty hard to ignore the elephant in the room that is the iPad (and its ever-growing array of competitors such as the XOOM). With more than 10 billion apps sold in less than three years, it's pretty clear the days of accessing "the Web" (to use an increasingly amorphous term) via solely a browser are over.

Yet iPad/iPhone application development requires a vastly different skill set than that which you've accumulated building websites over the years. While acceptance of change is a prerequisite to success, it sure would be nice if we could have our cake and eat it too--if we could create Web-based applications which also happen to run on the iPad in a way which closely resembles an app. Believe it or not, it is possible, and in this article I'll provide you with some insight into how to get started.

Adding an Icon to the iPad Icon Menu

I'd like to start this overview in a rather backwards fashion, putting the cart before the horse if you will, because the very first question developers ask in regards to this approach concerns how the Web application can be deeply integrated with the iPad interface. Notably, how can the Web application be launched by clicking an application icon located on the application menu? Believe it or not, the answer is easier than you think, because the capability is built right into the iPad's Safari browser (see Figure 1).

iPad App Development
Figure 1. Adding a Web Application to the iPad Launch Menu

When the Add to Home Screen option is clicked, the iPad will create an application icon for the website by taking a screenshot of the current page (see Figure 2), and using the page title to make a best guess regarding an ideal icon title.

iPad App Development
Figure 2. Creating a Web Application Launch Icon on the iPad

Once created, the icon will be added to the application menu, as depicted in Figure 3.

iPad App Development
Figure 3. The iPad Web Application Launch Icon

Logically, you'll probably want to associate a custom launch icon with your Web application. You can override the iPad's default behavior and tell it to use a specific icon instead with the apple-touch-icon link element, a feature only available to the Safari browser. For instance, embedding the following link element into the WJGilmore.com layout template will cause an icon named wjgilmore.png to be used whenever the user decides to add the site to their application launch menu:

Incidentally, the iPad standard icon size is 72x72 pixels.

Due to security reasons, Web developers can't automate this procedure; however, you could prompt the user to do so using a friendly reminder akin to that described in Use jQuery to Build a Newsletter Subscription Popup with a MySQL/PHP Backend.

Removing the Safari Interface from the iPad

Even given the convenience of accessing the Web application via a launch icon, the disconnect between an iPad app and a Web application becomes immediately apparent when the Safari browser launches and your Web application opens within the confines of the familiar browser interface. You can however tell the iPad to launch the application in full screen mode (with all of the Safari browser interface elements hidden) sung the apple-mobile-web-app-capable meta element:

Figure 4 presents WJGilmore.com running in full-screen mode on the iPad. Notice how the top of the Web page runs right into the ever-present time bar located at the top of the screen.

iPad App Development
Figure 4. Running the Web application in Full-screen Mode

Viewing HTML Source on the iPad

The iPad Safari browser is void of many features found in the desktop version, lacking even the ability to view the source code of a Web page. This can be quite the drawback when testing your Web application, as you'll often want to make sure browser-specific features are being properly included and rendered. There is, however, a pretty nifty workaround which allows you to peruse the HTML of any page, done by creating a bookmark which when launched executes a JavaScript snippet which displays the source.

This process is well-documented on the PadGadget website, and works like a charm.

Originally published on https://www.developer.com.

Page 1 of 2

This article was originally published on May 23, 2011

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date