I created a webapp which should always use the most current files and don't cache anything. BUT when the client goes offline, it should present the "offline.html" which continuously tries to load the "index.php" every 30sec.
Here is the thing: my index.php gets also cached because it has the manifest tag. But this messes up the functionality of my webapp.
So I wanted to ask, what are the best solutions to use the cache manifest only for providing a fallback, not for caching anything else?
index.php
<html manifest="/cache.manifest">
cache.manifest
CACHE MANIFEST
FALLBACK:
/ /offline.html
NETWORK:
*
I've found this solution here https://stackoverflow.com/a/19974768/1311566 where the guy uses an iframe to load an html with the manifest tag in it so that the index.php doesn't get cached. But I wanted to know if there are any other, or maybe even better, solutions out there.
Many thanks in advance,
Stefan
The solution described at https://stackoverflow.com/a/19974768/1311566 is correct. It's the only way to prevent the HTML files from being cached and only fallback to /offline.html if requests fail.
I build offline-compatible apps based on applicationCache since 3+ years now, and trust me this is the only way. If you like to have a nice JS API for the iframe Hack (and much more), you can use a library I've build: https://github.com/gr2m/appcache-nanny
By the way this iframe hack has been invented by the Financial Times Labs team, they put together a great tutorial with lots of background information on it: http://labs.ft.com/category/tutorial/
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.
Is it possible to tell your HTML5 Webapp to not load the site from the appcache, if the client has network connection?
This isn't exactly what you're asking, but a way to achieve this is to set up a FALLBACK from / to for example /offline/index.html and then check in the offline index.html if you're online and if you are redirect back to /. That way your normal site is loaded over the internet and your offline version is loaded only when offline.
FALLBACK:
/ /offline/index.html
NETWORK:
*
PS. I have never tried this exact setup, and never even used FALLBACK urls, however I worked a lot with appcaches, so I am pretty sure this should work.
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)
index.php:
<html manifest="/cache.manifest">
cache.manifest
CACHE MANIFEST
CACHE:
/img.png
FALLBACK:
/ /offline.html
NETWORK:
*
Everything works great, except that the index.php file itself is fetched to cache (tested in chrome). Can I disable caching for the file specifying the manifest so that only the img.png is cached?
Thanks
No, the file which references the manifest is always itself cached. From the spec:
The resource that declares the manifest (with the manifest attribute) will always get taken from the cache, whether it is listed in the cache or not, even if it is listed in an online whitelist namespace.
I had the same problem.
I used an iframe to load a page called 'go_offline.html'
this page has the manifest attribute on the html element and some dummy content.
the iframe is hidden using css
this way only the dummy page is cached and all requests are caught by the fallback page in the .manifest file
I have tried the iframe work around, and find it ripe with errors. Most browsers cache the data for the iframe where the page cannot get it.
Instead make the page's content load via AJAX. Basically have a blank html page with the manifest and javascript which pulls and adds its content from the server. This way only the blank html is cached, and content is always updated from the server.
Converting a page to this method can be very difficult, but it works. Making sure the appropriate javascript gets run at the correct time, probably requires some detangling. Moving around server code which won't be called when pulling from cache to the new ajax method.
Note: no need to pull conditional content from the server if the condition is in the query string, different query strings make a separate cache