Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Offline Webapps

Building Offline Webapps

Slides as presented with Rob Miles at XConf Europe 2014 https://www.thoughtworks.com/talks/patterns-for-offline-working-xconf-europe-2014

645147e9899005bc24e5ff7d65a1d60c?s=128

Birgitta Boeckeler

September 23, 2014
Tweet

Transcript

  1. BUILDING OFFLINE WEB APPS 2 case studies B i r

    g i t t a B ö c k e l e r | R o b M i l e s
  2. OFFLINE?!! 2

  3. 3

  4. SUPERMARKET Java, Oracle Commodity Tablets Chrome, JavaScript Stock Ordering System

  5. 5

  6. Queue Update Order Quantity: 5 Product: 34273 Update Order Quantity:

    5 Product: 34273 Update Order Quantity: 5 Product: 34273 Update Order Quantity: 5 Product: 34273 Update Order Quantity: 5 Product: 34273 Message Processor
  7. 7 // Store localStorage.town = "Hamburg"; // Retrieve alert(localStorage.town); 5MB+

    Web Storage
  8. <<<<<<< HEAD Hamburg is better than Manchester ======= Manchester is

    better than Hamburg >>>>>>> d237ef28dc3fab5dcccc63f580bfa7780f
  9. 9

  10. 10

  11. TRAVELLING PRODUCT TESTER

  12. 12

  13. js html css APPCACHE

  14. js html css v.254 APPCACHE

  15. 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
  16. 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” }, }] }] }] } }
  17. 17

  18. 18

  19. 19 MongoDB v.254 MongoDB

  20. None
  21. 21

  22. 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">
  23. 50% of current disk space available to browser 20% of

    that is the maximum available to a single web app
  24. OR ?

  25. Size of data? Amount of functionality to work offline? Which

    browsers required? Structure of data? Potential for data conflicts? Sensitive data? OR ?
  26. Challenge Requirements

  27. Offline first and early

  28. Explore the possibilities 28

  29. THANK YOU BIRGITTA @birgitta410 ROB @robmiles0