Thursday 12 November 2009

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

Vicki Murley — Safari Technologies Evangelist

  • 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


  • can embed in URL, e.g.
  • 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

No comments: