The HTML5 application cache API requires the browser to re-load all files declared in the CACHE section of the manifest file (when the manifest file has changed and update is called on the applicationCache API).
My manifest file contains thousands of entries. Are there any tricks to telling the browser to only re-load files that have changed?
I faced similar problems caused by the lack of control over the caching behavior of files listed in the cache manifest. Turns out you can gain some control over this process by using iFrames.
The strategy is to divide your thousands of files listed in your main cache manifest into separate (and more manageable cache manifests) then create a lot of dummy HTML pages, each of them referencing a cache manifest. Then, for each dummy HTML, you add an iFrame linking to it into your main HTML document. You can put the iFrames inside an invisible div, which will make the trick invisible to the user.
When each iFrame loads, its checks its individual cache manifest. If any files within that cache manifest changed, then the iFrame will only cache its subgroup of files. You can intelligently group related files together, depending on how much you expect them to change.
What's even better is that you can dynamically insert iFrames on your main HTML at any point of the user's interaction, and only when the iFrame is loaded, the caching progress will be triggered.
Related
Two img elements with the same src attribute.
Does the browser download it once or twice?
It depends on the server's caching policy and/or the browser's setting on the client's side; under normal standards an image is only loaded once and used throughout the session (or until temp files are cleared);
You can do a test by loading the same image src twice for example:
http://url/image.png
http://url/image.png
Load your page, and view the browser's temp file directory if you see image.png once or whether you see image[1].png along with the image.png; which means it would've been loaded into your cache twice;
Under normal circumstances, it typically is a one-time load. It all depends on factors that are server and browser based per each instance.
I have an appcache (with NETWORK *). So now I visit my page with <html manifest="/cache.appcache">. Then the page itself is cached as all the images are. But I want the page self to not be cached. How can I do this? I thought NETWORK * would do the trick.
Regards,
Kevin
The appcache manifest always caches the master page.
If you are using Chrome check the cached files for your page here: chrome://appcache-internals
A workaround could be to put a hidden iframe somewhere on your page, which contains the appcache file to cache offline content. (take a look at "Preventing the application cache from storing masters with an iframe" here: http://labs.ft.com/2012/11/using-an-iframe-to-stop-app-cache-storing-masters/ )
A better solution could be to write your page to fetch new content from your server when it is opened - if the server cannot be reached, it can serve the last known content from the HTML5 local storage.
I have tried the iframe work around, and find it ripe with errors. Most browsers cache the data for the iframe where the page cannot get it.
Instead make the page's content load via AJAX. Basically have a blank html page with the manifest and javascript which pulls and adds its content from the server. This way only the blank html is cached, and content is always updated from the server.
Converting a page to this method can be very difficult, but it works. Making sure the appropriate javascript gets run at the correct time, probably requires some detangling. Moving around server code which won't be called when pulling from cache to the new ajax method.
Note: no need to pull conditional content from the server if the condition is in the query string, different query strings make a separate cache
I have a site which has 10mb+ of images (1000+ pngs) that have to be loaded before it starts. My current approach is loading every image in a hidden tag. How can I ensure that a client that accesses the site once/month, for example, will never have to download it all again?
No way. Client may have cache disabled, or he clears it every single minute
Compressed textures/generated textures/reused textures are how you should do it. You can't cache 10mb of images for a month reliably. If you need it for the game, then simply have a loading bar beforehand.
It sounds like you want to use an application cache. This means dealing with the page and its images as an application, with a cache manifest (.appcache file) listing them and the HTML document containing an <html manifest="..."> tag. See e.g. A Beginner's Guide to Using the Application Cache.
For performance purposes, I want to have some of my web pages use resources that have been cached for offline use (images, CSS, etc.) but to not have the page itself cached as the content will be generated dynamically.
One way to do this would be to refactor my pages so that they load the dynamic content via AJAX or by looking things up in LocalStorage. Details may vary, but broadly speaking, something like that.
If it's possible, I'd prefer to find a way to simply instruct the browser to use cached resources (again, images, CSS, etc.) for the page but to not actually cache the (dynamically generated) HTML content itself.
Is there a way to do that with HTML5 offline appcache? I'm under the impression that the answer is "no" because:
Any page that includes the manifest will be cached so I can't specify the cached resources in the page itself.
There is no way to tell a previous page "use offline assets for this other page but don't actually cache the HTML on that page". You have to specify the page itself, which means the HTML will be cached.
Am I wrong about that? It seems like there is probably some tricky (or not-so-tricky) way around that. Now that I've typed it out, I wonder if including the page explicitly in the NETWORK section of the appcache manifest will do the trick.
My answer is "yes".
I have worked on a web-app where I listed all the necessary resources in the manifest, and set the NETWORK section to *.
The manifest is then included only on the main landing page. So all resources are cached the first time you visit the site and and it works a treat.
In short,
one of your pages must include the manifest and will therefore be cached.
maybe you can have the manifest loaded in a iframe and not have the whole page cached, just a thought.
list all your resources to be cached in the CACHE section
set the NETWORK section to *
I'm fairly certain that the answer to this is no.
If you use the Network section in Chrome, then it shows which resources are loaded from the cache and which are loaded from the server. I have attempted to set the appcache as described above and the resources are always loaded from the server.
Would I be correct in assuming that if the current page is not in the appcache then it wont bother to check in the appcache for any of the resources?
What I've found that is working is to list those files that you don't want cached in appcache in the NETWORK: section of the manifest. For me, that meant adding *.asp* to the network section. Now, none of the classic asp files, or aspx files are cached.
I am experimenting with HTML5 caching and i have stumbled onto a problem.
CACHE MANIFEST
/Default.aspx
/Offline.aspx
/js/jquery-1.6.4.min.js
/js/jquery.mobile-1.0rc2.min.js
/css/jquery.mobile-1.0rc2.min.css
/css/images/ajax-loader.png
/css/images/icons-18-white.png
FALLBACK:
/ Offline.aspx
NETWORK:
*
So my starting page is Default.aspx, when the device goes offline it should redirect to /Offline.aspx but it doesn't. Now all i can figure is because /Default.aspx is cached.
Now let's say i remove /Default.aspx from the manifest, It would still be cached because it's referencing the manifest in the HTML tag.
I have read dozens of pages concerning html caching but i can't find an answer.
Any advice would be great!
Thanks
Yes, this is the behavior that you should expect because if the page that references the manifest is not declared in the manifest itself (explicit), it will be considered part of the manifest implicitly as a "master" page - and from that point forward will be cached and not updated until the manifest changes.
This was not entirely clear to me either until I experienced that same behavior (in the application that I was adding offline capabilities to) and dug into the spec to better understand the observed behavior.
My solution to this was to turn the dynamic parts of that page into separate Ajax calls so that even though the page was cached (implicitly or explicitly) the parts of it that updated continued to be updated through the (non-cached) Ajax calls. However, you'll want to create fallback entries for said Ajax calls if you want them to behave nicely when offline (or handle the resulting Ajax errors if not).