Apple iPhone Tech Talk London 2009: Integrating Web Content into iPhone Apps

Vicki Murley — Safari Technologies Evangelist vicki@apple.com

• iTunes Music Store home page & GarageBand lessons are both HTML-based — included into mac apps
• UIWebKit is not Safari — doesn’t support new windows & tabs + different memory management

Loading local resources

• webview load: baseUrl should be initial path so that relative URLs work
• can’t refer to local resources in remote content
  • but can have overrides in local resources

Performance optimisation

• minimise the total number of UIWebViews
  • use AJAX
  • build views offscreen then animate them in, and delete unused
  • see examples in DashCode
• no explicit cache control, so can’t free up memory easily
  • but can set javascript objects to null

Authentication

• can embed in URL, e.g. http://user:password@www.example.com
• to prompt the user, use NSUrl APIs
  • get didReceiveAuthenticationChallenge
  • can persist credentials for session

Javascript to Objective-C and back

• evaluating javascript in Objective-C:
  • try to keep javascript simple — just a function call to a separate file
  • make sure .js files are copied, not compiled
• can go the other way round too:
  • use Javascript to change to a custom URL (still http:// though)
  • use webview delegate: shouldStartLoadWithRequest
  • return NO to say stop processing

using images more effectively

• be aware that file size is not memory size — especially for JPEGs
  • in memory, images are stored as pixel by pixel values — no compression at all
• use generated images through CSS
  • CSS gradients — they support transparency too
  • CSS masks — properties analogous to background
  • can use gradients or SVG images for masks
  • CSS reflections: -webkit-box-reflect
  • again, use gradient as final parameter
• iPhone uses Helvetica Neue for standard interface
• make buttons using CSS:
  • round corners: 10px is about right
  • add slight shadow behind text: text-shadown: 0px 0px 8px black;
  • border at bottom: -webkit-box-shadow: 0px 2px gray;
  • white overlaying gradient
  • disable standard text behaviour:
    • -webkit-tap-highlight-color: transparent
    • -webkit-touch-callout: none
    • -webkit-user-select: none
  • also make it behave like a button when you press it
  • have an enabled and disabled backgroundColor using onTouch

• see DashCode for other examples

• even if you have larger resources in total, having fewer separate resources can make the page load faster

CSS transitions

• see PosterCircle & FingerTips for examples on Apple Developer Safari site
• can animate multiple CSS properties — just add them to the -webkit-transition-property property
• can also adjust timing and have a transition delay
  • delay to have things appear in a staggered fashion
• there’s also a shorthand -webkit-transition style
• see a good example: Falling Leaves and iPhone Safari source code

CSS animation

• define and name animation keyframes first
• then use them in CSS properties
• can apply multiple animations on a single style
  • each property becomes an index-based list

Local storage in SQLite

• check availability with window.openDatabase