Application Cache and LocalStorage
Opened this issue · 7 comments
Use localstorage version files instead of ping server. Check opened file and refresh if it's outdated.
We have to use Application Cache for all WRIO files: JS, images, css, fonts, etc. In addition store json-ld files into it, so app can work offline in read mode. We will add "Save" button for it.
http://www.slideshare.net/senthil_hi/app-cache-vslocalstorage
Please generate the manifest file dynamically. It's important to make sure that the generating script provides the correct MIME type. The browser does byte-to-byte comparison to determine if the cached manifest file is changed so it's not enough to re-save it to trigger a cache refresh. It's necessary to change the contents of the file which is why it is handy to have a comment with a version number in the file. Automate it via build script, more info there at GOTCHA#2:
http://alistapart.com/article/application-cache-is-a-douchebag
Use LocalStorage where it's preferable.
Login, Titter and webGold widgets must be inactive, just show
You're offline
somewhere for the moment.
Help links:
http://diveintohtml5.info/offline.html
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
https://developers.google.com/web/tools/service-worker-libraries/
https://html.spec.whatwg.org/#applicationcache
http://www.html5rocks.com/en/tutorials/appcache/beginner/ You must modify the manifest file itself to inform the browser to refresh cached files.
http://html5doctor.com/go-offline-with-application-cache/
http://labs.ft.com/2012/08/basic-offline-html5-web-app/
https://stackoverflow.com/questions/5829299/how-to-clear-application-cache-html5-feature-using-javascript
http://mobiforge.com/design-development/using-html5-application-cache-mobile-web-apps
http://alistapart.com/article/application-cache-is-a-douchebag example
http://habrahabr.ru/post/151815/ [RU]
https://developers.google.com/speed/docs/insights/LeverageBrowserCaching
http://stackoverflow.com/questions/6179159/accessing-localstorage-from-a-webworker
Make pull request to a new branch and name it as "offline".
Please note we have to use localstorage start.js version if we have one in it.
http://addyosmani.com/basket.js/ looks interesting, but works only for js and css:
addyosmani/basket.js#71
https://github.com/mozilla/localForage
https://hacks.mozilla.org/2014/02/localforage-offline-storage-improved/
http://html5.by/blog/localforage/ [RU]
https://habrahabr.ru/company/nordavind/blog/212709/ [RU]
https://github.com/tantaman/LargeLocalStorage we can use it later for big amount of data.
http://www.sitepoint.com/how-to-improve-loading-time-with-basket-js/ more info
http://stackoverflow.com/questions/23817391/script-caching-with-basket-js-am-i-doing-something-wrong
http://stackoverflow.com/questions/23620514/jquery-and-basket-js-cache
https://github.com/agektmr/PortableCache, http://webreflection.blogspot.com.by/2012/06/asynchronous-storage-for-all-browsers.html or https://github.com/nodeca/bag.js can be used for heavy resources like images.
Please keep in mind "Known issues"
http://caniuse.com/#search=localstorage
We have to implement the ability to rewrite outdated files: the best is is to let server push updates
http://w3c.github.io/push-api/
and rewrite outdated without pinging server from time to time. We can use
Manually validate items in cache
http://www.sitepoint.com/how-to-improve-loading-time-with-basket-js/
@michbil FYI, we have to choose best option to make offline-first application. All js, css, json-ld, images have to be stored to make WRIO OS fast and offline friendly.