I've read a lot about the new Sessionstorage possibility but nowhere have I heard about the idea to save everything like images (base64), html, css a.s.o. for the single session. Is there a reason not to do this? If a user goes back to a page everything will load within milliseconds. I can see why not to use Localstorage but as its a single session it should not be harmful and only give a little boost to speed when the users are surfing a big site.
SessionStorage should be used for storing session data. Images aren't session data.
For the storing of images, styles, scripts etc. use HTTP caching.
What if you change your stylesheets or images? The sessionStorage wouldn't know they were changed. Visitors are stuck with old data.
if you want to save Image use Manifest not SessionStorage.
In Manifest file you can cache what you want this may be a solution for you.
You may be interested by reading this article
http://diveintohtml5.info/offline.html
Related
I have a webpage that makes around 150 HTTP Requests upon loading. I am told to make this webpage work offline by using HTML app cache to cache literally every single file. That is, every image, HTML, CSS, JS file, and any other files needed to load the webpage.
Never mind that the cache section in the manifest file does not allow me to use wildcards, so I'd have to write down all 150 urls (I can write a python script to do that). But my instincts tell me this is a very, very bad idea.
Can someone tell me exactly how bad it is, and why? Or am I just being too paranoid, and this is okay?
Anything will be appreciated. Thank you.
If it must save all data try using some of these techniques recommended by google.
Minimize request overhead
I'm developing a mobile web app, and I'd like to take advantage of the new HMTL5 caching features. The app consists in a photo manager: the user can create albums, store photos, edit pictures and data, and so on. I use the jQuery Mobile framework and all data is stored client-side (webstorage) apart from images, which are uploaded to the server.
I have not added the HTML5 caching yet, but I rely on the normal browser caching for images, and when the user edits an image and this is uploaded to the server, I change the querystring attached to the image request so I get the updated version (a trick I came to know here on stackoverflow).
I'd like to use HTML5 caching for everything, except for images, since this trick works like a charm, but I understand that once I add HMTL5 caching, every resource is:
either cached and not updated until a new manifest is detected / I do it programmatically (and I can't choose which resource to update) (CACHE section)
or not cached at all and reloaded everytime (NETWORK section)
Is there a way to have the cake and eat it too? :-)
Thank you very much.
Not every resource is cached once you start caching, depends on what is specified in your manifest file, so you could try to take out from the manifest the image urls you do not want to get cached.
I was wondering how you can handle files with variables in the url like
www.mysite.com?id=myvariable
I can't possibly have to store every possibility?
I used these variables because when the users are online they should be able to share their social media.
Kind regards
If you want these pages to work offline as is then yes, you have to store every possibility. You surely can't expect the browser to guess what all the possibilities are?
If you want to use dynamic data in your offline app then request it with AJAX and keep it in local storage. Don't store your data in pages, keep the pages static.
If you need to have bookmarkable URLs for different bits of your app that use different data on the same page then use the History API.
I have a few questions regarding HTML5 offline storage, which I could not figure out.
Where exactly these files are stored in the Windows? I could not find here:
C:\Documents and Settings[User Name]\Application Data\Mozilla\Firefox\Profiles\
Is there any expiration time, after that browser deletes these files automatically? Or do the files remain forever?
What if I change the contents of the page, is there anyway to refresh the refresh the data which is stored offline?
Thanks.
I found them in %AppData%/Profiles/<currentprofilename>.default/OfflineCache. I'm using Windows 7.
This depends on the expires headers your web server sends for the files in question. It is recommended you set the expires header to one week, but it is up to you, you can make it never expire. Note that the manifest file itself should be set to never be cached.
In order to refresh the data you must actually change the manifest file. It is recommended that somewhere in the manifest file you put a comment with the version number, then update it every time you change any of your other files.
Edit: I had answered these questions thinking you meant offline application cache, not local storage.
Well, for the sake of accuracy, it should be mentioned that although localStorage was indeed part of the HTML5 specification, it was split into its own after getting slightly over-complicated to be include alongside with the rest of HTML5.
It really depends on your browser, but it should be found on your AppData folder, in /profiles//OfflineCache. (for Windoes 7).
There is generally NO expiration date for localStorage, it can remain forever unless specifically removed by the website.
Javascript changes the localStorage data, (assuming you don't touch the actual file), in which case, the website you are using (or writing) needs to be smart enough to refresh the localStorage along with the page's content.
I am making a web app that is database driven and am having a hard time trying to figure out a way to cache article pages.
I've thought of just doing a cfquery to loop through all the article IDs to give me a page path (e.g. /?page=article&article_id=#id#) but from what I know of html5 caching is that if anything changes in the manifest file it will download everything all over again.
If updateready keeps getting triggered does it slow down the page significantly?
It shouldn't slow things down too much, because all that should be happening in the background, but it's not really the best approach. The app cache isn't intended for storing dynamic data, it's much better for static content. I would recommend caching a container page and then load the content into it with AJAX/JavaScript. Use local storage to keep your data for offline use on the client side.