Offline Web Applications

Slide 1: Make web apps work offline Offline and Desktop Web Applications www.web2os.com Rhys Jones Barcamp London 2 February 17th 2007

Slide 2: Why? • 6:00am Wales - London Train journeys • No Wifi • Patchy 3G • I use Google Office Web Apps – mail, calendar, docs & spreadsheets – no use when offline… – what are my options?

Slide 3: Can’t you already do this? • iCal + Google Calendar • iMail + Gmail POP3 • MS Office + ?

Slide 4: I want.. • Desktop Rich Internet Applications – Web application – Work offline – Keep a local copy of my data – Interact with my desktop resources

Slide 5: Many options.. • File->Work Offline ….? • Dojo Storage, Dojo Offline Toolkit • Firefox 3 • WPF/E • Adobe Apollo • web2os.com

Slide 6: Dojo • Dojo Storage – Flash – DOM Storage • Dojo Offline Toolkit – Small http proxy – Library for synchronisation More at http://labs.sitepen.com/dot/

Slide 7: Firefox 3 • DOM Storage • No need for proxy • Pin pages in cache

Slide 8: QuickTimeﾪ and a Adobe Apollo TIFF (LZW) decompressor are needed to see this picture. labs.adobe.com/wiki/index.php/Apollo • Cross platform runtime • Flash / Flex / Actionscript • HTML / Javascript / CSS / AJAX • PDF QuickTimeﾪ and a TIFF (LZW) decompressor are needed to see this picture.

Slide 9: Adobe Apollo • File I/O • Online / Offline support • Http / REST / Sockets • Custom Chrome

Slide 10: Adobe Apollo QuickTimeﾪ and a TIFF (LZW) decompressor are needed to see this picture. http://labs.adobe.com/wiki/index.php/Apollo

Slide 11: Adobe Apollo QuickTimeﾪ and a TIFF (LZW) decompressor are needed to see this picture. http://labs.adobe.com/wiki/index.php/Apollo

Slide 12: How do we get there? • Application reengineering • Google Calendar in – Dojo ? – WPF/E ? – Adobe Apollo ? – Firefox 3…

Slide 13: Hack it • Take the Greasemonkey approach? HTML, CSS, JS Grease server Browser monkey Userscripts

Slide 14: Current Web Applications

Slide 15: Intermediate

Slide 16: Intermediate

Slide 17: Work offline

Slide 18: Synchronise later

Slide 19: _web2os_ • Only proxy defined URLs • www.google.com/calendar/.* • SQLite database for each ‘app’ • Sandboxed Javascript • Local file, Applescript, COM access • Use Javascript MVC for proxy apps

Slide 28: Javascript MVC • Create the Model QuickTimeﾪ and a TIFF (LZW) decompressor are needed to see this picture.

Slide 29: Javascript MVC • Create the controller QuickTimeﾪ and a TIFF (LZW) decompressor are needed to see this picture.

Slide 30: Javascript MVC • Create the Views QuickTimeﾪ and a TIFF (LZW) decompressor are needed to see this picture. QuickTimeﾪ and a TIFF (LZW) decompressor are needed to see this picture.

Slide 31: Hook the Proxy • Tell the proxy what to look for QuickTimeﾪ and a TIFF (LZW) decompressor are needed to see this picture.

Slide 32: A real example • Map Google Calendar API QuickTimeﾪ and a TIFF (LZW) decompressor are needed to see this picture.

Slide 33: Other possibilities… • Cross domain xmlhttprequest • Google office on the Intranet • Local mashups – iTunes + Flickr mashup

Slide 34: Beta + Opensource soon at: www.web2os.com