Bijan Vaez
Look Ma’ No Connections!
Building Offline-Capable Web Apps with HTML5
@bijanv
m.qconnewyork.com
InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese an...
Presented at QCon New York
www.qconnewyork.com
Purpose of QCon
- to empower software development by facilitating the sprea...
Instant Updates and Feedback
Real-time Audience Response
Full customizability
Gamification
etc
The easiest way to build a ...
Why Offline-Web?
Why Offline-Web?
High Availability for Client
UI
BLL
DAL
View
Controller
Model
View
Presenter
Model
View
ViewModel
Model
3-Tier
Architectur...
High Availability for Client
Server Outage Server Outage +
Offline Cache
New User Behaviours
• Push towards native functionality
Source: http://smashinghub.com/
Mobile Matters
Mobile Performance Trifecta
Bandwidth
Latency Device
Capability
Performance
Can’t depend on browser cache and
caching techniques
Need better ways of client-side caching
for a faster web
Agenda
• Demo Time!
• ‘Offlining’ Static Resources
• ‘Offlining’ Dynamic Content
• Techniques & Managing Data Syncs
Let’s See it Action
• Super Awesome Demo time!
Super awesome app
• 3 (all client-side, HTML5) parts
o HTML5 based camera access
o HTML5 based image processing through
ca...
How can we accomplish this?
• App Cache for Static Assets
• Client Side Data Stores for Dynamic
Content
o LocalStorage
o W...
‘Offlining’ Static Assets
App Cache
• Demo: Let’s take an app offline
App Cache
Must be served with text/cache-manifest mime-type
Use * for Network section. Non-cached resources will not load ...
Gotcha’s & Pitfalls
1. Files always served from cache even if online
2. Can only update cached files by updating the conte...
Updating The Manifest
• App Cache has DOM object
window.applicationCache
• Cache fires events:
cached
checking
downloading...
Updating The Manifest
‘Offlining’ Dynamic Data
LocalStorage
• Key Value Pair Datastore
o 5 MB (but really only 2.5 MB)
o Watch out for performance
o Supported cross-brow...
WebSQL
• SQLite implementation
o ~50MB limit of data storage
IndexedDB
• ‘NoSQL’
o Key Value Pair Datastore
o “No limit”, can ask user for more space
Tools to help
• IndexedDB Shim
o https://github.com/axemclion/IndexedDBShim
• IndexedDB Polyfill
o https://github.com/face...
Data Synchronization
• Breeze.js
• PouchDB
• Single Page Application
o Poll server for updates when online
o Push deltas t...
Summary
• Be careful with App Cache
• Polyfills help manage dynamic data
storage and keep cross-browser/device
compatibili...
Thank You!
@bijanv
Bijan Vaez
Upcoming SlideShare
Loading in...5
×

Look Ma, No Connections! Building Offline-capable Web Apps with HTML5

967

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
967
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Look Ma, No Connections! Building Offline-capable Web Apps with HTML5

  1. 1. Bijan Vaez Look Ma’ No Connections! Building Offline-Capable Web Apps with HTML5 @bijanv m.qconnewyork.com
  2. 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. 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. 4. Instant Updates and Feedback Real-time Audience Response Full customizability Gamification etc The easiest way to build a custom event app
  5. 5. Why Offline-Web?
  6. 6. Why Offline-Web?
  7. 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. 8. High Availability for Client Server Outage Server Outage + Offline Cache
  9. 9. New User Behaviours • Push towards native functionality Source: http://smashinghub.com/
  10. 10. Mobile Matters Mobile Performance Trifecta Bandwidth Latency Device Capability
  11. 11. Performance Can’t depend on browser cache and caching techniques Need better ways of client-side caching for a faster web
  12. 12. Agenda • Demo Time! • ‘Offlining’ Static Resources • ‘Offlining’ Dynamic Content • Techniques & Managing Data Syncs
  13. 13. Let’s See it Action • Super Awesome Demo time!
  14. 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. 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. 16. ‘Offlining’ Static Assets
  17. 17. App Cache • Demo: Let’s take an app offline
  18. 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. 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. 20. Updating The Manifest • App Cache has DOM object window.applicationCache • Cache fires events: cached checking downloading error noupdate obsolete progress updateready
  21. 21. Updating The Manifest
  22. 22. ‘Offlining’ Dynamic Data
  23. 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. 24. WebSQL • SQLite implementation o ~50MB limit of data storage
  25. 25. IndexedDB • ‘NoSQL’ o Key Value Pair Datastore o “No limit”, can ask user for more space
  26. 26. Tools to help • IndexedDB Shim o https://github.com/axemclion/IndexedDBShim • IndexedDB Polyfill o https://github.com/facebook/IndexedDB-polyfill
  27. 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. 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. 29. Thank You! @bijanv Bijan Vaez

×