Embed Size (px)
DESCRIPTION
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
Citation preview
Page 1
HTML 5 Offline Web Applications
Page 2
Speaker
ABOUT
CTO Innovagency/Tech Trainer & Speaker Self Employee [email protected] digitalmindignition.com @AlexMarreiros
Page 3
Agenda
• Features
• Offline Support
• Manifest
• Cache in the offline model
• Scripting Needs
• Update Manifesto
• Offline Storage
• Q & A
Page 4
Features
Offline
Online
Page 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 6
Features
HTML 5 affiliated Technologies recognize the need to execute some web application even when we are offline (example E-mail).
Page 7
Features
First access getThe needed resourcesTo work
Page 8
Features
Benefits
•Offline surfing
•Faster downloads
•Efficient server-browser interaction
•Structured data storage
Page 9
DEMO
DEMO
Page 10
If(Modernizr.applicationcache){return true
}Else{
return false}
To use this HTML 5 enchantment we have first to always verify the support of the browser to Offline Web Apllications
Or
Offline Support
function suportOfflineWebapp(){return !!windows.applicationCache
}
Page 11
Manifest
Web Application Manifest
Page 12
DEMO
DEMO
Page 13
Example
Manifest
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 14
DEMO
DEMO
Page 15
Cache in the offline model
But how Caches work?
* http://marakana.com/bookshelf/html5_tutorial/offline_applications.html
Page 16
DEMO
DEMO
Page 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 18
DEMO
DEMO
Page 19
UpdatingManifesto
Page 20
DEMO
DEMO
Page 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 22
Pratices
• Cache When?
• Storage When?
• Why Offline Web APPlications?
Page 23
DEMO
DEMO
Page 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 25
Q&A
Questions
Page 26
THANK YOU ALL!
Next Steps:Experiment Dig More
Use Follow & Join the
HTML5 community
The End
