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).
Figure 1. Adding a Web Application to the iPad Launch Menu
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.
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.
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.
Figure 4. Running the Web application in Full-screen Mode
Viewing HTML Source on the iPad
This process is well-documented on the PadGadget website, and works like a charm.