App cache vs localStorage

HTML5
App Cache vs. Local Storage
senthil | @senthil_hi

Application Cache
A caching mechanism that enables web-based
applications run offline

<html manifest=“appcache.mf”>*
* Same origin as application
* MIME type text/cache-manifest

CACHE MANIFEST
# v1 2011-08-14
/ressvr/z/ub/y255yxpns254thq3pohidjkjc.css?dataUri=true
/ressvr/z/uy/jt1tg3laky0ddbaxfh5sc1il3.js
http://thumbs3.ebaystatic.com/m/m_pqcWl7IQ-B0A/140.jpg
http://thumbs3.ebaystatic.com/m/mSwJwMAYw/140.jpg
# Use from network if available
NETWORK:
network.html
# Fallback content
FALLBACK:
/assets/imgs/avatars/ assets/imgs/avatars/default-v1.png

Local Storage
A storage mechanism through which string
key/value pairs can be securely stored and
later retrieved for use.

// Setting data
localStorage.setItem(‘userDetails’, JSON.stringify(dataObj));
// Retrieving the same data
var userDetails = JSON.parse(localStorage.getItem(‘userDetails’));
* There is also a sessionStorage API

#1
Files always come from App Cache,
even if you are ONLINE
Tip: Listen to updateready event and notify user

#2
The App Cache only updates if the content of
the MANIFEST itself changes
Tip: Use version number commenting

#3
App Cache honors HTTP Cache headers
Tip: Check the Cache-Control & Expires headers for static resources

#4
App Cache manifest file caches itself
Tip: Never ever use Far-Future cache headers for manifest files. no-cache
or 1 day expiry works best

#5
Other non-cached resources will NOT load
on a app cached page, even when ONLINE
Tip: Use wildcard * in NETWORK section of manifest

Why cant we use localStorage for
everything?

#6
localStorage operation is
SYNCHRONOUS

First Step
Move to client side rendering

FALLBACK section of manifest is
your friend!

CACHE MANIFEST
# v1 2011-08-14
/ressvr/z/ub/y255yxpns254thq3pohidjkjc.css?dataUri=true
/ressvr/z/uy/jt1tg3laky0ddbaxfh5sc1il3.js
/ressvr/z/uy/mustache_template.js
http://thumbs3.ebaystatic.com/m/m_pqcWl7IQ-B0A/140.jpg
http://thumbs3.ebaystatic.com/m/mSwJwMAYw/140.jpg
# Use from network if available
NETWORK:
*
# Fallback content
FALLBACK:
/tablet /tablet/pages/offline/fallback.html
/assets/imgs/avatars/ assets/imgs/avatars/default-v1.png

Store the backend JSON data in
localStorage
Templates for that data in
Application Cache

#7
Redirect to other domains will
show fallback page
Tip: Remove FALLBACK from manifest, also control cache headers
on fallback page

Again…
Store the backend JSON data in
localStorage
Templates for that data in
Application Cache

App cache vs localStorage

More Related Content

What's hot

Viewers also liked

Similar to App cache vs localStorage

Recently uploaded

App cache vs localStorage

Editor's Notes