» Mobile Safari Advanced Features MaisonBisson.com

Mobile Safari Advanced Features

If you’re already building web apps, you might wonder why you should bother to build an iPhone native app. The short answer is that you might not need to, but you should still optimize the app for iPhones.

Native-looking chrome

Set these in the head:

// set a custom icon for when a user bookmarks the app to the home screen
<link rel="apple-touch-icon" href="/path/to/icon.png" /> 
// hide the browser chrome
<meta name="apple-mobile-web-app-capable" content="yes" /> 
//set the phone status bar style; can be grey, black, or black translucent
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Caveats:

Only works for web pages that have been saved to the home screen and opened from there.
Portrait mode only.
Any link will open in new browser tab. Use ajax to keep application to single page, see dashcode templates for examples.

Query this state via js:

window.navigator.standalone

Detect orientation:

<body onorientationchange="updateOrientation();">

Touchable

Touch Events
They’re different from mouse events, so we’ve gotta code differently for them. The sequence works like this:
touchstart -> touchmove -> touchend (or, if a user hits home button touchcancel)

<div ongtouchstart="function();" >

What you get when from that:

event.touches //all
event.targetTouches //this one
event.changedTouches //um...

Touch events track every finger on the screen. Gestures are a higher-level interface to that data.

<div ongesturestart="function();" >

Scale and rotation properties of that gesture are available. I’m not sure if other gestures, such as page flicking, are handled as gestures or touches.

Visually sophisticated

Apple decided that HTML was seriously deficient in the areas of object transformations, transitions, and keyframe animations.

Why render multiple rotated and resized versions of the images you use throughout your app/web page? Loading a single large version of the image may perform better than having to load multiple versions of the image at various sizes, rotations, or skews.

Here are a few options (see previous):

.transformed {
	-webkit-transform: rotate(20deg);
	-webkit-transform-origin: top left;
}

And it can animate transitions between these styles. Specify the transition duration if you like.

#myFlower {
	-webkit-transform: rotate(0deg);
	-webkit-transform: scale(1.0);
	-webkit-transition-duration: 2s;
}
document.getElementById('myFlower').style.webkitTransform = 'rotate(360dev) scale(0.5)'

Other useful properties that you can set:

-webkit-transition-timing-function
-webkit-transition-delay

It gets a lot more exciting with key framed animation. First, define one or more animations:

@-webkit-keyframes 'fall' {
	from{ -webkit-transform: translateY(-50px); }
	to{ -webkit-transform: translateY(600px); }
}
@-webkit-keyframes 'fade' {
	0% { opacity: 100%; }
	75% { opacity: 100%; }
	100% { opacity: 100%; }
}

Then apply those animations to an object or class:

.leaf {
	-webkit-animation-name: 'fall', 'fade';
	-webkit-animation-duration: 10s, 10s;
	-webkit-animation-iteration-count: infinite, infinite;
	-webkit-animation-timing-function: linear, ease-in;
}

Responsive

Mobile safari supports local database storage as defined in HTML5. Using it improves responsiveness and battery performance.

Others also read:

Posted December 2, 2008 by Casey Bisson
Categories: Technology. Tags: applications, iphone, web apps, web development, webkit.

User contributed tags for this post:

Projects

Elsewhere...

Meta