App cache vs localStorage
-
Upload
senthilhi -
Category
Engineering
-
view
767 -
download
4
Transcript of App cache vs localStorage
![Page 1: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/1.jpg)
HTML5App Cache vs. Local Storage
senthil | @senthil_hi
![Page 2: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/2.jpg)
Application Cache
A caching mechanism that enables web-based applications run offline
![Page 3: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/3.jpg)
<html manifest=“appcache.mf”>*
* Same origin as application
* MIME type text/cache-manifest
![Page 4: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/4.jpg)
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
![Page 6: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/6.jpg)
Modern Browsers
&
IE10
![Page 7: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/7.jpg)
Local Storage
A storage mechanism through which string key/value pairs can be securely stored and
later retrieved for use.
![Page 8: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/8.jpg)
// 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
![Page 9: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/9.jpg)
Follow same-origin rules
![Page 10: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/10.jpg)
Limited to ~5MB/domain
![Page 11: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/11.jpg)
!IE7
![Page 12: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/12.jpg)
It’s not that simple
![Page 13: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/13.jpg)
#1
Files always come from App Cache,
even if you are ONLINE
Tip: Listen to updateready event and notify user
![Page 14: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/14.jpg)
#2
The App Cache only updates if the content of the MANIFEST itself changes
Tip: Use version number commenting
![Page 15: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/15.jpg)
#3
App Cache honors HTTP Cache headers
Tip: Check the Cache-Control & Expires headers for static resources
![Page 16: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/16.jpg)
#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
![Page 17: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/17.jpg)
#5
Other non-cached resources will NOT load on a app cached page, even when ONLINE
Tip: Use wildcard * in NETWORK section of manifest
![Page 18: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/18.jpg)
Why cant we use localStorage for everything?
![Page 19: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/19.jpg)
#6
localStorage operation is
SYNCHRONOUS
![Page 20: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/20.jpg)
What is the perfect solution?
![Page 21: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/21.jpg)
First Step
Move to client side rendering
![Page 22: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/22.jpg)
FALLBACK section of manifest is your friend!
![Page 23: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/23.jpg)
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
![Page 24: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/24.jpg)
Store the backend JSON data in localStorage
Templates for that data in Application Cache
![Page 26: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/26.jpg)
finally…
![Page 27: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/27.jpg)
#7
Redirect to other domains will show fallback page
Tip: Remove FALLBACK from manifest, also control cache headers on fallback page
![Page 28: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/28.jpg)
Store the backend JSON data in localStorage
Templates for that data in Application Cache
Again…
![Page 29: App cache vs localStorage](https://reader033.fdocuments.us/reader033/viewer/2022050719/55a2ae301a28ab9e568b482f/html5/thumbnails/29.jpg)
Thank You