Slide 1

Slide 1 text

We’ve got a website for that HTML5, offline and the future of the mobile web Open Source Junction 3 Trinity College, Oxford 20-21 March 2012

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

The web has transformed our lives. Now we need that stuff on the move.

Slide 4

Slide 4 text

1999: WAP . Seriously?

Slide 5

Slide 5 text

2001: BlackBerry. Now we’re talking. (except ironically we’re not talking because Blackberry wouldn’t add phone capabilities for another 3 years)

Slide 6

Slide 6 text

2007: iPhone. Cracked it.

Slide 7

Slide 7 text

2008: Apps arrive. Web largely forgotten.

Slide 8

Slide 8 text

But wait, what exactly is an app, anyway?

Slide 9

Slide 9 text

Adaptive interaction Adaptive design +

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

But, couldn’t we just make a website do all that app stuff?

Slide 12

Slide 12 text

Challenges for the web •  Layout –  Adapt, adapt, adapt •  Navigation and interaction –  Interpreting touches is a subtle art •  Offline use –  Just reinvent the whole way the web works •  Rethink backend architecture –  Fewer pages, more APIs •  Analytics –  Record activity while user is offline

Slide 13

Slide 13 text

Flowed columns

Slide 14

Slide 14 text

Flowed columns

Slide 15

Slide 15 text

So you want to use the Internet when you’re not online? Good luck with that.

Slide 16

Slide 16 text

Breaking it down •  Launching the app offline •  Making text content available offline •  Storing content images offline •  Dealing with quota limits •  Analytics

Slide 17

Slide 17 text

Offline technologies Application cache (manifest) WebSQL / SQLite / IndexedDB Local storage Cookies

Slide 18

Slide 18 text

Launching •  Application cache •  Manifest is atomic – download all or none – Boot page, fonts, sprites, splash screen, icons only. •  Webkit manifest bug – obscure naming of the manifest helps •  Set dynamic comment in manifest for dev

Slide 19

Slide 19 text

Manifest contents •  Fonts •  Sprites •  Icons •  Splash screen •  One HTML page •  JavaScript •  HTML •  CSS YES   NO  

Slide 20

Slide 20 text

CACHE MANIFEST # Version: 2012030613 /favicon.ico /lib/imgs/sprite.png /lib/imgs/splash-logo.jpg /lib/fonts/main.ttf FALLBACK: / /controller.html NETWORK: * Cached files Use network when possible Fallback for booting offline

Slide 21

Slide 21 text

Boot process •  Fallback page is loaded from app cache •  Load resources from local storage – JS, CSS, HTML •  Use cookie to identify user •  Load requested content from local DB •  Display it    

Slide 22

Slide 22 text

Offline text content •  Client side database •  IndexedDB is coming, SQLite works now. •  5MB for free, up to 50 with consent •  Use localStorage for index, as it's faster

Slide 23

Slide 23 text

Offline images •  Lots. High turnover. Binary data. •  Client side database •  Download base64 encoded strings •  Render as data: URIs –  •  Nice: Stops operators interfering •  Unfortunate: 30% bigger

Slide 24

Slide 24 text

Quota Native apps get whatever storage they want ! Web apps have hard storage limits

Slide 25

Slide 25 text

Tricks for super storage •  local storage and local DB use UTF-16 text •  That’s a minimum 2 bytes per character •  Pack ASCII into (pretend) UTF-16: if (in.length % 2 !== 0) in += ' '; for (i = 0, l = in.length; i < l; i+=2) { out += String.fromCharCode( (in.charCodeAt(i)*256) + string.charCodeAt(i+1) ); }

Slide 26

Slide 26 text

App cache, local storage, eval()ed JavaScript, invalid UTF-16… Congratulations, you’ve made a debugging nightmare

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Useful tools •  Charles – www.charlesproxy.com •  WeinRE – phonegap.github.com/weinre/ •  WebDriver for mobile browsers – http://code.google.com/p/selenium/wiki/ WebDriverForMobileBrowsers

Slide 29

Slide 29 text

In summary •  Ease of use is critical. Adapt, adapt, adapt. •  The web can do this •  Web approach retains all the benefits of the web that you give up when building native.

Slide 30

Slide 30 text

“Don’t build native apps, build web apps” -­‐  Tim  Berners-­‐Lee  

Slide 31

Slide 31 text

Questions? •  Andrew Betts •  [email protected] •  You should follow me on twitter here: – @triblondon •  Build this stuff: – assanka.net/jobs