html5 unplugged

Download HTML5 unplugged

Post on 08-May-2015

268 views

Category:

Technology

0 download

Embed Size (px)

DESCRIPTION

Talk von SBB Developer Day 2012 über HTML5 Applikationen Offline-Applikationen

TRANSCRIPT

  • 1.HTML5 unpluggedmarc.baechinger@zuehlke.com Dienstag, 11. Februar 14

2. The tale of the evernet Dienstag, 11. Februar 14 3. The World Wide Web. An evernet?Dienstag, 11. Februar 14 4. Dienstag, 11. Februar 14 5. In der freien Natur weitab von high speed InternetDienstag, 11. Februar 14 6. in Tiefgaragen und anderen unterirdischen Rumen Dienstag, 11. Februar 14 7. Auf Reisen im Zug...Dienstag, 11. Februar 14 8. Text...sptestens in TunnelsDienstag, 11. Februar 14 9. beim Sparen von RoamingkostenDienstag, 11. Februar 14 10. Dienstag, 11. Februar 14 11. Ofine Technology Dienstag, 11. Februar 14 12. das Web wird sesshaftDienstag, 11. Februar 14 13. resourcesapp statedata sourceshtml, css, js, json, xml, png, mp3, mp4appcacheDienstag, 11. Februar 14localStorageFile APIDatabase API* 14. appcacheDienstag, 11. Februar 14localStorageFile APIDatabase API* 15. Resource caching Dienstag, 11. Februar 14 16. CACHE MANIFEST index.html styles.css app.js NETWORK: /service/fahrplan.jsonDienstag, 11. Februar 14 17. ServerBrowser GET /index.html HTTP/1.1 HTTP/1.1 200 OK GET /*.* HTTP/1.1 HTTP/1.1 200 OK GET /sbb.appcache HTTP/1.1 HTTP/1.1 200 OKDienstag, 11. Februar 14 18. ServerBrowser GET /index.html HTTP/1.1 HTTP/1.1 200 OK GET /*.* HTTP/1.1 HTTP/1.1 200 OK GET /sbb.appcache HTTP/1.1 HTTP/1.1 200 OKGET /index.html HTTP/1.1 HTTP/1.1 200 OKDienstag, 11. Februar 14 19. ServerBrowser GET /index.html HTTP/1.1 HTTP/1.1 200 OK GET /*.* HTTP/1.1 HTTP/1.1 200 OK GET /sbb.appcache HTTP/1.1 HTTP/1.1 200 OKGET /index.html HTTP/1.1 HTTP/1.1 200 OK GET /styles.css HTTP/1.1 HTTP/1.1 200 OKDienstag, 11. Februar 14 20. ServerBrowser GET /index.html HTTP/1.1 HTTP/1.1 200 OK GET /*.* HTTP/1.1 HTTP/1.1 200 OK GET /sbb.appcache HTTP/1.1 HTTP/1.1 200 OKGET /index.html HTTP/1.1 HTTP/1.1 200 OK GET /styles.css HTTP/1.1 HTTP/1.1 200 OK GET /app.js HTTP/1.1 HTTP/1.1 200 OKDienstag, 11. Februar 14 21. ofine resource cache64.88%22 15 12 5.1 10 Mobile Dienstag, 11. Februar 14DesktopWWW 22. live reload demo reload reload Dienstag, 11. Februar 14 23. Application state Dienstag, 11. Februar 14 24. localStorage { setLastCheckDate: function() { localStorage.lastCacheCheck = new Date(); console.log(typeof localStorage.lastCacheCheck); // string }, getLastCheckDate: function () { if (localStorage.lastCacheCheck) { return new Date(localStorage.lastCacheCheck); } else { return undefined; } } }Dienstag, 11. Februar 14 25. localStorage var storage = { store: function(name, obj) { localStorage[name] = JSON.stringify(obj); }, read: function (name) { if (localStorage[name]) { return JSON.parse(localStorage[name]); } else { return undefined; } } };Dienstag, 11. Februar 14 26. localStorage and sessionStorage91.85%22 15 12 5.1 8 Mobile Dienstag, 11. Februar 14DesktopWWW 27. Data sources Dienstag, 11. Februar 14 28. SQL select var db = openDatabase("fahrplan", "1.0", "SBB", 50*1024*1024); db.transaction(function(tx) { tx.executeSql("SELECT * FROM favorite", [], ! ! ! function success (tx, rs) { ! ! ! ! callback({ ! ! ! ! ! connections: rs.rows ! ! ! ! }); ! ! ! }, ! ! ! function error () { ! ! ! ! console.error(arguments); ! ! ! } ); }); Dienstag, 11. Februar 14 29. SQL insert transaction.executeSql( ! "INSERT INTO favorite(dep, arrival)" + ! "VALUES (?,?)", ! [ ! connection.departure, ! connection.arrival ], ! successHandler, ! errorHandler ); Dienstag, 11. Februar 14 30. 45.44%Web SQL API22 Mobile Dienstag, 11. Februar 14-12 5.1 Desktop-WWW 31. Indexed DB API22 15 Mobile Dienstag, 11. Februar 1417.92%Desktop-10 WWW 32. Indexed or SQL DB API~60%22 15 12 5.1 10 Mobile Dienstag, 11. Februar 14DesktopWWW 33. Network monitoring Dienstag, 11. Februar 14 34. network state window.addEventListener("offline", function(e) { $("#network-monitor").removeClass("online"); }, false); window.addEventListener("online", function(e) { $("#network-monitor").addClass("online"); }, false); var search = function (callback) { if (navigator.onLine) { $.ajax({success: callback}); } else { callback(localStorage.lastSearch); } } Dienstag, 11. Februar 14 35. navigator.connectionnavigator.connection.bandwidth navigator.connection.meteredDienstag, 11. Februar 14 36. navigator.connection.typeConnection.UNKNOWN Connection.ETHERNET Connection.WIFI Connection.CELL_2G Connection.CELL_3G Connection.CELL_4G Connection.NONE Dienstag, 11. Februar 14 37. Server availability // register global ajax handlers $(document).ajaxSuccess(setOnline); $(document).ajaxError(setOffline); // check for backend server availabiliy var checkServerAvailability = function (callback) { ! $.ajax({ ! url: "data/probe.json", ! ! dataType: "json", ! ! timeout: CONNECTION_TIMEOUT, ! ! complete: callback || function () {} ! }); }; checkServerAvailability();Dienstag, 11. Februar 14 38. Platform integration Dienstag, 11. Februar 14 39. WWWCordova/ WorklightWindows RTSafari iOSFirefox AuroraFirefox AndroidCEF/App.js/ Brakets shellDienstag, 11. Februar 14MobileOSX DashboardstandaloneDesktopFirefox OS 40. DesktopMobile standalonestandaloneOSX DashboardCordova/ WorklightWindows RTSafari iOSFirefox AuroraFirefox AndroidstandaloneWWWCEF/App.js/ Brakets shellDienstag, 11. Februar 14standaloneFirefox OS 41. DesktopMobile standaloneCordova/ WorklightstandaloneOSX Dashboard AppstoreWindows RTSafari iOSAppstorestandaloneWWWCEF/App.js/ Brakets shellAppstoreAppstoreFirefox AndroidFirefox Aurora standaloneDienstag, 11. Februar 14AppstoreAppstoreFirefox OSAppstore 42. Modern Browsers+ + + + + Dienstag, 11. Februar 14Desktop/Tablet/Phone Simple Deployment Bookmark, Favorites, Pinned Site/Tabs Browser Home als Einstiegspunkt Fullscreen Modus verfgbar keine Desktop-Integration Abhngigkeit vom Browser als Platform 43. Add to Home ScreenDienstag, 11. Februar 14 44. Add to Home ScreenDienstag, 11. Februar 14 45. Add to Home ScreenDienstag, 11. Februar 14 46. live reload demo reload reload Dienstag, 11. Februar 14 47. iOS und Android AppsDienstag, 11. Februar 14 48. Chromium Embedding Framework+ + + Dienstag, 11. Februar 14Desktop-Integration Standalone fr Win/Mac/Lin einheitliche HTML/JS-Engine Installer notwendig Build- und Kongurationsskills 49. Firefox OS/ MarketplaceDienstag, 11. Februar 14 50. Dienstag, 11. Februar 14 51. @marcbaechingerks for tha n ening listQ&A Browsercoveragedaten: caniuse.com Dienstag, 11. Februar 14 52. Backup slidesDienstag, 11. Februar 14 53. Wsasx0.0002%22 15 12 5.1 8 Mobile Dienstag, 11. Februar 14DesktopWWW 54. feature testing Dienstag, 11. Februar 14 55. Sencha Desktop PackagerDienstag, 11. Februar 14 56. server log debug: debug: debug: debug: debug: debug: debug: debug:serving serving serving serving serving serving serving servingfile file file file file file file fileat: at: at: at: at: at: at: at:src/index.html src/sbb.appcache src/css/bootstrap.css src/css/style.css src/css/bootstrap-responsive.css src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpgdebug: debug: debug: debug: debug: debug:serving serving serving serving serving servingfile file file file file fileat: at: at: at: at: at:src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg src/css/style.css src/css/bootstrap.css src/css/bootstrap-responsive.cssdebug: debug: debug:serving file at: serving file at: serving file at:Dienstag, 11. Februar 14src/sbb.appcache src/sbb.appcache src/sbb.appcache 57. server log debug: debug: debug: debug: debug: debug: debug: debug:serving serving serving serving serving serving serving servingfile file file file file file file fileat: at: at: at: at: at: at: at:src/index.html src/sbb.appcache src/css/bootstrap.css src/css/style.css src/css/bootstrap-responsive.css src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpgdebug: debug: debug: debug: debug: debug:serving serving serving serving serving servingfile file file file file fileat: at: at: at: at: at:src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg src/css/style.css src/css/bootstrap.css src/css/bootstrap-responsive.cssdebug: debug: debug:serving file at: serving file at: serving file at:Dienstag, 11. Februar 14src/sbb.appcache src/sbb.appcache src/sbb.appcache 58. server log debug: debug: debug: debug: debug: debug: debug: debug:serving serving serving serving serving serving serving servingfile file file file file file file fileat: at: at: at: at: at: at: at:src/index.html src/sbb.appcache src/css/bootstrap.css src/css/style.css src/css/bootstrap-responsive.css src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpgdebug: debug: debug: debug: debug: debug:serving serving serving serving serving servingfile file file file file fileat: at: at: at: at: at:src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg src/css/style.css src/css/bootstrap.css src/css/bootstrap-responsive.cssdebug: debug: debug:serving file at: serving file at: serving file at:Dienstag, 11. Februar 14src/sbb.appcache src/sbb.appcache src/sbb.appcachereload 59. server log debug: debug: debug: debug: debug: debug: debug: debug:serving serving serving serving serving serving serving servingfile file file file file file file fileat: at: at: at: at: at: at: at:src/index.html src/sbb.appcache src/css/bootstrap.css src/css/style.css src/css/bootstrap-responsive.css src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpgdebug: debug: debug: debug: debug: debug:serving serving serving serving serving servingfile file file file file fileat: at: at: at: at: at:src/lib/jquery-1.8.2.js src/javascript/main.js src/img/train.jpg src/css/style.css src/css/bootstrap.css src/css/bootstrap-responsive.cssdebug: debug: debug:serving file at: serving file at: serving file at:Dienstag, 11. Februar 14src/sbb.appcache src/sbb.appcache src/sbb.appcachereload 60. server log debug: debug: debug: debug: debug: debug: debug: debug:serving serving serving serving serving serving serving servingfile file file file file file file fileat: at: at: at: at: at: at: at:src/index.html src/sbb.appcache src/css/bootstrap.css src/css/style.css src/c