Offline in the browser with IndexedDB, AppCache and LocalStorage

A presentation to showcase the offline capabilities offered by the modern browsers. It also discusses the use case made possible by these capabilities and what these APIs also offer to anyone who does not even have the exact use case of offline.

Transcript

1. Offline in the browser With IndexedDB, AppCache & LocalStorage Tuesday, September 24, 13
2. Asia Europe Africa North America Latin America Australia 0 12.5 25 37.5 50 Internet Usage Rates Tuesday, September 24, 13
3. Asia Europe Africa North America Latin America Australia 0 17.5 35 52.5 70 % of population % of internet penetration ~ 28% ~ 64% ~ 16% ~ 80% ~ 43% ~ 68% % of population % of internet penetration Tuesday, September 24, 13
4. Tuesday, September 24, 13
5. Use case Tuesday, September 24, 13
6. “Simply put, it’s a way for web pages to store named key/value pairs locally, within the client web browser.” - diveintohtml5.info _ Tuesday, September 24, 13
7. Tuesday, September 24, 13
8. Demo Tuesday, September 24, 13
9. Gotchas • “5 megabytes” is how much storage space each origin gets by default. Tuesday, September 24, 13
10. Gotchas • “2.5 million characters” is how much storage space each origin gets by default. Tuesday, September 24, 13
11. ApplicationCache “Developers can use the Application Cache (AppCache) interface to specify resources that the browser should cache and make available to offline users” - developer.mozilla.org _ Tuesday, September 24, 13
12. AppCache is not BrowserCache Tuesday, September 24, 13
13. Tuesday, September 24, 13
14. Tuesday, September 24, 13
15. Demo Tuesday, September 24, 13
16. Gotchas • The manifest file must be served with the MIME type “text/cache-manifest”. The suggested file extension for manifests is “.appcache”. • Any changes made to the manifest file will cause the browser to update the application cache. • If any of the files mentioned in the CACHE section can't be retrieved, the entire cache will be disregarded. • Regardless of whether you include the address of the current page in the manifest, it will be cached. Tuesday, September 24, 13
17. Tuesday, September 24, 13
18. IndexedDB “IndexedDB is an API for client-side storage of significant amounts of structured data and for high performance searches on this data using indexes.” - developer.mozilla.org _ Tuesday, September 24, 13
19. IndexedDB LocalStorage Tuesday, September 24, 13
20. caniuse.com Tuesday, September 24, 13
21. Tuesday, September 24, 13
22. Demo Tuesday, September 24, 13
23. I don’t have a use case for offline. What’s in it for me? Tuesday, September 24, 13
24. I don’t have a use case for offline. What’s in it for me? Tuesday, September 24, 13
25. I don’t have a use case for offline. What’s in it for me? Tuesday, September 24, 13
26. @mananbharara github.com/mananbharara Tuesday, September 24, 13