Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/11HheUJ. Bijan Vaez discusses building large-scale cross-platform mobile apps with HTML5 including offline support, real-time interactivity, and device APIs (camera, GPS).Filmed at qconnewyork.com. Bijan Vaez is the CTO and CoFounder at EventMobi, the largest app building platform for events and conferences. Previous to EventMobi, Bijan built an award-winning iOS app, was part of the discrete graphics team at AMD and founded a real-time RFID tracking consultancy. Bijan holds a BASc in Computer Engineering from the University of Toronto and can be found at @bijanv.

1. Bijan Vaez
Look Ma’ No Connections!
Building Offline-Capable Web Apps with HTML5
@bijanv
m.qconnewyork.com

2. InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• News 15-20 / week
• Articles 3-4 / week
• Presentations (videos) 12-15 / week
• Interviews 2-3 / week
• Books 1 / month
Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations
/html5-offline-storage

3. Presented at QCon New York
www.qconnewyork.com
Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide

4. Instant Updates and Feedback
Real-time Audience Response
Full customizability
Gamification
etc
The easiest way to build a custom event app

5. Why Offline-Web?

6. Why Offline-Web?

7. High Availability for Client
UI
BLL
DAL
View
Controller
Model
View
Presenter
Model
View
ViewModel
Model
3-Tier
Architecture
MVC
Architecture
MVP
Architecture
MVVM
Architecture
Dependent on the Server / Backend Services
!! Single Point of Failure !!

8. High Availability for Client
Server Outage Server Outage +
Offline Cache

9. New User Behaviours
• Push towards native functionality
Source: http://smashinghub.com/

10. Mobile Matters
Mobile Performance Trifecta
Bandwidth
Latency Device
Capability

11. Performance
Can’t depend on browser cache and
caching techniques
Need better ways of client-side caching
for a faster web

12. Agenda
• Demo Time!
• ‘Offlining’ Static Resources
• ‘Offlining’ Dynamic Content
• Techniques & Managing Data Syncs

13. Let’s See it Action
• Super Awesome Demo time!

14. Super awesome app
• 3 (all client-side, HTML5) parts
o HTML5 based camera access
o HTML5 based image processing through
canvas
o HTML5 offline app

15. How can we accomplish this?
• App Cache for Static Assets
• Client Side Data Stores for Dynamic
Content
o LocalStorage
o WebSQL
o IndexedDB
o Better yet Polyfills!

16. ‘Offlining’ Static Assets

17. App Cache
• Demo: Let’s take an app offline

18. App Cache
Must be served with text/cache-manifest mime-type
Use * for Network section. Non-cached resources will not load on a cached page

19. Gotcha’s & Pitfalls
1. Files always served from cache even if online
2. Can only update cached files by updating the content of
manifest itself
3. Do NOT cache the cache (Expiry headers)
4. Any errors (404’s, dropped packets) break the cache
5. Page that references manifest file is cached implicitly
Minimize your dependence
http://alistapart.com/article/application-cache-is-a-douchebag
FireFox Nightly can help debug

20. Updating The Manifest
• App Cache has DOM object
window.applicationCache
• Cache fires events:
cached
checking
downloading
error
noupdate
obsolete
progress
updateready

21. Updating The Manifest

22. ‘Offlining’ Dynamic Data

23. LocalStorage
• Key Value Pair Datastore
o 5 MB (but really only 2.5 MB)
o Watch out for performance
o Supported cross-browser/device
• setItem(“key”, “value”)
• getItem(“key”)

24. WebSQL
• SQLite implementation
o ~50MB limit of data storage

25. IndexedDB
• ‘NoSQL’
o Key Value Pair Datastore
o “No limit”, can ask user for more space

26. Tools to help
• IndexedDB Shim
o https://github.com/axemclion/IndexedDBShim
• IndexedDB Polyfill
o https://github.com/facebook/IndexedDB-polyfill

27. Data Synchronization
• Breeze.js
• PouchDB
• Single Page Application
o Poll server for updates when online
o Push deltas to app (using XHR / Websockets)

28. Summary
• Be careful with App Cache
• Polyfills help manage dynamic data
storage and keep cross-browser/device
compatibility
• Performance gain cannot be
overlooked

29. Thank You!
@bijanv
Bijan Vaez