SlideShare a Scribd company logo

HTML 5 Offline Web apps

•Download as PPT, PDF•
•
Alexandre Marreiros
Alexandre Marreiros

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

Related slideshows

Architecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web AppsArchitecture & Workflow of Modern Web Apps
Architecture & Workflow of Modern Web Apps
 
The Future of the web
The Future of the webThe Future of the web
The Future of the web
 
What Web Framework To Use?
What Web Framework To Use?What Web Framework To Use?
What Web Framework To Use?
 
1 of 26
HTML 5 Offline Web Applications Page 1
Speaker ABOUT CTO Innovagency/Tech Trainer & Speaker Self Employee amarreiros@gmail.com digitalmindignition.com @AlexMarreiros Page 2
Agenda • Features • Offline Support • Manifest • Cache in the offline model • Scripting Needs • Update Manifesto • Offline Storage • Q&A Page 3
Features Offline Online Page 4
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
Features HTML 5 affiliated Technologies recognize the need to execute some web application even when we are offline (example E-mail). Page 6
Features First access get The needed resources To work Page 7
Features Benefits •Offline surfing •Faster downloads •Efficient server-browser interaction •Structured data storage Page 8
DEMO DEMO Page 9
Offline Support 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
Manifest Web Application Manifest Page 11
DEMO DEMO Page 12
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
DEMO DEMO Page 14
Cache in the offline But how Caches work? model Page http://marakana.com/bookshelf/html5_tutorial/offline_applications.html 15
DEMO DEMO Page 16
Scripting Need’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
DEMO DEMO Page 18
Updating Manifesto Page 19
DEMO DEMO Page 20
Offline Storage 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
Pratices • Cache When? • Storage When? • Why Offline Web APPlications? Page 22
DEMO DEMO Page 23
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
Q&A Questions Page 25
The End THANK YOU ALL! Next Steps: Experiment Dig More Use Follow & Join the HTML5 community Page 26

More Related Content

HTML 5 Offline Web apps

  • 1. HTML 5 Offline Web Applications Page 1
  • 2. Speaker ABOUT CTO Innovagency/Tech Trainer & Speaker Self Employee amarreiros@gmail.com digitalmindignition.com @AlexMarreiros Page 2
  • 3. Agenda • Features • Offline Support • Manifest • Cache in the offline model • Scripting Needs • Update Manifesto • Offline Storage • Q&A Page 3
  • 4. Features Offline Online Page 4
  • 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. Features HTML 5 affiliated Technologies recognize the need to execute some web application even when we are offline (example E-mail). Page 6
  • 7. Features First access get The needed resources To work Page 7
  • 8. Features Benefits •Offline surfing •Faster downloads •Efficient server-browser interaction •Structured data storage Page 8
  • 9. DEMO DEMO Page 9
  • 10. Offline Support 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. Manifest Web Application Manifest Page 11
  • 12. DEMO DEMO Page 12
  • 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. DEMO DEMO Page 14
  • 15. Cache in the offline But how Caches work? model Page http://marakana.com/bookshelf/html5_tutorial/offline_applications.html 15
  • 16. DEMO DEMO Page 16
  • 17. Scripting Need’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. DEMO DEMO Page 18
  • 20. DEMO DEMO Page 20
  • 21. Offline Storage 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. Pratices • Cache When? • Storage When? • Why Offline Web APPlications? Page 22
  • 23. DEMO DEMO Page 23
  • 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. Q&A Questions Page 25
  • 26. The End THANK YOU ALL! Next Steps: Experiment Dig More Use Follow & Join the HTML5 community Page 26

Editor's Notes

  1. Foot Note What happens is that a Web application that works offline, has a container of every necessary files HTML etc needed to mke him work offline. That resources are geted by the browser when the application executes online for the first time. The sync of the offline operations happen when the application is used online again
  2. Offline surfing: Get access to previously viewed web content without any browsing or network connection limitations. Faster downloads: Thanks to the caching feature, web pages and applications will load faster. So the next time you access any site whether offline or online your browser will process the download speedily. Efficient server-browser interaction: Your browser will update cached files if any changes are made at the server end. This means your cached files will remain in sync with the original files every time you log on to a website or utilize any web tools online. Structured data storage: The feature utilizes an SQL database to address issues related to viewing emails locally or browsing dynamic sites like eCommerce shopping carts. Now you can easily add items to your shopping cart, create wish lists, read product reviews while offline without being rushed.
  3. The first step to use Offline enchantments are listed here With Javascript, with modernizer
  4. The way the technology had defined to keep the list of resources needed by the application to run in offline mode is using the creation of a manifest File. In this file we indicate the path to every pages and resources needed for the webapplication to run in offline mode. To say in the HTML 5 that the file uses a manifest is by using the tag <html manifest=“manifestfile.manif” />
  5. More information at http://www.html5rocks.com/en/tutorials/appcache/beginner/ A manifest can have three distinct sections: CACHE, NETWORK, and FALLBACK. CACHE:This is the default section for entries. Files listed under this header (or immediately after the CACHE MANIFEST) will be explicitly cached after they're downloaded for the first time.NETWORK:Files listed under this section are white-listed resources that require a connection to the server. All requests to these resources bypass the cache, even if the user is offline. Wildcards may be used.FALLBACK:An optional section specifying fallback pages if a resource is inaccessible. The first URI is the resource, the second is the fallback. Both URIs must be relative and from the same origin as the manifest file. Wildcards may be used.
  6. FlowShart aquire from http://marakana.com/bookshelf/html5_tutorial/offline_applications.html all rights reserved to them
  7. The browser always start obtaning the manifesto when using a offline Web app When the browser reads the manifest the first think he does is to verify if the manifesto is valid, while the manifest is valid the Browser uses it only when manifest is invalid browser get’s a new manifest even with network avaiable.
  8. Web Storage  is a very convenient form of offline storage, being just a simple structure of key-value pairs Web SQL Database  is just like it says on the tin: an offline SQL database. Implementations today are based on  SQLite , an general-purpose open-source SQL engine IndexedDB  is a nice compromise between Web Storage and Web SQL Database. Like the former, it's relatively simple; and like the latter, it's capable of being very fast.  File API: Directories and System  fills a niche not supported by the other techniques. It gives you a way to store binary content (as well as plain-text), create folder hierarchies, and a means to store potentially huge data structures