Search code examples
htmlcachinghtml5-appcache

Appcache - fallback not working as expected

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

Solution

  • 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.