Slide 1
Slide 1 text
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
Slide 2
Slide 2 text
OFFLINE?!!
2
Slide 3
Slide 3 text
3
Slide 4
Slide 4 text
SUPERMARKET
Java, Oracle
Commodity Tablets
Chrome, JavaScript
Stock Ordering System
Slide 5
Slide 5 text
5
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
7
// Store
localStorage.town = "Hamburg";
// Retrieve
alert(localStorage.town);
5MB+
Web Storage
Slide 8
Slide 8 text
<<<<<<< HEAD
Hamburg is better than Manchester
=======
Manchester is better than Hamburg
>>>>>>> d237ef28dc3fab5dcccc63f580bfa7780f
Slide 9
Slide 9 text
9
Slide 10
Slide 10 text
10
Slide 11
Slide 11 text
TRAVELLING PRODUCT TESTER
Slide 12
Slide 12 text
12
Slide 13
Slide 13 text
js
html
css
APPCACHE
Slide 14
Slide 14 text
js
html
css
v.254
APPCACHE
Slide 15
Slide 15 text
1
2
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
Slide 16
Slide 16 text
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” },
}]
}]
}]
}
}
Slide 17
Slide 17 text
17
Slide 18
Slide 18 text
18
Slide 19
Slide 19 text
19
MongoDB
v.254
MongoDB
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
21
Slide 22
Slide 22 text
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
![]()
Slide 23
Slide 23 text
50% of current disk space
available to browser
20% of that is the maximum
available to a single web app
Slide 24
Slide 24 text
OR ?
Slide 25
Slide 25 text
Size of data?
Amount of functionality to work offline?
Which browsers required?
Structure of data?
Potential for data conflicts?
Sensitive data?
OR ?
Slide 26
Slide 26 text
Challenge
Requirements
Slide 27
Slide 27 text
Offline first
and early
Slide 28
Slide 28 text
Explore the
possibilities
28
Slide 29
Slide 29 text
THANK YOU
BIRGITTA
@birgitta410
ROB
@robmiles0