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.
Related
In previous version of chrome, on a webpage with the following:
<script>
document.write('<plaintext>');
</script>
<img src="http://example.com/image.jpg">
the image would not be downloaded. At some point a chrome update changed this behavior. Now when I look at the network tab, I see the image is downloaded. (fiddle here: https://jsfiddle.net/doojunqx/)
I have a script that is on a page, I would like to use this script to stop the browser from downloading (using up network bandwidth) for images and other assets that are unwanted and below my script tag.
Mobify does something similar here:
http://cdn.mobify.com/mobifyjs/examples/capturing-grumpycat/index.html
As they say on the page "Open your web inspector and note the original imgs did not load." However, when I open chrome developer tools and look at the network tab, I see the original images ARE now loading. I'm not sure what version of chrome changed this, but I think it is recent, within the last month or two.
Is there any way to force chrome back to the old behavior? Or any other way to stop these unwanted assets from loading?
Thanks,
Great question, and you're correct that it is a recent change in Chromium that affected the plaintext tag behaviour. In versions up to and including version 42.*, the HTML document parser would not spawn an asynchronous parsing thread until an external resource was found in the original HTML document. Once such a resource was found, an asynchronous thread would be spawned that would aggressively download all resources references within the HTML.
The recent change simplified the parsing behaviour by moving all document parsing to the asynchronous thread which now kicks off automatically. Whereas before, using the plaintext tag would ensure that no resources would be loaded if it was inserted before the first external resource, the plaintext tag is now racy as resources will download up to the moment the plaintext tag is executed in the main HTML document. As there is a time delay for the script to execute, an unknown number of resources will be retrieved.
There is as of yet no solution to this new behaviour, nor is there a way to disable the preload scanner as you would like. You will need to rely on workarounds such as polyfills to control your resource downloads. This new behaviour is only present in all versions of Chrome >= 43.* and has not been implemented in Safari, Firefox, or other browsers.
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
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 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.