I'm implementing an appcache in my application and I have a lot of problems with setings it correctly.
For this specific moment I have problems to determine, if files loaded are for sure from the appcache and not from the regular cache?
Can someone provide me with links/tips how can I check that? E.g. in Chrome in the dev tools in Network tab there is placed a (from cache) text for cached resources, but how can I know this is the correct cache?
In Firefox sometimes on files which should be cached in appcache I have nitification in Firebug, that they are loaded from BFCache not AppCache and something like tjat houldn't happen.
So once again, can you provie me with e.g. some plugins for popular browsers (IE, Firefox, Chrome) to check that?
You explicitly declare a page to be cached by the AppCache by referencing a manifest file so you can be sure its using AppCache. A manifest file is
simple text file that lists the resources the browser should cache for
offline access.
and,
The manifest attribute should be included on every page of your web
application that you want cached.
<html manifest="example.appcache">
....
</html>
http://www.html5rocks.com/en/tutorials/appcache/beginner/
BFCache on the other hand is specific to Firefox (other browsers have similar implementation) and serves its purpose differently from AppCache.
AppCache helps your web apps be accessible offline while BFCache speeds up your backward and forward page navigation between visited pages.
You will no longer require any plugins aside from Firebug and the browser's built-in Developer tools if AppCache is implemented correctly
Related
By providing FALLBACK, I expect the wifi.svg to be replaced with nowifi.svg when it is loaded from cache. it is not working as expected.
Here is my cache manifest file.
CACHE MANIFEST
# Version 0.1.3
index.html
CACHE:
images/nowifi.svg
NETWORK:
images/wifi.svg
FALLBACK:
images/wifi.svg images/nowifi.svg
When I'm offline, I only see missing image in place of cached nowifi.svg
I thought, since I never request nowifi.svg could be the problem, just added a hidden <img src="images/nowifi.svg" /> still no luck.
I could not able to figure out what is the issue.
For complete project: https://github.com/palaniraja/kmusic/blob/master/src
You should remove wifi.svg from the NETWORK section of your manifest, for the fallback to work:
CACHE MANIFEST
#Version 0.1.3
index.html
CACHE:
images/nowifi.svg
FALLBACK:
images/wifi.svg images/nowifi.svg
This might feel a bit counter-intuitive at first, but an explicit NETWORK entries take precedence over the fallback entries, which is why your fallback is never applied and the image is missing.
The browser is also smart enough to recognize that the left side of the FALLBACK entry is to be re-checked with the server, and will properly replace it with a fallback image (instead of just using a cached copy),
when it is offline.
It will also normally automatically cache the right hand side of the FALLBACK entry (i.e. nowifi.svg), so you may omit it from the CACHE section as well (through it won't affect anything).
Also note that in my experience the "Work Offline" functions of Google Chrome "Developer Tools" and Firefox, sometimes tend to produce all kind of weird results when it comes to cache and the offline apps, so you better just switch your web server or connection on and off instead, when testing this.
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.
I have a test.html which uses multiple stylesheets. When opened the file from the local drive (not going through webserver), the styles were applied differently when compared to loading the files from webserver. Can this happen?. How to control this from happening?
attached is the comparision image from chrome browser developer tools styles listing.
As it was mentioned in comments, this looks like a browser caching issue.
A web cache stores copies of documents passing through it; subsequent requests may be satisfied from the cache if certain conditions are met.
http://en.wikipedia.org/wiki/Web_cache
Try hitting F5 to refresh the page or disable cache. Usually, it is done through the Developer Tools in a browser (F12).
I have got a HTML manifest with the lines:
CACHE MANIFEST
images/foo.png
Also, the page includes e.g. jQuery and many other ressources. All of them are not loaded, except the ones named in the manifest (here: images/foo.png). How can i tell the browser to load all files but the ones explicitly defined in the manifest?
Thanks
HTML5 Cache Manifest: Fallback section & Network *
see the NETWORK piece, which prevents caching (also helpful in managing dynamic pages like PHP, etc)
I've been using HTML5 Offline caching on my website for a while and for some reasons I am considering turning it off. To my surprise it doesn't work.
This is how I've implemented HTML5 Offline caching.
In my index.html I give path to the manifest file
<html manifest="app.manifest">
In the app.manifest file I list all the js/css/png file that I would like to be cached by the browser for offline usage. Every time I deploy updates, I update the app.manifest file, which causes the browser to fetch latest version of all the files listed in the manifest file.
In order to turn off the offline caching, I changed my index.html's opening tag to
<html>
I made a dummy change to app.manifest file, so that browser (which has already cached my website), will detect the change and download latest version of all the files (including index.html).
What I noticed is, the browser indeed gets the latest version of all the files. I see the new <html> tag in the updated version without the manifest declaration, however the behavior of the browser for future changes does not change. i.e. I now expect the browser to immediately fetch the new version of the index.html file, when it's changed on server. However that doesn't happen. The browser doesn't download updated index.html until I make any changes to the manifest file.
Thus it appears to me that the browser has permanently associated app.manifest file with my website URL and it won't get rid of it even when I don't mention it in <html> tag.
I have tested this on both Google Chrome and Firefox, same results. I also tried restarting Chrome, but it won't forget that my site ever had app.manifest defined for it. I haven't found any discussion on this aspect of offline caching on the web.
Update: I managed to get rid of the behavior in Chrome by clearing all the browsing data (by going to settings). But that's not something I can tell the users to do.
Make the manifest URL return a 404 to indicate you don't want offline web applications anymore. According to Step 5 of HTML5 §5.6.4, this marks the cache as obsolete, and will remove it.
You can also manually delete the offline web application in Chrome by going to about:appcache-internals.