Post on 16-Apr-2017
Offline Web!Offline Web Apps!
ARTEM TABALIN!
Why “Offline Apps”!
No Internet connection!
Poor Internet connection!
Improve performance!
Offline Apps Includes!
Offline Storage!data on client-side!
Application cache!html, js, css, images!!
Detect status!
• onLine property!
• online event!
• offline event!
Offline Storage!History. Web Storage. Web SQL. IndexedDB. File API.!!
Offline Storage History!
Cookie
Plugins!
HTML5!Web Storage
IndexedDB Web SQL Filesystem API
20 x 4KB
Web Storage!
Key-value pair storage!
Web Storage!
Pros & Cons!
• Simple!
• Cross-browser!
• No transactions!
• Serialization/Deserialization!
• Limited space ! 5MB
Web SQL Database!
SQLite in the browser!
Web SQL Database!
Pros & Cons!
• Relational DB advantages!
• Browser support!
• Deprecated!
Indexed Database API!NoSQL key-value DB with indexing!
Indexed Database API!
Pros & Cons!
• Transactions support!
• No size limits (almost)!
• Cross-browser (almost)!
File API!Access to sandboxed virtual file system!
File API!
Pros & Cons
• Store binary content!
• Browser support!
• Non-standard!
Application Cache!App Cache. Service Workers.!
App Cache!Manifest defines resources to be cached!
!
App Cache!
Pros & Cons
• Cross-browser!
• Lots of pitfalls!
• Hard to debug!
• Deprecated!
Service Workers!
A script is running in the background!
• Control over requests & responses!
• Runs even when website is not open!
• No access to DOM!
• HTTPS Only!
Service Workers - Register!
1. Register Service Worker!
!
Service Workers – Cache!2. Cache resources on install event!
!
Service Workers – Fetch!3. Read from cache in fetch event!
!
Service Workers!
Pros & Cons
• Flexible & Powerful!
• Debugging with DevTools!
• Browser support!
Offline Web Tools!
Offline Web Tools!• Offline.js!
alerts and catches AJAX requests when offline !
• localForage!localStorage-like API for offline storage !
• IDBWrapper!cross-browser IndexedDB API wrapper !
• PouchDB!offline store synchronizing with CouchDB!
!
Offline App!
App Cache!
Service Worker!
App Cache & Service Worker!
Offline Storage!
localForage!
IndexedDB (IDBWrapper)!
Conclusion!
Thank you!!
Your questions, please!!ARTEM TABALIN!