HTML 5 Offline Web apps

2,086 views

Published on

I have used this presentation in a technology ignition development event invited by the Open Soft Development division group in May 2012.

Feel free to use the content in this presentation, the slides Template is copywritable to Open sofw lda

Published in: Technology, Design
  • Interesting slide deck, bummer that I missed the demos :-/

    Do you have some good examples for HTML5 offline webapps out there, e.g. a word processor or something similar?

    Another thing I'm wondering: is there a way to open an HTML5 webapp while you are offline (thinking of some special DNS caching for HTML5 offline webapps)?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

HTML 5 Offline Web apps

  1. 1. HTML 5Offline Web Applications Page 1
  2. 2. SpeakerABOUT CTO Innovagency/Tech Trainer & Speaker Self Employee amarreiros@gmail.com digitalmindignition.com @AlexMarreiros Page 2
  3. 3. Agenda • Features • Offline Support • Manifest • Cache in the offline model • Scripting Needs • Update Manifesto • Offline Storage • Q&A Page 3
  4. 4. Features Offline Online Page 4
  5. 5. Features Some Questions you may have: If Web application involves a conection why Offline WebApps? •A lot of webapps have the big part of processing done on the client side… •Browsers are often used to business and collaboration applications… •Great part of the operations you do don’t need to be immediatly exectuted, but may be immediatly done… Page 5
  6. 6. Features HTML 5 affiliated Technologies recognize the need to execute some web application even when we are offline (example E-mail). Page 6
  7. 7. Features First access get The needed resources To work Page 7
  8. 8. Features Benefits •Offline surfing •Faster downloads •Efficient server-browser interaction •Structured data storage Page 8
  9. 9. DEMO DEMO Page 9
  10. 10. OfflineSupport To use this HTML 5 enchantment we have first to always verify the support of the browser to Offline Web Apllications function suportOfflineWebapp(){ return !!windows.applicationCache } Or If(Modernizr.applicationcache){ return true } Else{ return false } Page 10
  11. 11. Manifest Web Application Manifest Page 11
  12. 12. DEMO DEMO Page 12
  13. 13. Manifest Example CACHE MANIFEST # Explicitly cached master entries. CACHE: /favicon.ico index.html stylesheet.css images/logo.png scripts/main.js # Resources that require the user to be online. NETWORK: login.php # offline.html will be served in place of all other files FALLBACK: /static.html Page 13
  14. 14. DEMO DEMO Page 14
  15. 15. Cachein theoffline But how Caches work?model Page http://marakana.com/bookshelf/html5_tutorial/offline_applications.html 15
  16. 16. DEMO DEMO Page 16
  17. 17. ScriptingNeed’s We had already seen the Manifest His sections How to choose files each we want to work offline But…How we do to keep our Applicationm working even in offline mode? Page 17
  18. 18. DEMO DEMO Page 18
  19. 19. UpdatingManifesto Page 19
  20. 20. DEMO DEMO Page 20
  21. 21. OfflineStorage And if… i want other types of storage to save data While my Application is working offline? •WebStorage •Web SQL atabase •INDEXDB •Filesystem API Page 21
  22. 22. Pratices • Cache When? • Storage When? • Why Offline Web APPlications? Page 22
  23. 23. DEMO DEMO Page 23
  24. 24. Remember Why Offline WebApps? •A lot of webapps have the big part of processing done on the client side… •Browsers are often used to business and collaboration applications… •Great part of the operations you do don’t need to be immediatly exectuted, but may be immediatly done… Page 24
  25. 25. Q&A Questions Page 25
  26. 26. The End THANK YOU ALL! Next Steps: Experiment Dig More Use Follow & Join the HTML5 community Page 26

×