Question

I am using MVC together with JS to create an IPad app. One of the key requirments is for the app to work in offline mode. Thus I am using a manifest file to determine the cached script files. However, I would like to have all scripts be refreshed when the browser is again online. I have specified this by:

Network:
*

in the manifest file underneath my scripts. This does not work though because some of the files are not updated when the browser is refreshed online. Furthermore, if I check the developer tools in chrome, the console shows the following events:

Application Cache Checking event
Application Cache NoUpdate event

Which I guess means that the browser tried to update the cache but no update was found.

Any ideas?

See below my full manifest file:

CACHE MANIFEST
#rev20


# Explicitly cached entries
  ../css/sencha-touch.css
  ../Site.css
  ../css/mycss.css
  ../css/application.css
  ../../Scripts/SenchaTouch/sencha-touch-debug-w-comments.js
  ../../Scripts/js/Base/Index.js
  ../Images/Icons/green_indicator.png
  ../Images/Icons/red_indicator.png
  ../Images/toolbar_image.png
  ../Images/search_icon.png
  ../Images/loading.gif

NETWORK: 
*

EDIT:

My initial idea was that the files will be automatically updated once they are changed. However, because the browser relies on the manifest file to notify it for the changes (I think), the #rev number needs to be incremented when there is a change. Even then, when I tested I needed t refresh the page a couple of times to get it to reload the files. I suspect that has something to do order in which the browser loads and handles the resource but I could not find any info on that.

Answer 1

The browser will only update the cache when it detects that there is a change to the cache manifest. Incrementing your revision number is great way to force that change.

After the browser detects a change, then it downloads the files and prepares the new version of the cache. The browser won’t use the new cache until it is completely full and you refresh the page.

You can detect when the new cache is ready and refresh the page to start using it immediately using this javascript:

function updateCache(){
    window.applicationCache.swapCache();
    window.location.reload();
}

window.applicationCache.addEventListener("updateready", updateCache, false);