application cache: don't serve file from appcache on 404 - html

Question

I'm using the application cache to make my website also work offline.
My manifest looks something like this and is embedded using an <iframe>:
CACHE:
favicon.ico
assets/css/style.css
assets/js/libs/zepto.js
assets/js/app.js
NETWORK:
*
FALLBACK:
/ offline.html
it works as expected when I cut the internet connection -> everything is served via the offline.html page.
but just now I found out that every 404 (e.g. an URL that never existed on the server) also uses the FALLBACK section in the manifest on displays the offline.html.
is there a way to distinguish between being offline (in which case the offline.html is the right choice) and the server returning a 404 (in which case I just want to display the 404 error)?

Answer 1

Appcache will FALLBACK if the original request...
...results in a redirect to a resource with another origin (indicative of a captive portal), or a 4xx or 5xx status code or equivalent, or if there were network errors
(from http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#changesToNetworkingModel)
Unfortunately, when a fallback occurs, there's no why to find out why. You can't differentiate between a 500, 404, redirect or failed connection.
Here's a hacky workaround:
FALLBACK:
/connection-test.js connection-failed.js
/ offline.html
You could embed connection-test.js in your offline.html page. connection-test.js loading would indicate the user has a connection, connection-failed.js would indicate there's no connection.

Answer 2

I came across your post while searching for a solution to this same problem.
What I ended up doing was checking the value of navigator.onLine in my fallback page (which, in your case, would be offline.html). If navigator.onLine is true, then the user is supposedly online/connected to the internet (caveats apply), and were sent to the fallback page because the file they requested was not found. So, then I change the content of the page to that of a 404.
Example:
<script>
header=document.getElementById('header');
error_message=document.getElementById('error_message');
if(navigator.onLine){
header.innerHTML='Page not found';
error_message.innerHTML='The page you requested could not be found. Please check the URL and try again.';
}
</script>
It would certainly be great if the application cache spec included some other way of handling 40x's and 50x's. While this solution is certainly not ideal, it's the best one I could come up with.
I hope it helps.