HTML 5 Offline Web apps
Download as PPT, PDF4 likes1,497 views
The document discusses the features and benefits of HTML5 offline web applications, highlighting the importance of client-side processing and the ability to function without immediate online access. It covers aspects such as offline support, caching mechanisms, and various storage options available for offline functionality. The presentation concludes with a call to experiment and engage with the HTML5 community.
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
- 19. Updating Manifesto Page 19
- 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
- #8: 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
- #9: 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.
- #11: The first step to use Offline enchantments are listed here With Javascript, with modernizer
- #12: 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” />
- #14: 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.
- #16: FlowShart aquire from http://marakana.com/bookshelf/html5_tutorial/offline_applications.html all rights reserved to them
- #20: 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.
- #22: 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