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 // hide the browser chrome//set the phone status bar style; can be grey, black, or black translucent```


  • 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:

``` ```


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)


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.


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; } ```


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