HTML5 appcache - making app totally offline

Question

I have a chrome webstore app where I'm using appcache to load resources from cache. I'm already using localStorage to have data available offline.

The problem with making the app work offline is that if I reload the page (while offline), the browser checks for the manifest and since it's not able to reach to the manifest uri, I get an error in the console. That's it. Nothing happens beyond this point. The page doesn't render anything.

I'm not sure if there is way around this (to stop the browser from checking for manifest on page reload). In any case, I'm wondering - is this the only way to have your assets cached and available offline. Data is not an issue; but without the assets (mostly JS) things don't move an inch.

Would be glad if anyone could advise / point me in the right direction / approach to have a fully functional offline app even on page reload / refresh.

Ben Ben · Accepted Answer · 2011-06-29T10:26:15

The manifest cache file needs to be available to your off-line web pages for this functionality to work properly. When you say that the app can't reach the manifest URI, does this mean that it's an absolute URI on the server or something? If so, that won't work.

I have a few off-line apps in production, and I always place the cache manifest in the root directory of the app, referencing it in my web pages thus:

<!DOCTYPE html> 
  <html manifest="./cache-manifest.manifest">
    <head>

The cache works, the app goes off-line, and page refreshes are not an issue. If you want to check that your cache is working as it should, the code in this article is invaluable:

http://jonathanstark.com/blog/2009/09/27/debugging-html-5-offline-application-cache/

HTML5 appcache - making app totally offline

1 Answers