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

11,037 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
  • Free video reveals how to remove tattoo naturaly from home. ♣♣♣ https://bit.ly/2TliUmG
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Get Paid To Waste Time On YouTube! ♥♥♥ http://ishbv.com/socialpaid/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Greek Ritual REVERSES Diabetes (do this before bed) Before you go to bed tonight, do this ONE "stupidly simple" Greek ritual to reverse your diabetes... ➤➤ http://scamcb.com/bloodsug/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • There is a REAL system that is helping thousands of people, just like you, earn REAL money right from the comfort of their own homes. The entire system is made up with PROVEN ways for regular people just like you to get started making money online... the RIGHT way... the REAL way. ■■■ http://scamcb.com/ezpayjobs/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Real people just like you are kissing the idea of punching the clock for someone else goodbye, and embracing a new way of living. The internet economy is exploding, and there are literally THOUSANDS of great earnings opportunities available right now, all just one click away. ■■■ http://scamcb.com/ezpayjobs/pdf
       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

×