Is there an event that chrome browser generates when the cache is cleared (ctrl + shift + del or clear browsing data), so that some logic can be added before the cache is cleared ?
If such event exists, is it called before or after the cache is cleared ?
Related
Some resources are still cached after performing a hard refresh on a page (CTRL + SHIFT + R) in Chrome.
Using the 'disable caching' option in dev tools returns all of the page resources.
Is this something to do with the cache-control headers? Or something to do with Chrome itself?
I've compared the cached files using hard refresh vs. CTRL + SHIFT + R
I made some changes to my CSS file. I can see the new version on any browser but firefox. Why is that?
Thanks!
This might be caused by cache. Possible solutions to your problem are available here: https://support.mozilla.org/en-US/questions/1147504; the accepted answer at the website is:
One way to check whether this is a problem with stored data in Firefox
is to test in a new private window. When you launch the first private
window in a regular browsing session, it has an empty cache and empty
cookie jar and should give you a clean retrieval of the current site.
If you still get old data, the problem is external to Firefox, for
example, a proxy server or ISP cache.
Close all the private windows if you want to test again, since they
share a temporary cache and cookie jar until the last one is closed.
You can also try to reload the page as mentioned below (this bypasses the current cache) (source: https://support.mozilla.org/bm/questions/967500):
Reload web page(s) and bypass the cache to refresh possibly outdated
or corrupted files.
Hold down the Shift key and left-click the Reload button
Press "Ctrl + F5" or press "Ctrl + Shift + R" (Windows,Linux)
Press "Command + Shift + R" (Mac)
When setting the prefer-online setting I expect the browser to request the page at every refresh of the browser, but it is not the case.
Here is my manifest :
CACHE MANIFEST
SETTINGS:
prefer-online
NETWORK:
*
Yet when I refresh the browser it only requests the manifest to the server. It only requests the page when I update the manifest ...
And there is no headers (expires or max-age) set on the page.
(tested on chrome & firefox)
NB: When updating the manifest, the browser re downloads the assets, but still displays the old version ... It is only on the next load that the browser uses the new assets. Why ?
I don't see what the AppCache manifest is for, since you want to bypass the cache and just use the network. Keep in mind that the regular caching might still apply, regardless of the AppCache manifest, so check the Expires, Last-Modified and similar headers.
As for your question:
NB: When updating the manifest, the browser re downloads the assets, but still displays the old version ... It is only on the next load that the browser uses the new assets. Why ?
This is because the user agent will immediately use the latest cached version of your assets, then start checking the linked resources listed in the manifest for updates. When the user agent detects that the manifest has changed, and thus it has to check for updates, it will fire a checking event.
When the update checking process has finished (and it might take a long time, if you have lots of resources) it will fire an updateready event. Only the resources fetched after this event will be the fresh new ones (that's why it's usually adviceable to use window.applicationCache.swapCache() to tell the browser to swap the old cache for the new for the next page load, or simply reload the page and be done with it).
You will find more detailed explanations about these topics here: http://www.html5rocks.com/en/tutorials/appcache/beginner/
I have a cache manifest with a comment in it
# Version 3.2
in order to update all the App I simply change the Version number. It works, but:
When I update the manifest, everything is updated correctly (new cache is filled) but the actual files are taken ONE more time from the (old) cache. when I reload twice everything is updated. Is this behaviour correct? Using chrome 21.
Thanks
Yes, this is the current "correct" behaviour. This is what happens:
When you just made changes to the manifest file, and you refresh the browser, this is what happens (assuming you're online)
the browser first loads back all the files in the cache
then the browser check online for your manifest file
it detects that the manifest file has changed, it will then proceed to download the new files
however, keep in mind, at this time, you will still be looking at your 'old files' because the browser has loaded the old files before going online to download the 'new files'
if at this point, if you hit refresh again (2nd time), you should get the 'new files'
This is currently the standard behaviour. Some people put some event handlers to prompt the user to do another refresh (after the 1st refresh)
Personally, I think the browser should be responsible to alert the user to make another refresh after finish downloading the new files, but right now, most people put in event handlers from the "window.applicationCache" to fire events to help manage this.
To look at an example of using window.applicationCache, go here : http://www.html5rocks.com/en/tutorials/appcache/beginner/
it's under the "Updating the Cache" section.
It is possible to instantly swap the cache as described here:
function updateSite(event) {
window.applicationCache.swapCache();
}
window.applicationCache.addEventListener('updateready', updateSite, false);
I have created a web app that can be accessed offline. However the problem I am having is getting the browser to display the new version of the page.
I can see that the files are being downloaded again:
Application Cache Downloading event
Application Cache Progress event (0 of 3) pad/jquery.min.js
Application Cache Progress event (1 of 3) pad/index.html
Application Cache Progress event (2 of 3) pad/
Application Cache Progress event (3 of 3)
Application Cache UpdateReady event
However upon a refresh of the page, the old index.html file is still being displayed.
I have set up my offline.manifest file properly and referenced it in the html tag. I am not sure what could be the problem here.
In some cases you may have to manually swap the new cache in using javascript. Here's what I have on my pages to deal with the issue:
<script>window.addEventListener('load', function(e) {window.applicationCache.addEventListener('updateready', function(e) {if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {window.applicationCache.swapCache();window.location.reload();} else {}}, false);}, false);</script>
This will automatically swap in the new cache and reload the page when it's available. You can get more info on using javascript with appcache here at html5rocks