BUILDING OFFLINE WEB APPS
2 case studies
X C o n f | S e p t e m b e r 2 0 1 4
OFFLINE?!!
2
3
SUPERMARKET
Java, Oracle Commodity Tablets Chrome, JavaScript
Stock Ordering System
5
6
Update Order
Quantity: 5 Product: 34273
Queue
8
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
Queue
9
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
Queue
10
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
11
// Store localStorage.town = "Hamburg"; // Retrieve alert(localStorage.town);
5MB+
Web Storage
<<<<<<< HEAD Hamburg is better than Manchester ======= Manchester is better than Hamburg >>>>>>> d237ef28dc3fab5dcccc63f580bfa7780f
13
14
TRAVELLING PRODUCT TESTER
16
js html css
APPCACHE
js html css
APPCACHE
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” }, }] }] }] } }
23
24
25
MongoDB
26
MongoDB
v.254
MongoDB
27
MongoDB
v.254
MongoDB
28
MongoDB
v.254
MongoDB
30
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 ?
Size of data?
Amount of functionality to work offline?
Which browsers required? Structure of data?
Potential for data conflicts? Sensitive data?
OR ?
Challenge Requirements
Offline first and early
Explore the possibilities
37
THANK YOU
BIRGITTA @birgitta410
ROB @robmiles0
Recommended
