MOBILE

Programming the Mobile Web : Widgets and Offline Webapps - Platforms (part 2) - iPhone, iPod, and iPad

2/12/2011 3:47:08 PM

2. iPhone, iPod, and iPad

To create widgets or JavaScript applications for the iOS, we have two possible solutions:

  • Create a webapp.

  • Create a hybrid solution (e.g., a PhoneGap or similar native project).


Note:

A hybrid is a mix between a web and a native application, having the best of both worlds available at the same time.


2.1. Webapp creation

The advantages of a webapp are:

  • We don’t need a Mac-based computer.

  • We can host, manage, and change the webapp whenever we want.

  • We can create any kind of application, including those that Apple doesn’t accept as native applications (for example, adult content or private corporate applications for small- and medium-size companies).

  • The application will have an icon in the Home menu.

  • The application will be full-screen, and the user will never know it is a web application.

  • We can use all the HTML 5, geolocation, and CSS extensions we’ve already seen.

However, there are also some cons:

  • We cannot distribute or sell a webapp through the App Store (the official Apple store).

  • We will not have access to the accelerometer, camera, or filesystem.

  • It is not easy to determine whether a webapp is already installed on the system.

  • Many users still don’t know how to install webapps.


Note:

With iOS 4.0, Apple created iAd, an advertising program for iOS native applications. The ads are created using HTML 5 and some JavaScript extensions. If we want to create these kinds of ads we can use iAd JS, a JavaScript library available at http://developer.apple.com/iad.


A webapp is just a typical iPhone website that can be used offline  and is included in the Home menu. Some new meta tags for full-screen mode are available for webapps. The new meta tags are available in iPhone OS 2.1 and later; for lower versions the webapp will just work as a website with the Safari toolbar.


Note:

If you create a webapp, you can submit it to the Apple Webapp Gallery at http://www.apple.com/webapps for free promotion.


2.1.1. Full-screen metatags

First, we must use the viewport and webclip tags to provide a 1-scale interface and an icon for the home screen:

<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;" />
<link rel="apple-touch-icon" href="/Icon.png" />

To hide the entire Safari interface when the application is opened from the home screen, we can use the apple-mobile-web-app-capable metatag:

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

This tag will make no difference if the site is opened in the browser. We can query the window.navigator.standalone JavaScript object to see if we are working in standalone mode (true) or in browser mode (false). Another possibility is to check the window size, as in standalone mode the height will be either 460 or 480 pixels (depending on whether the status bar is transparent or not) in iPhone or iPod Touch. The standalone and browser versions of the VoiceCentral webapp are shown in Figure 3.

Figure 3. VoiceCentral is a webapp that detects if the user has accessed it using the browser or the home screen icon. This is the same HTML file, but the version on the right (the version opened from the home screen) looks like any other native app.


We cannot hide the 20-pixel-high top status bar (40-pixel-high in iPhone 4 and other high-DPI devices), but we can change the appearance to be compatible with our design. We do this with the new apple-mobile-web-app-status-bar-style metatag. This tag allows values of black, default, or black-translucent, and it only works if we have already defined a standalone mode with the previous metatag.

When black or white, our website will have a height of 460 pixels in low DPI devices, like iPhone 3GS. If we use the black-translucent value we will have the entire 480 pixels available, and the toolbar will be at the top of the website with an alpha value in the first 20 pixels of the page. Dimensions are different if we are targeting other iOS devices, like iPad.


Note:

Apple offers a free IDE for webapp creation, including a JavaScript library, along with the iPhone SDK. The tool is DashCode, and you can use it for free if you have Mac OS X.


From iOS 3.0, Safari also supports a startup image, which is a 320×460-pixel (for iPhone/iPod), or a 1004×768-pixel (for iPad) PNG to be used as the initial image before the HTML and JavaScript loads. We should detect on the server which device is to deliver the right image. The application launcher also uses it for the zoom-in animation when you click on the icon. If you don’t supply a startup image, it will use a screenshot from the last time the app was used:

<link rel="apple-touch-startup-image" href="/startup.png" />

12.3.2.1.2. Distribution

As a webapp is a normal web application with AppCache support, the user will not “install” it as such; the “installation” just involves adding the website to the home screen. However, it is still useful to provide a Setup assistant.


Note:

Remember that there are people who don’t use English as the main language. If you are going to give instructions to the user for widget installation, try to provide different language versions, as is done for the device menus.


First, we need to decide if we are going to accept usage of the webapp from the browser or only as a standalone application. If the last option is our objective, we should provide a single HTML file that detects where the user is accessing it from and either presents the installation link or the app itself, depending on whether it’s accessed from the browser or the home screen.

In the webapp HTML file, we first check whether the user is accessing it from the browser or not. If so, we provide instructions for installing the application. For example:

  • Press the + button.

  • Use the “Add to Home Screen” option.

  • The application will be installed on your home screen for future usage.

The webapp HTML will include:

  • All the metatags provided before

  • An offline manifest file

  • A short title, for use as the application name on the home screen

We can use any iPhone UI library (like iUI or jQTouch) to provide a native-like interface inside the webapp.


Warning:

Remember that when in standalone mode, the user will not have access to the Back, Forward, or Reload buttons, or to the address bar. Therefore, you should provide all of these navigation items in your design.


PastryKit: The Hidden Gem

We’ve already covered many iPhone UI libraries, including iUI and jQTouch. They provide native-like Cocoa Touch controls and enable easy navigation between views using a top toolbar. There is only one problem—the top toolbar scrolls with the contents and doesn’t stay fixed at the top (like a frame), as it would in a native application.

Then someone spotted that the URL http://help.apple.com/iphone/3/mobile (seen from an iPhone) uses very smooth scroll visualization, and the top toolbar stays anchored at the top. Developers discovered that it was using a (up to this writing) hidden official Apple library called PastryKit. The JavaScript API is obfuscated, but many developers have started analyzing it, figuring out how it works, and even incorporating ideas from it into their own projects.

PastryKit implements its own object-oriented framework, has JavaScript objects for many CSS extensions, includes inline images in a JSON file for icons and other data, and implements a very complex set of modules and classes emulating the Objective-C Cocoa Touch framework, changing the original UI prefix to a PK prefix (i.e., UITableViewCell is here PKTableViewCell).

PastryKit is the best library for creating an iPhone webapp experience. There is no official documentation or license information available at this time, but unofficial documentation and samples created by various developers can be found at http://www.mobilexweb.com/go/pastrykit.

Apple also appears to have developed an iPad-only JavaScript library, internally called AdLib, for creating native-like interfaces for websites.


2.2. PhoneGap projects

A PhoneGap iPhone project has the ability to work like a standalone webapp, but it is really a native application with a full-screen Safari inside. The benefit of using PhoneGap is that you can use the PhoneGap JavaScript API to access features that a normal webapp can’t, like the accelerometer, the camera, or the filesystem.

To create a PhoneGap project, you need an Intel-based Mac OS computer. Download the SDK at http://github.com/phonegap/phonegap and use the iphone folder inside the package.

You will need to download the iPhone SDK for Mac OS X (you’ll already have it if you’ve installed the iPhone Simulator) and use the IDE XCode to open the PhoneGap.xcodeproj file.

You can replace the two files inside the www subfolder with all your HTML, CSS, JavaScript, and image resources. You don’t need to use HTML 5’s manifest file inside a PhoneGap project, as any files are already in offline mode.

In your main HTML file you should include the PhoneGap library with the following script tag (you don’t need to have the .js file):

<script type="text/javascript" src="phonegap.js"></script>

You can change all of the project’s properties as needed in the PhoneGap.plist file and then build your project. Building an iPhone native application for delivery is a more complicated topic and is outside the scope of this book.


Note:

Jo is a lightweight JavaScript framework designed for HTML 5 webapps and works well with PhoneGap for iPhone. You can use it for free by downloading the library from http://grrok.com/jo.


2.2.1. Distribution

To distribute your PhoneGap application, you need to join the iPhone Developer Program (http://developer.apple.com/iphone/program). A standard account costs $99 per year, and a corporate account (open to companies with 500+ iPhones) costs $299 per year. Without an account, your application will only work on the Simulator.

Once your membership has been approved you will have the ability to test your application on real devices, or you can define up to 100 beta testers.

If you apply for a standard account, you will also have the ability to digitally sign your application to be published to the App Store, as a free or premium application. For premium applications, you will receive 70% of the revenue received.
Other  
  •  Programming the Mobile Web : Widgets and Offline Webapps - Standards
  •  Mobile Application Security : BlackBerry Security - Networking
  •  Mobile Application Security : BlackBerry Security - Local Data Storage
  •  Themes on Windows Phone 7 Devices (part 2) - Changing the Theme & Detecting the Currently Selected Theme
  •  Themes on Windows Phone 7 Devices (part 1) - Applying a Theme
  •  Programming the Mobile Web : Mobile Widget Platforms
  •  Programming the Mobile Web : Geolocation and Maps - Showing a Map
  •  Mobile Application Security - BlackBerry Security - Permissions and User Controls (part 2)
  •  Mobile Application Security - BlackBerry Security - Permissions and User Controls (part 1) - RIM Controlled APIs
  •  Windows Phone 7 Development : Working with Controls and Themes - Introducing the Metro Design System
  •  Windows Phone 7 Development : WebBrowser Control - Saving Web Pages Locally
  •  Programming the Mobile Web : Geolocation and Maps - Detecting the Location (part 3)
  •  Programming the Mobile Web : Geolocation and Maps - Detecting the Location (part 2) - Google Gears
  •  Programming the Mobile Web : Geolocation and Maps - Detecting the Location (part 1) - W3C Geolocation API
  •  Programming the Mobile Web : Geolocation and Maps - Location Techniques
  •  iPhone Programming : Table-View-Based Applications - Connecting the Controller to the Model
  •  Programming the Mobile Web : Mobilizing WordPress and Other CMSs
  •  Programming the Mobile Web : Server-Side Browser Detection and Content Delivery - Content Adaptation
  •  Programming the Mobile Web : Multimedia and Streaming
  •  Mobile Application Security : BlackBerry Security - Development and Security Testing
  •  
    Top 10
    Windows Server 2003 : Domain Name System - Command-Line Utilities
    Microsoft .NET : Design Principles and Patterns - From Principles to Patterns (part 2)
    Microsoft .NET : Design Principles and Patterns - From Principles to Patterns (part 1)
    Brother MFC-J4510DW - An Innovative All-In-One A3 Printer
    Computer Planet I7 Extreme Gaming PC
    All We Need To Know About Green Computing (Part 4)
    All We Need To Know About Green Computing (Part 3)
    All We Need To Know About Green Computing (Part 2)
    All We Need To Know About Green Computing (Part 1)
    Master Black-White Copying
    Most View
    Collaborating Within an Exchange Server Environment Using Microsoft Office SharePoint Server 2007 : Exploring Basic MOSS Features
    Get A Faster, Safer PC (Part 3) - Make text easier to read, Disable a laptop touchpad
    Algorithms for Compiler Design: THE MACHINE MODEL
    iPhone, iPad touch and iPad : Realikety
    Storage, Screens And Sounds (Part 1)
    Audio Cleaning Lab MX - makes some sounds sound better
    SQL Server 2008 : Using Remote Stored Procedures
    Sony Xperia Go
    Web Security Testing : Manipulating Sessions - Analyzing Session Randomness with WebScarab
    Understanding the Basics of Collaboration in SharePoint 2010 : Microsoft Office Integration
    Buyer’s Guide - Keyboard and mice (Part 2) - Gigabyte Multimedia Ultra-slim Profile Keyboard GK-K6150, Microsoft Natural Ergonomic Keyboard 40000
    How To Store Your Files In The Ether
    Expert advice: Printer & Scanner (Part 2) - Samsung ML-2955DW
    SharePoint 2010 : PerformancePoint Services (part 2) - Using PerformancePoint
    SQL Server System and Database Administration : System Databases
    Is The Personal Blog Dead? (Part 2) - Going Mainstream
    Choosing The Right Gear For The Right Job
    Panasonic KX-MB1530CX Multi-Function Printer : A small workhorse for document printing
    Master Black-White Copying
    Windows 7 : Installing and Running Your Software (part 1)