Embed Size (px)
DESCRIPTION
In today's mobile-enabled world, the ability for apps to work offline is a frequent ask. There are several approaches that can be taken to achieve this depending on the scenario. In this talk, Birgitta and Rob will discuss what is meant by offline, explore some patterns for offline working from their own experience and discuss some of the things to consider.
Citation preview
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
