Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
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).
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.
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 72×72 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
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.
iPad Browser Considerations
The mobile version of Safari has long been a leader in terms of embracing cutting-edge standards. Therefore, several supported features might surprise you due to our general preconceptions that mobile devices are essentially hobbled devices. If anything, mobile Safari offers several capabilities which outpace those found on the desktop. For instance the iOS 4.2 release included enhanced support for HTML5 and WebSockets.
iOS 4.2 also added support for the iPad accelerometer, which opens up the possibility of building Web applications involving truly unique interfaces. Alberto Sarullo published an accelerometer demonstration (works on the iPad/iPhone only) which really drives home the compelling nature of this feature. I also suggest reading his notes about the new accelerometer Safari features.
Native geolocation features have also been available to iOS since version 3.0. These JavaScript extensions give developers the ability to easily identify the user’s location to varying degrees based on how the user is connecting to the Internet.
Where To From Here?
Web-based iPad application development strikes me as an area rife with opportunity, which has received strikingly little attention. If you’re interested in learning more about this topic I suggest starting with Apple’s official Safari developer documentation, which contains an impressive amount of information about the mobile Safari browser.
About the Author
Jason Gilmore–Contributing Editor, PHP–is the founder of EasyPHPWebsites.com, and author of the popular book, “Easy PHP Websites with the Zend Framework”. Jason is a cofounder and speaker chair of CodeMash, a nonprofit organization tasked with hosting an annual namesake developer’s conference, and was a member of the 2008 MySQL Conference speaker selection board.
