How do I force caching of pages, scripts, images(resources) including the results of dynamicly generated content (php,asp,etc etc), I do not have control of the website in question and I understand that if I cache a dynamic page it becomes static,, thats fine for me,,
However... I do not want to cache everything.. the pages loads default.asp,,,as well as a tone of .js scripts,,, in turn which make calls to a API returning some XML,,
I want to cache the default.asp and all .js but not the xml files.
im using chrome and chrome is aggressively caches what it can but all the stuff from this site has a max-age=0 header.
so from chrome how can I override headers for individual resources?
Related
In local development for a web app, I have a couple thousand JS files.
In order to not wait fifteen seconds on every refresh, I add cache headers to the responses
Cache-Control: max-age=3600, public
On the page, I add cache breakers to the URLs that change if the file has changed.
<script src="file1.js?sha1=abc..."></script>
<script src="file2.js?sha1=def..."></script>
<script src="file3.js?sha1=123..."></script>
...
The doesn't work in Chrome or Firefox. No matter how I refresh my page ("hard", "soft"), the browser always makes a request for every single one of these thousand of files.
Is there a way to have Chrome and Firefox not ignore the cache for linked resources when refreshing the page?
Browsers usually do a "304 Not Modified?" check on the files, or at least the ones that work correctly. Are you sure they're requesting and downloading each and every file? Or just making a check like that?
If there are thousands of files, I'd definitely consider combining and minify-ing them because that would mean your website would be slow to load each time.
My question is rather simple. Is there a way in the cache manifest file (or In the html) to tell iPhone, iPad or other never to cache specific files?
I have a made a small webpage that also works as a web app and there is some of the page that never should be cached.
Yes, you can list the files in the Network section to tell the browser to never save the files.Lines from the book diveintohtml5
The line marked NETWORK: is the beginning of the “online whitelist” section. Resources in this section are never cached and are not available offline.
For device or browser specific manifest, you can not do anything from JavaScript side. You have to do additional server side detection for that.
The files listed in the .mf file are the same files i am trying to load when the page first runs. Does having a manifest attribute defer processing of the rest of the document until the appcache loads?
No. On the very first load the cache gets built in the background, using the same files that where just downloaded, provided they have proper cache settings. E.g. If you have foo.css with long cache headers in your HTML page and the manifest, the browser will:
Load and render the page.
Look at the manifest.
Load foo.css from browser cache to appcache.
BUT: Appcache will however result in a FOUC (brief white page on reload), even if online and the page/app was made well enough so far to show smooth reloads.
With AppCache, the browser loads the document and its associated resources directly from the cache, without accessing the network, so this should load just as fast if not faster.
index.php:
<html manifest="/cache.manifest">
cache.manifest
CACHE MANIFEST
CACHE:
/img.png
FALLBACK:
/ /offline.html
NETWORK:
*
Everything works great, except that the index.php file itself is fetched to cache (tested in chrome). Can I disable caching for the file specifying the manifest so that only the img.png is cached?
Thanks
No, the file which references the manifest is always itself cached. From the spec:
The resource that declares the manifest (with the manifest attribute) will always get taken from the cache, whether it is listed in the cache or not, even if it is listed in an online whitelist namespace.
I had the same problem.
I used an iframe to load a page called 'go_offline.html'
this page has the manifest attribute on the html element and some dummy content.
the iframe is hidden using css
this way only the dummy page is cached and all requests are caught by the fallback page in the .manifest file
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 read in a source that chrome, when it goes to a domain, it prefetches most of the pages that might be used for that domain. As a result of this, I'm facing a problem. I have a greasemonkey script which is to be injected in every page. But what seems to happen is that the browser injects the script for the first page in a domain and that remains when i go to another page, instead of being re-injected (which is what i would want). Any ideas on how i could achieve this behavior ??
Google Chrome will precache DNS entries on the page but it doesn't pro-actively go and fetch pages, Firefox however, does prefetch pages.
Actually, there is a case where Chrome will proactively pre-cache any page that is mentioned in the cache manifest. This is designed for offline scenarios. However, each page when downloaded will not be executed against any injected script, nor will it run any JS on those pages.