2. iPhone, iPod, and iPad
To create widgets or JavaScript applications for the iOS,
we have two possible solutions:
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.
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:
The webapp HTML will include:
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.
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.
