Appcache - backup not working as expected
By providing FALLBACK
, I expect to wifi.svg
be replaced by nowifi.svg
when it is loaded from cache. it doesn't work 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 online I only see a missing image instead of a cached one nowifi.svg
I thought, since I never asked to nowifi.svg
be a problem, just added a hidden <img src="images/nowifi.svg" />
one with no luck yet.
I couldn't figure out what the problem is.
For the complete project: https://github.com/palaniraja/kmusic/blob/master/src
source to share
You must remove wifi.svg
from the section of NETWORK
your manifest for the rollback to work:
CACHE MANIFEST
#Version 0.1.3
index.html
CACHE:
images/nowifi.svg
FALLBACK:
images/wifi.svg images/nowifi.svg
This may seem a little intuitive at first, but explicit records NETWORK
take precedence over fallbacks, so your fallback is never applied and there is no image.
The browser is smart enough to understand that the left side of the entry FALLBACK
needs to be re-checked by the server and will properly replace it with a backup image (instead of using a cached copy) when it is offline.
It also usually automatically caches the right-hand side of the entry FALLBACK
(i.e. nowifi.svg
), so you can omit it from the section as well CACHE
(it won't affect anything).
Also note that in my experience the "Work Offline" features for Google Chrome "Developer Tools" and Firefox sometimes lead to some strange results when it comes to cache and offline apps, so you better just switch web server or connection and then when testing.
source to share