iPhone HTML5 Web Apps

1. Installation   Include Add2home.js   Bubble gives install instructions
  Only shows on iPhone

HTTP User Agents   In safari, includes string “Safari”  
On homescreen, does not   Adjust content based on whether installed yet or not

Homescreen Icon   72x72px & 114x114px png   Bevel added
automatically   Reference in your <head> with:

Splash Screen   Shown whilst app is loading   640
× 920 px

Frameworks   jQuery Mobile – widest platform support, not just
iOS   Sencha touch – good support, hard to get started, more iPhone focused   iUI: iPhone native UI emulation   jqTouch – More iPhone focused, smaller   More…   Jquery mobile is the best compromise when starting out

Fullscreen mode   Hides navigation and address bar when installed
to homescreen   Status bar can be made grey, black or transparent

Inline Images   Simple to encode on server side  
Reduce HTTP requests   For articles, package everything into one bit of content that’s easily cached

Cache Manifest   Tells webkit which files to cache offline
  Whitelist some or all network connections   The html file the cache is referenced in included automatically   MUST be served with content type “text/cache-manifest” by your web server

WebDB   SQLite on the client   Really easy  
5MB by default, up to 50MB with user permission

WebDB - gotchas   Your table creation must be idempotent
  You must sanitise user input!

localStorage   Very simple   Up to 5MB storage on
iPhone   Simple key value store, string values

iPhone HTML5 Web Apps

iPhone HTML5 Web Apps

alexspeller

More Decks by alexspeller

Other Decks in Programming

Featured

Transcript

1. Installation   Include Add2home.js   Bubble gives install instructions

HTTP User Agents   In safari, includes string “Safari” 

Homescreen Icon   72x72px & 114x114px png   Bevel added

Splash Screen   Shown whilst app is loading   640

Frameworks   jQuery Mobile – widest platform support, not just

Fullscreen mode   Hides navigation and address bar when installed

Inline Images   Simple to encode on server side 

Cache Manifest   Tells webkit which files to cache offline

WebDB   SQLite on the client   Really easy 

WebDB - gotchas   Your table creation must be idempotent

localStorage   Very simple   Up to 5MB storage on

Demo!