Offline Html5 3days
•Download as KEY, PDF•
15 likes•5,230 views
The document discusses the evolution of HTML5 and new web technologies like Web Workers, Web Storage, Web Databases, and Cache Manifests that allow web applications to work offline. It then introduces the Alexing Framework for building web applications using these HTML5 features with a backend database and synchronization between the client and server through a middleware layer. The framework aims to provide an architecture and APIs for developing offline-first applications using HTML5 technologies.
![Web Database
API API
API
var db = openDatabase(...)
db.transaction(function(tx) {
tx.executeSql(“...”, [...],
function onSuccess(tx, results) {
...
},
function onError(tx, error) { ...}
});
API
var db = openDatabaseSync(...)
db.transaction(function(tx) {
var results = tx.executeSql(“...”);
...](https://image.slidesharecdn.com/offlinehtml53days-091002043601-phpapp02/85/Offline-Html5-3days-16-320.jpg)
Offline Html5 3days
- 1. HTML5 Web @
- 2. html5-developers-jp Google Web Google API Expert HTML5 2007 Gears Gears
- 3. Web Web API Web Database Web Storage Web Workers HTML5 Web
- 4. :HTML5 html5-developers-jp 2009/7/10 7 687 8 1,051 9 1,304 Google Trend HTML5
- 5. Web Web 2007 Google Gears HTML5 API Gears Web Workers Gears
- 6. Web Gears Web Google Docs, Gmail, Google Reader, Remenber the milk... PC
- 7. Web ( )
- 8. Web API Web Workers Web Storage Web Database
- 9. Web
- 10. CACHE MANIFEST # version: 200909241054 hello.html hello.js text/cache-manifest MIME Web html manifest URL : <html manifest=”hello.manifest”>
- 11. - UTF-8 1 CACHE MANIFEST # version: 200909241054 hello.html hello.js
- 12. (1)
- 13. (2) JavaScript 5 updateready Gears ResourceStore
- 14. Web Database SQL WEB DB
- 15. Web Database DB 1 DB DB Browser exampleA.com exampleB.com DB1 DB1 Table1 DB1 Table1 DB1 Table1 Table1 Table1 Table1
- 16. Web Database API API API var db = openDatabase(...) db.transaction(function(tx) { tx.executeSql(“...”, [...], function onSuccess(tx, results) { ... }, function onError(tx, error) { ...} }); API var db = openDatabaseSync(...) db.transaction(function(tx) { var results = tx.executeSql(“...”); ...
- 17. Web Database ( Safari DB DB
- 18. Web Storage Web Database LocalStorage SessionStorage
- 19. Web Storage Web Database Web Storage localStorage sessionStorage // localStorage/sessionStorage // localStorage.setItem(“key”, “value”); var val = localStorage.getItem(“key”); // localStorage.key =“value”; var val = localStorage.key;
- 20. Web Workers JavaScript UI JavaScript
- 21. Web Workers → window document JS API UI Thread create manipulate Worker DOM (window, postMessage document) postMessage
- 22. Web Workers → window document JS API UI Thread create manipulate Worker DOM (window, postMessage document) postMessage
- 23. Web Workers → window document JS API UI Thread create manipulate Worker DOM (window, postMessage document) × postMessage
- 24. Web Workers : new Worker(scriptUrl) : worker.postMessage(message); : worker.onmessage(event); postMessage onmessage ui.js worker.js worker.onmessage = onmessage = function(msg) { function(msg) { ... ... postMessage(...) } } function a { worker.postMessage(...) }
- 25. Web Workers (
- 26. Web Workers Web Workers Worker switch-case
- 27. Web Workers Web Workers Worker switch-case (^^)
- 28. Web Workers Web Workers Worker → fakeworker.js eval() setTimeout() Web Workers switch-case (^^)
- 29. Web Workers Web Workers Worker → fakeworker.js eval() setTimeout() Web Workers switch-case → AlexService Web Workers (^^)
- 30. HTML5 Web HTML5(Open Web Platform)
- 31. HTML5 Web
- 32. Web DB
- 33. HTML5 Web DB Download/Upload DB
- 34. HTML5 Web Open Web Architecture( ) DB Download/Upload DB
- 35. Open Web Architecture • • • • • •
- 36. Open Web Architecture • • • • • •
- 37. Open Web Architecture • • • • • •
- 38. Open Web Architecture • • • • • • • • •
- 39. Open Web Architecture • • • • • • • • •
- 40. Alexing Framework!! • • • Cloud DB Client AlexingDownload/Upload DB
- 41. Alexing Framework • • • • class Cloud Greeting Java Class DB Client DB
- 42. Alexing Framework • • • • class Cloud Greeting Java Class DB Middleware class Alexing Client Greeting Sync Engine JavaScript Class DB
- 43. Alexing Framework • • • • class Cloud Greeting Java Class DB Middleware class Alexing Client Greeting Sync Engine edit Application JavaScript Class DB retrieve
- 44. Alexing Framework (1) • • • • • • •
- 45. Alexing Framework (2) • • •
- 46. Alexing Framework (3) • • class.find() • instance.save() • instance.remove() • • database.synchronize()
- 47. Alexing Framework • • • • • • • •