OnConnectionLost: The life of an offline web application - JSUnconf 2015
•
0 gostou•1,358 visualizações
Can you use HTML5 technologies to build a web application which works offline? Without a reliable internet connection? Let’s say for two weeks? That is what our client asked us to build. Their people will use the application on the road; reading documents, entering results and uploading pictures. And then they come home, connect to the internet and sync their results with their colleagues’. AppCache, IndexedDB and File API allow us to store the application and its data in the browser. However, they require us to re-think assumptions we used to make in the web: Is the client or the server the master of the data? How can we handle updates of the application? What data do we need to download beforehand? How do you test offline automatically? And what does offline mean anyway? We want to show you what we discussed and how we answered these questions.
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (13)
Semelhante a OnConnectionLost: The life of an offline web application - JSUnconf 2015
Semelhante a OnConnectionLost: The life of an offline web application - JSUnconf 2015 (20)
Mais de Johannes Thönes
Último
Último (20)
OnConnectionLost: The life of an offline web application - JSUnconf 2015
- 1. J S U n c o n f 2 0 1 5 ON CONNECTION LOST The life of an offline web application & war stories about generating PDFs in the browser #jsunconf #offlinefirst @thoughtworks @sgrewenig @jthoenes
- 2. OFFLINE ??!
- 8. WHY ?
- 11. HOW ?
- 12. CLIENT AVAILABLE OFFLINE 2 DATA AVAILABLE OFFLINE 3 DATA CHANGES OFFLINE 1
- 14. YOU LEARNED ABOUT APPLICATION CACHE ALREADY, RIGHT? 14
- 16. APP CACHE
- 17. APP CACHE
- 18. APP CACHE
- 19. INDEX.HTML 1 <!doctype html> 2 <html ... manifest="appcache.manifest"> . <!-- (...) --> 54 </html>
- 20. APPCACHE.MANIFEST 1 CACHE MANIFEST 2 # rev 1 - 2014-10-03T13:50:18.799Z 3 4 CACHE: 5 404.html 6 favicon.ico 7 scripts/scripts.js # (...) 111 112 NETWORK: 113 * 114 115 FALLBACK: 116 / /offline.html
- 21. APPCACHE.MANIFEST 1 CACHE MANIFEST 2 # rev 1 - 2014-10-03T13:50:18.799Z 3 4 CACHE: 5 404.html 6 favicon.ico 7 scripts/scripts.js # (...) 111 112 NETWORK: 113 * 114 115 FALLBACK: 116 / /offline.html
- 22. APPCACHE.MANIFEST 1 CACHE MANIFEST 2 # rev 1 - 2014-10-03T13:50:18.799Z 3 4 CACHE: 5 404.html 6 favicon.ico 7 scripts/scripts.js # (...) 111 112 NETWORK: 113 * 114 115 FALLBACK: 116 / /offline.html
- 23. APPCACHE.MANIFEST 1 CACHE MANIFEST 2 # rev 1 - 2014-10-03T13:50:18.799Z 3 4 CACHE: 5 404.html 6 favicon.ico 7 scripts/scripts.js # (...) 111 112 NETWORK: 113 * 114 115 FALLBACK: 116 / /offline.html
- 24. APPCACHE.MANIFEST 1 CACHE MANIFEST 2 # rev 1 - 2014-10-03T13:50:18.799Z 3 4 CACHE: 5 404.html 6 favicon.ico 7 scripts/scripts.js # (...) 111 112 NETWORK: 113 * 114 115 FALLBACK: 116 / /offline.html
- 27. ADDITIONAL CACHE
- 30. CLIENT AVAILABLE OFFLINE 2 DATA AVAILABLE OFFLINE 1
- 31. 31 //Store localStorage.town = “Antwerpen” //Retrieve alert(localStorage.town) WEB STORAGE Easy to use key/value store Synchronous API
- 32. INDEXED DB
- 33. 33
- 34. 10 var dbRequest = indexedDB.open('db_name', ‘1’); 31 var trans = database.transaction(['name'], ‘readonly'); 32 var store = trans.objectStore('name'); 33 var getRequest = store.get('4'); 34 getRequest.onsuccess = // … 42 var index = store.index('stockAmount'); 43 var cursorRequest = index.openCursor(IDBKeyRange.lower(15)); 44 cursorRequest.onsuccess = // ... THE API
- 35. 10 var dbRequest = indexedDB.open('db_name', ‘1’); 31 var trans = database.transaction(['name'], ‘readonly'); 32 var store = trans.objectStore('name'); 33 var getRequest = store.get('4'); 34 getRequest.onsuccess = // … 42 var index = store.index('stockAmount'); 43 var cursorRequest = index.openCursor(IDBKeyRange.lower(15)); 44 cursorRequest.onsuccess = // ... THE API
- 36. 10 var dbRequest = indexedDB.open('db_name', ‘1’); 31 var trans = database.transaction(['name'], ‘readonly'); 32 var store = trans.objectStore('name'); 33 var getRequest = store.get('4'); 34 getRequest.onsuccess = // … 42 var index = store.index('stockAmount'); 43 var cursorRequest = index.openCursor(IDBKeyRange.lower(15)); 44 cursorRequest.onsuccess = // ... THE API
- 37. 10 var dbRequest = indexedDB.open('db_name', ‘1’); 31 var trans = database.transaction(['name'], ‘readonly'); 32 var store = trans.objectStore('name'); 33 var getRequest = store.get('4'); 34 getRequest.onsuccess = // … 42 var index = store.index('stockAmount'); 43 var cursorRequest = index.openCursor(IDBKeyRange.lower(15)); 44 cursorRequest.onsuccess = // ... THE API
- 38. 10 var dbRequest = indexedDB.open('db_name', ‘1’); 31 var trans = database.transaction(['name'], ‘readonly'); 32 var store = trans.objectStore('name'); 33 var getRequest = store.get('4'); 34 getRequest.onsuccess = // … 42 var index = store.index('stockAmount'); 43 var cursorRequest = index.openCursor(IDBKeyRange.lower(15)); 44 cursorRequest.onsuccess = // ... THE API
- 39. 10 var dbRequest = indexedDB.open('db_name', ‘1’); 31 var trans = database.transaction(['name'], ‘readonly'); 32 var store = trans.objectStore('name'); 33 var getRequest = store.get('4'); 34 getRequest.onsuccess = // … 42 var index = store.index('stockAmount'); 43 var cursorRequest = index.openCursor(IDBKeyRange.lower(15)); 44 cursorRequest.onsuccess = // ... THE API
- 41. MIGRATIONS
- 45. 45 GET IMAGE
- 48. CLIENT AVAILABLE OFFLINE 2 DATA AVAILABLE OFFLINE 3 DATA CHANGES OFFLINE 1
- 51. QUEUE 2
- 52. PROCESSING 3
- 53. <<<<<<< HEAD Hamburger is better than Berliner. ======= Berlin is better than Hamburger. >>>>>>> d237ef28dc3fab5dcccc63f580bfa7780f
- 54. OR
- 55. SIZE OF DATA ?
- 57. SENSITIVE DATA ?
- 60. AMOUNT OF FUNCTIONALITY TO WORK OFFLINE ?
- 64. PDF IN THE BROWSER
- 66. "sections": [{ "blocks": [{ "contentItems": [ { "uid": "aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee", "wysiwyg": "<p>Decorative <i>deer</i> figures in a set of 2</p><img our- src=“aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee.png”>” }, { "libraryItemUid": "aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee", "uid": "aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee", "wysiwyg": "<p>There may be <strong>no sign</strong> of a seam in the material. [FT-PLACEHOLDER]</p>" }, { "libraryItemUid": "aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee", "uid": "aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee", "wysiwyg": "<p>Set comprises a large deer and a small deer [FT-
- 67. HAVE A LOOK ! 67
- 68. USE THE BROWSER TO PRINT? 68
- 69. var doc = new jsPDF(); doc.text(20, 20, 'Hello world.'); doc.save('Test.pdf'); https://github.com/MrRio/jsPDF
- 70. PDFDocument = require 'pdfkit' doc = new PDFDocument doc.pipe fs.createWriteStream('output.pdf') doc.font('fonts/PalatinoBold.ttf') .fontSize(25) .text('Some text with an embedded font!', 100, 100) doc.addPage() .fontSize(25) .text('Here is some vector graphics...', 100, 100) doc.end() https://github.com/devongovett/pdfkit
- 71. pdfMake.createPdf({ content: [ { text: 'This paragraph will have a bigger font', fontSize: 15 }, { text: [ { text: 'restyle part of it and make it bigger ', fontSize: 15 }, 'than the rest.' ] } ] }).open(); https://github.com/bpampuch/pdfmake
- 73. SHORT DEMO? 73
- 74. 74
- 75. HTML -> PDF PARSER 75
- 76. PAGE BREAKS 76
- 77. LANDSCAPE 77
- 78. 95 CHARACTERS 78