Tweet
Tweet

Slide 1

Slide 1 text

Offline in the browser With IndexedDB, AppCache & LocalStorage Tuesday, September 24, 13

Slide 2

Slide 2 text

Asia Europe Africa North America Latin America Australia 0 12.5 25 37.5 50 Internet Usage Rates Tuesday, September 24, 13

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Tuesday, September 24, 13

Slide 5

Slide 5 text

Use case Tuesday, September 24, 13

Slide 6

Slide 6 text

“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

Slide 7

Slide 7 text

Tuesday, September 24, 13

Slide 8

Slide 8 text

Demo Tuesday, September 24, 13

Slide 9

Slide 9 text

Gotchas • “5 megabytes” is how much storage space each origin gets by default. Tuesday, September 24, 13

Slide 10

Slide 10 text

Gotchas • “2.5 million characters” is how much storage space each origin gets by default. Tuesday, September 24, 13

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

AppCache is not BrowserCache Tuesday, September 24, 13

Slide 13

Slide 13 text

Tuesday, September 24, 13

Slide 14

Slide 14 text

Tuesday, September 24, 13

Slide 15

Slide 15 text

Demo Tuesday, September 24, 13

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Tuesday, September 24, 13

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

IndexedDB LocalStorage Tuesday, September 24, 13

Slide 20

Slide 20 text

caniuse.com Tuesday, September 24, 13

Slide 21

Slide 21 text

Tuesday, September 24, 13

Slide 22

Slide 22 text

Demo Tuesday, September 24, 13

Slide 23

Slide 23 text

I don’t have a use case for offline. What’s in it for me? Tuesday, September 24, 13

Slide 24

Slide 24 text

I don’t have a use case for offline. What’s in it for me? Tuesday, September 24, 13

Slide 25

Slide 25 text

I don’t have a use case for offline. What’s in it for me? Tuesday, September 24, 13

Slide 26

Slide 26 text

@mananbharara github.com/mananbharara Tuesday, September 24, 13