This was presented to the Seattle iPhone App Developers and Designers Meetup on May 5th, 2009. This presentation focused on the unique capabilities available in WebKit on the iPhone and on possibilities for utilizing UIWebViews inside of your native applications.
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Advanced iPhone Web Development
1. Advanced iPhone Web Development
Josh Schumacher
Treemo Labs
email: Josh.Schumacher@gmail.com
web: http://blog.joshschumacher.com
2. iPhone Symbian Windows Mobile Blackberry Palm Linux
Blackberry
Windows Mobile
20%
13%
Mobile
Palm
1%
Smartphone
Linux
8%
Market Share
Q4 2008
iPhone
11%
Symbian
48%
3. iPhone Android Java ME Symbian Win Mo Blackberry Palm
Palm
Win Mo 2%
6%
Blackberry
3%
Symbian
7%
Mobile Devices
Java ME
By Internet Usage
8%
April 2009
Android
9% iPhone
65%
4. Topics of Discussion
Meta Tags
Webkit CSS Extensions
Webkit DOM Additions
Design Patterns
Offline Web Applications
Blurring Boundaries, Web Apps as Native Apps
Helpful Resources
7. <meta name=quot;apple-mobile-web-app-
capablequot; content=quot;yesquot; />
window.navigator.standalone read-only
JavaScript Boolean if window is currently in
fullscreen mode
<meta name=quot;apple-mobile-web-
app-status-bar-stylequot;
content=quot;blackquot; />
Has no effect unless launched from home
screen link
Can be set to translucent to hide the
status bar
9. Some Must Have CSS Rules
text-shadow
text-fill-color
text-stroke
-webkit-tap-highlight-color
-webkit-box-shadow
-webkit-border-radius
-webkit-border-image
15. Multi-Touch
Interactions
Touches Events
Gesture Events
Touches are important for keeping track of how many
fingers are on the screen, where they are, and what they’re
doing. Gestures are important for determining what the
user is doing when they have two fingers on the screen
and are either pinching, pushing, or rotating them.
16. Touches Events
touchstart
Happens every time a finger is placed on the screen
touchend
Happens every time a finger is removed from the screen
touchmove
Happens as a finger already placed on the screen is moved across the screen
touchcancel
17. Gesture Events
gesturestart
Sent when two or more fingers touch the surface
gesturechange
Sent when fingers are moved during a gesture
gestureend
Sent when the gesture ends (when there are 1 or 0 fingers touching the surface)
18. Sample Flow of Events
1. touchstart for finger 1. Sent when the first finger touches the surface.
2. gesturestart. Sent when the second finger touches the surface.
3. touchstart for finger 2. Sent immediately after gesturestart when the second finger touches the surface.
4. gesturechange for current gesture. Sent when both fingers move while still touching the surface.
5. gestureend. Sent when the second finger lifts from the surface.
6. touchend for finger 2. Sent immediately after gestureend when the second finger lifts from the surface.
7. touchend for finger 1. Sent when the first finger lifts from the surface.
23. Offline Cache-Manifests
Must be served as text/cache-manifest.
CACHE MANIFEST
demoimages/clownfish.jpg
demoimages/clownfishsmall.jpg
demoimages/flowingrock.jpg
demoimages/flowingrocksmall.jpg
demoimages/stones.jpg
demoimages/stonessmall.jpg
<html manifest=quot;demo.manifestquot;>
25. Utilize UIWebView inside of your
native Applications
Rapid Development
Ship updates w/o Apple Approval
Expand potential developer base
Easier porting to other devices
26. Using Objective-C in Javascript
WebScriptObject.h defines methods you can implement in your Objective-C classes to expose their
interfaces to a scripting environment such as JavaScript
@interface BasicAddressBook: NSObject {
}
+ (BasicAddressBook *)addressBook;
- (NSString *)nameAtIndex:(int)index;
@end
BasicAddressBook *littleBlackBook = [BasicAddressBook addressBook];
id win = [webView windowScriptObject];
[win setValue:littleBlackBook forKey:@quot;AddressBookquot;];
function printNameAtIndex(index) {
var myaddressbook = window.AddressBook;
var name = myaddressbook.nameAtIndex_(index);
document.write(name);
}
See Webkit DOM Programming Topics and WebKit Objective-C Framework Reference for more information, available in the developer portal.