I need to disable cache for browsers however when I add a manifest file to the server, it displays old html.
Here's my manifest file (cache.manifest):
CACHE MANIFEST
# Cache manifest version 1.0
CACHE
#no cache
NETWORK
*
The cache manifest is for offline applications and controls the creation and use of a local copy of an application. It’s not really a cache, and it is very different normal caching. The HTML document containing the manifest attribute is always included in the application “cache”. This means that in supporting browsers, the HTML file, once loaded, will be stored locally and the local copy will be used in all subsequent accesses to its URL, without ever fetching it again from a server—unless the content of the manifest file changes.
To affect normal caching, use cache control tools provided by the server software or, if you cannot, use meta hacks. See Caching Tutorial for Web Authors and Webmasters.
Related
We store only index.html on our server and turned off caching for it. When we deploy application we upload all resources to CDN and replaced links in index.
Instead of XHRs file downloads browser fetches content from cache, but for files directly linked from index.html browser sends requests to CDN and got 'Not modified' response.
How to force browser use cached files referenced from not cached index.html?
Reproduced in Chrome at least.
That is normal behavior. '304 Not modified' means that the copy in the Browser Cache is still valid (etag) and a download is not needed.
If you clear the clients browser cache then the file from the cdn will be fetched with a "200 ok"
I am testing HTML5's offline capabilities, and the cache seems to be a bit overactive. My cache.appcache file is as follows:
CACHE MANIFEST
CACHE:
#v1.4
js/js.js
NETWORK:
network2.html
FALLBACK:
/ offline.html
Basically I want to only display network2.html when the web is available - otherwise it should fall back to offline.html.
However, if I have accessed network2.html with the web connection live it keeps displaying it when there is no connection - surely it should fall back to offline.html? I thought only pages referenced in the CACHE section should be cached in the first place anyway?
I have tried in multiple browsers, clearing the browser data, refreshing multiple times etc.
Sorted it - it turns out that any file whose html tag references the manifest will be cached itself, whether or not that file is mentioned in the CACHE section. This even overrides if it is referenced in the NETWORK section.
Thanks to robertc on this answer which gave me the tip.
In short, you only need to have one reference to the manifest, usually in your 'default' view, not all files that may be referenced by the manifest itself. Not very clear in the HTML5 docs.
I can't stop Chrome from loading resources from the cache manifest. I changed my markup so
the page begins with:
<!DOCTYPE html>
<html class="fouc">
<head>
I grabbed this markup after I dumped Chrome's appcache manually and I viewed source.
However, Chrome's console has:
Document was loaded from Application Cache with manifest http://localhost:47932/Manifest/Index localhost/:1
Application Cache Checking event localhost/:1
Application Cache NoUpdate event
How do I turn appcache off once I've turned it on?!
I should mention that I edited my cache manifest. It now reads:
CACHE MANIFEST
#Version 107
NETWORK:
*
CACHE:
I have removed every entry from the Cache section, and Chrome still refers to the cache manifest.
The HTML page specifying the manifest is itself implicitly cached, so the browser won't "see" your update to the HTML unless you update the manifest as well (or delete it). Did you make a change to the application cache manifest after changing the HTML? The byte content of the manifest must change to trigger the browser to check for updated versions of any cached resources.
If all else fails, you can clear Chrome's application cache manually by visiting chrome://appcache-internals/
Remove your manifest file from the server. Or just rename it.
I have a special kiosk-solution with chrome where I need chrome to upon application start, load the start-url from cache, not try to fetch it online.
The reason is that this is, like I said, a kiosk-mode presentation, is is a screen standing in the public that reboots every night, and if the reboot happens while the ISP has downtime on the internet connection, chrome will only show an error page.
If I can get it to load the cached version of the page though, instead of trying to fetch it online, then the last valid version of the page will show, and through some nifty ajax-workings of mine ;) it will automatically update after a while. If THAT update fails, the currently displayed version of the page will remain until a subsequent update succeeds.
See my problem?
In a browser like firefox I could do it by starting the browser in off-line mode and after page load switch it to online-mode. Only FF doesn't work for me in the particulat project, and Chrome doesn't seem to have an off-line mode?
You could use HTML5 Offline Web Applications to accomplish that. It's probably very easy to set up in your case, just add a file like the following to your app's directory:
CACHE MANIFEST
index.html
help.html
style/default.css
images/logo.png
images/backgound.png
NETWORK:
server.cgi
This manifest should contain all the files you'll need to display some useful information and later grab current content via AJAX. There's also a NETWORK section, where you have to specify things that should not be cached (ie the script that delivers your Updates via AJAX).
You can load the manifest file by adding a manifest attribute to your tag (cache-manifest is the name of the file above):
<html manifest="cache-manifest">
Make sure your server delivers the cache manifest with a MIME-type of
text/cache-manifest MIME
Type or copy-paste the below flag setting into the chrome address bar.
chrome://flags/#enable-offline-mode
scroll down to enable offline stale mode.
Restart your browser.
If an offline version of the page is available in the system cache it will load up when you are not connected.
Every URL can be linked to a single cache manifest. But I want several cache manifests linked to a same URL. Here is the reason:
Some files I want to be cached are rarely updated and large.
So everytime the cache gets updated these large files get re-downloaded even though they may not have been changed.
So I want to split up the cache. One cache for theses rarely updated large files and another cache for the often updated light files.
Do you guys have any idea how to split up an HTML5 cache?
The most efficient way is:
a) Use far-future expiration date (max-age) on all resources mentioned in manifest's CACHE section and add timestamp suffix to each file in the CACHE section, e.g.:
CACHE:
menu_1355817388000.js
toolbar_1355817389100.js
b) When any of the above files change on the server, regen/update manifest to change the timestamp. Only the file with the modified timestamp will get downloaded next time. Mission accomplished.
Note: Reload the page twice in the browser, as on the first refresh browser downloads just the manifest and uses old cached resources to paint the page. This is done to speed up displaying the page (there are tricks to handle this issue of double refresh, but they are outside the scope of your question)
See more info in this long but best article I ever seen on appcache.
Use an iframe
Your page's cache manifest would include the light files and the cache manifest of an iframe loaded by this page would include the large files
On chrome the iframe's application cache will also be used for the page. I didn't tested this method on other browsers yet.
see a live example at http://www.timer-tab.com and if you are using chrome see its split up cache at chrome://appcache-internals/
When the manifest file is changed and the files of the application cache are downloaded again, the normal HTTP caching rules still apply. This means that if you set the correct HTTP caching headers for these large files, you'll get a 304 so these files are not downloaded again. So it's not necessary to split the application cache.
Maybe an answer but I'd more like to shed some light on my findings as a I troubleshoot my own webapp.
I've discovered that I can use 2 iframes (manifest_framework) and (manifest_media) to load the manifests, but i'm still not exactly clear how they are targetted, but I had limited success.
manifest_framework:
CACHE MANIFEST
CACHE:
appdata.ini
dialog.png
jquery.min.js
login.htm
login.js
manifest.appcache.js
NETWORK:
*
FALLBACK:
manifest_media:
CACHE MANIFEST
CACHE:
manifest_fwk.php
od/audio_track_1_1.m4a
od/audio_track_1_2.m4a
od/audio_track_1_3.m4a
od/audio_track_1_4.m4a
od/video_1.mp4
od/video_2.mp4
od/video_3.mp4
NETWORK:
*
FALLBACK:
./ webapp.php
./index.php is the page the 'landing page' which itself isn't cached but falls back to webapp.php when offline.
What I don't understand is how these link to the webapp.php page.
I am finding I can only get access to one or the other manifests cache.
The above works in mobile safari, the media would be cached, and image but not necessarily the JS or images in the framework manifest.
Anyone have more examples where multiple manifests are referenced from the one URL/page?
The W3C working group has abandoned the file system api, so it SHOULD NOT BE USED anymore.
We'll likely see it fall off the next version of Chrome.
http://www.w3.org/TR/file-system-api/
CACHE MANIFEST
# This is a comment.
# Cache manifest version 0.0.1
# If you change the version number in this comment,
# the cache manifest is no longer byte-for-byte
# identical.
demoimages/mypic.jpg
demoimages/yourpic.jpg
demoimages/ourpic.jpg
sr/scroll.js
NETWORK:
# All URLs that start with the following lines
# are whitelisted.
# whitelisted items are needed to help the site function, you could put regularly
# changing items here
http://example.com/examplepath/
http://www.example.org/otherexamplepath/
CACHE:
# Additional items to cache.
demoimages/allpics.jpg
FALLBACK:
demoimages/currentImg.jpg images/stockImage.jpg`
If the Iframe trick does not work, use the HTML5 FileSystem API
See http://updates.html5rocks.com/2012/04/Taking-an-Entire-Page-Offline-using-the-HTML5-FileSystem-API