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
• andrew.betts@assanka.net
• You should follow me on twitter here:
– @triblondon
• Build this stuff:
– assanka.net/jobs