Building offline web applications

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

OFFLINE?!! 2

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

Update Order Quantity: 5 Product: 34273

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!

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 // Store localStorage.town = "Hamburg"; // Retrieve alert(localStorage.town); Web Storage 5MB+

<<<<<<< HEAD Hamburg is better than Manchester ======= Manchester is better than Hamburg >>>>>>> d237ef28dc3fab5dcccc63f580bfa7780f

TRAVELLING PRODUCT TESTER

js html css APPCACHE

js html css v.254 APPCACHE

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

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” }, }] }] }] } }

25 MongoDB

26 MongoDB v.254

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">

50% of current disk space available to browser 20% of that is the maximum available to a single web app

OR ?

Potential for data conflicts? Size of data? Sensitive data? OR ? Which browsers required? Structure of data? Amount of functionality to work offline?

Challenge Requirements

Offline first and early

Explore the possibilities 37

THANK YOU BIRGITTA @birgitta410 ROB @robmiles0

Building offline web applications

ThoughtWorks

Building offline web applications