html 5 offline web apps
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 ldaTRANSCRIPT
![Page 1: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/1.jpg)
Page 1
HTML 5 Offline Web Applications
![Page 2: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/2.jpg)
Page 2
Speaker
ABOUT
CTO Innovagency/Tech Trainer & Speaker Self Employee [email protected] digitalmindignition.com @AlexMarreiros
![Page 3: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/3.jpg)
Page 3
Agenda
• Features
• Offline Support
• Manifest
• Cache in the offline model
• Scripting Needs
• Update Manifesto
• Offline Storage
• Q & A
![Page 4: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/4.jpg)
Page 4
Features
Offline
Online
![Page 5: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/5.jpg)
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: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/6.jpg)
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: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/7.jpg)
Page 7
Features
First access getThe needed resourcesTo work
![Page 8: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/8.jpg)
Page 8
Features
Benefits
•Offline surfing
•Faster downloads
•Efficient server-browser interaction
•Structured data storage
![Page 9: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/9.jpg)
Page 9
DEMO
DEMO
![Page 10: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/10.jpg)
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: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/11.jpg)
Page 11
Manifest
Web Application Manifest
![Page 12: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/12.jpg)
Page 12
DEMO
DEMO
![Page 13: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/13.jpg)
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: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/14.jpg)
Page 14
DEMO
DEMO
![Page 15: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/15.jpg)
Page 15
Cache in the offline model
But how Caches work?
* http://marakana.com/bookshelf/html5_tutorial/offline_applications.html
![Page 16: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/16.jpg)
Page 16
DEMO
DEMO
![Page 17: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/17.jpg)
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: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/18.jpg)
Page 18
DEMO
DEMO
![Page 19: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/19.jpg)
Page 19
UpdatingManifesto
![Page 20: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/20.jpg)
Page 20
DEMO
DEMO
![Page 21: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/21.jpg)
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: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/22.jpg)
Page 22
Pratices
• Cache When?
• Storage When?
• Why Offline Web APPlications?
![Page 23: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/23.jpg)
Page 23
DEMO
DEMO
![Page 24: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/24.jpg)
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: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/25.jpg)
Page 25
Q&A
Questions
![Page 26: HTML 5 Offline Web apps](https://reader033.vdocuments.us/reader033/viewer/2022061206/54836459b4af9fdf2d8b4658/html5/thumbnails/26.jpg)
Page 26
THANK YOU ALL!
Next Steps:Experiment Dig More
Use Follow & Join the
HTML5 community
The End