app cache vs localstorage
TRANSCRIPT
HTML5App 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
Modern Browsers
&
IE10
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
Follow same-origin rules
Limited to ~5MB/domain
!IE7
It’s not that simple
#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
What is the perfect solution?
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
finally…
#7
Redirect to other domains will show fallback page
Tip: Remove FALLBACK from manifest, also control cache headers on fallback page
Store the backend JSON data in localStorage
Templates for that data in Application Cache
Again…
Thank You