Downloaded 28 times
Uploaded byArtem Tabalin
Offline Web Apps
The document discusses various technologies and techniques for creating offline web applications, emphasizing the importance of offline storage options such as application cache, web SQL, IndexedDB, and the File API. It outlines the pros and cons of each storage method and introduces service workers as a powerful tool for managing offline capabilities. Additionally, it mentions several offline web tools to enhance performance and facilitate development.
More Related Content
Offline Web Apps
- 1. Offline Web! Offline WebApps! ARTEM TABALIN!
- 2. Why “Offline Apps”! NoInternet connection! Poor Internet connection! Improve performance!
- 3. Offline Apps Includes! OfflineStorage! data on client-side! Application cache! html, js, css, images! !
- 4. Detect status! • onLineproperty! • online event! • offline event!
- 5. Offline Storage! History. WebStorage. Web SQL. IndexedDB. File API.! !
- 6. Offline Storage History! Cookie Plugins! HTML5! WebStorage IndexedDB Web SQL Filesystem API 20 x 4KB
- 7. Web Storage! Key-value pairstorage!
- 8. Web Storage! Pros &Cons! • Simple! • Cross-browser! • No transactions! • Serialization/Deserialization! • Limited space ! 5MB
- 9. Web SQL Database! SQLitein the browser!
- 10. Web SQL Database! Pros& Cons! • Relational DB advantages! • Browser support! • Deprecated!
- 11. Indexed Database API! NoSQLkey-value DB with indexing!
- 12. Indexed Database API! Pros& Cons! • Transactions support! • No size limits (almost)! • Cross-browser (almost)!
- 13. File API! Access tosandboxed virtual file system!
- 14. File API! Pros &Cons • Store binary content! • Browser support! • Non-standard!
- 15. Application Cache! App Cache.Service Workers.!
- 16. App Cache! Manifest definesresources to be cached! !
- 17. App Cache! Pros &Cons • Cross-browser! • Lots of pitfalls! • Hard to debug! • Deprecated!
- 18. Service Workers! A scriptis running in the background! • Control over requests & responses! • Runs even when website is not open! • No access to DOM! • HTTPS Only!
- 19. Service Workers -Register! 1. Register Service Worker! !
- 20. Service Workers –Cache! 2. Cache resources on install event! !
- 21. Service Workers –Fetch! 3. Read from cache in fetch event! !
- 22. Service Workers! Pros &Cons • Flexible & Powerful! • Debugging with DevTools! • Browser support!
- 23.
- 24. 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!
- 25. Offline App! App Cache! ServiceWorker! App Cache & Service Worker! Offline Storage! localForage! IndexedDB (IDBWrapper)! Conclusion!
- 26. Thank you!! Your questions,please!! ARTEM TABALIN!