We’re going to meet some relatively complex code for
recreating native effects and behaviors. Thanks to some (fairly) standard hooks and APIs,
however, there are a few tricks we can employ to add a bit of pizzazz to our apps without
having to do much work at all.1. Nifty Links
For security reasons, mobile web applications are sandboxed away from many built-in
features of the mobile device; for example, unlike native apps, they’re not able to
retrieve a list of a user’s contacts, or take a photo with the device’s camera (yet).
However, they do have the ability to open a few core applications and fill them with data
just by using some carefully constructed hyperlinks.
1.1. Email
The simplest of these is the well-known mailto: URI scheme. On the desktop, these will launch your default mail
application—and a smartphone does the same:
listing 1. ch4/06-links-forms.html (excerpt)
This will bring up the device’s email app, with the subject line filled
out with the variable we passed in, as Figure 1 shows.
1.2. Phone Numbers
We can also assist in dialing a phone number using the tel: URI
scheme. This will bring up (but not dial, of course) a phone number:
listing 2. ch4/06-links-forms.html (excerpt)
<a href="tel:1-408-555-5555">
Call in a sighting!
</a>
|
In fact, for the iPhone, there’s no need to even wrap the number in a hyperlink.
Mobile Safari includes a feature that automatically detects phone numbers in a page and
turns them into links for you. “Excellent,” you may think—until the first time it tries
to turn your product IDs into “dialable” phone numbers! Similarly, there’s a feature
that turns address-like text into map links. But like any automagic feature, it’s not
always what you want. If that’s the case, you can include <meta> tags in the head of your page to
disable these features:
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="address=no"/>
Again supported by the iPhone but not Android is the sms: URI
scheme, which also takes a phone number, but opens up the text message application. At
this point you might be worried about the limited support—fortunately, it’s not a big
problem if a device fails to recognize a URI scheme, as nothing will break; the link
will simply do nothing.
1.3. Maps
Turning now to maps, the situation is a little less ideal. If you want to open a map
and zoom to a given location, there’s no widely implemented, standards-defined way to do
it. A common method is to simply construct a URL that points to
http://maps.google.com/ with a properly formatted latitude and longitude.
Both iOS and Android will open this using the built-in mapping application rather than
following the link in the browser:
listing 3. ch4/06-links-forms.html (excerpt)
<a href="http://maps.google.com.au/maps?q=sitepoint">Visit us!</a>
|
A more standards-friendly version is the geo: URI, which accepts a variety of values that will be
interpreted as map data by the device’s mapping application. You can pass a latitude and
longitude:
listing 4. ch4/06-links-forms.html (excerpt)
<a href="geo:-33.87034,151.2037">Visit us!</a>
|
Or a street address or business name and location:
<a href="geo:0,0?q=123+Fake+St">Visit me!</a>
This is certainly nifty, but it’s currently only supported on Android.
