Building Offline Webapps

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

OFFLINE?!! 2

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

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

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

19 MongoDB v.254 MongoDB

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

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 28

THANK YOU BIRGITTA @birgitta410 ROB @robmiles0

Building Offline Webapps

Building Offline Webapps

Birgitta Boeckeler

More Decks by Birgitta Boeckeler

Other Decks in Technology

Featured

Transcript