Building offline web applications
•
50 likes•16,256 views
The document discusses building offline web applications. It provides two case studies, including a stock ordering system for a supermarket built with Java and Oracle on tablets, and a travelling product tester app built with Chrome, JavaScript for offline caching. It also covers using local storage, app caching, and setting up a file system to store files locally and upload/download to a server.
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Building offline web applications
Similar to Building offline web applications (20)
More from Thoughtworks
More from Thoughtworks (20)
Recently uploaded
Recently uploaded (20)
Building offline web applications
- 1. X C o n f | S e p t e m b e r 2 0 1 4 BUILDING OFFLINE WEB APPS 2 case studies
- 2. OFFLINE?!! 2
- 3. 3
- 4. SUPERMARKET Java, Oracle Stock Ordering System Commodity Tablets Chrome, JavaScript
- 5. 5
- 7. Update Order Quantity: 5 Product: 34273
- 8. Queue Update Order Quantity: 5 Product: 34273 Update Order! Update Order! ! Update Order! ! Quantity: 5! Product: 34273! Update ! Order Quantity: 5 Product: 34273 Quantity: 5! Product: 34273! Quantity: 5! Product: 34273!
- 9. Queue Update Order Quantity: 5 Product: 34273 Update Order! Update Order! ! Update Order! ! Quantity: 5! Product: 34273! Update ! Order Quantity: 5 Quantity: 5! Product: 34273! Quantity: 5! Product: 34273! Message Processor Product: 34273
- 10. Queue Update Order Quantity: 5 Product: 34273 Update Order! Update Order! ! Update Order! ! Quantity: 5! Product: 34273! Update ! Order Quantity: 5 Quantity: 5! Product: 34273! Quantity: 5! Product: 34273! Message Processor Product: 34273
- 11. 11 // Store localStorage.town = "Hamburg"; // Retrieve alert(localStorage.town); Web Storage 5MB+
- 12. <<<<<<< HEAD Hamburg is better than Manchester ======= Manchester is better than Hamburg >>>>>>> d237ef28dc3fab5dcccc63f580bfa7780f
- 13. 13
- 14. 14
- 16. 16
- 17. js html css APPCACHE
- 18. js html css APPCACHE
- 19. js html css APPCACHE
- 20. js html css v.254 APPCACHE
- 21. 1 <!doctype html> 2 <html ... manifest="cache.manifest"> 1 CACHE MANIFEST 2 # rev 12 -‐ 2014-‐09-‐22T15:28:08.540Z 4 CACHE: 5 404.html 6 favicon.ico 7 scripts/scripts.js 8 scripts/vendor.js 9 styles/application.css 10 index.html 12 NETWORK: 13 * 15 FALLBACK: 16 / /offline.html
- 22. Update Order Quantity: 5 Product: 34273 { "uid": "aaaaaaaa-‐bbbb-‐cccc-‐dddd-‐eeeeeeeeeeee", "meta": {...}, "title": "Quality sample XYZ", "image": "aaaaaaaa-‐bbbb-‐cccc-‐dddd-‐eeeeeeeeeeee.png", "content": { "sections": [{ "uid": "aaaaaaaa-‐bbbb-‐cccc-‐dddd-‐eeeeeeeeeeee" "comments": [], "title": "A block title", "blocks": [{ "uid": "aaaaaaaa-‐bbbb-‐cccc-‐dddd-‐eeeeeeeeeeee", "title": "Material -‐ Lining", "type": "MATERIAL”, "colours": [ { "code": "18-‐3015 TPX", "colourName": "Amethyst", "comments": [], "standard": "Pantone", "uid": "aaaaaaaa-‐bbbb-‐cccc-‐dddd-‐eeeeeeeeeeee" } ], "compositions": [{ "uid": "aaaaaaaa-‐bbbb-‐cccc-‐dddd-‐eeeeeeeeeeee" "comments": [ { text: "thread count seems off" ], "group": "Vegetable fibres", "name": "Cotton", "percentage": 100, "sustainability": { value: “Organic” }, }] }] }] } }
- 23. 23
- 24. 24
- 25. 25 MongoDB
- 26. 26 MongoDB v.254
- 27. 27 MongoDB v.254
- 28. 28 MongoDB v.254
- 30. 30
- 31. Set up file system + request quota Store file locally Update image tag Store file locally Upload image Download file from server Download image Upload file to server Update image tag <img src="filesystem:http://192.168.50.4/ persistent/3ebc23e1-‐10bf-‐5b60-‐440.jpg">
- 32. 50% of current disk space available to browser 20% of that is the maximum available to a single web app
- 33. OR ?
- 34. Potential for data conflicts? Size of data? Sensitive data? OR ? Which browsers required? Structure of data? Amount of functionality to work offline?
- 36. Offline first and early
- 37. Explore the possibilities 37
- 38. THANK YOU BIRGITTA @birgitta410 ROB @robmiles0