Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building offline web applications

9,309 views

Published on

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.

Published in: Software, Engineering, Technology
  • How to use "The Scrambler" ot get a girl obsessed with BANGING you... ♣♣♣ https://tinyurl.com/y52uv4vq
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Building offline web applications

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

×