Why isn't my cached webapp refreshing changes on the first try?

Question

I'm following this tutorial and trying it out on my iPad. The tutorial says:

You can wait for the application cache to update automatically or trigger an update using JavaScript. The application cache automatically updates only if the manifest file changes. It does not automatically update if resources listed in the manifest file change. The manifest file is considered unchanged if it is byte-for-byte the same; therefore, changing the modification date of a manifest file also does not trigger an update. If this is not sufficient for your application, you can update the application cache explicitly using JavaScript.

So what I've been doing to try and force updates is changing a comment in the manifest file that has a version number in it. EG, I change this line:

# Cache Manifest Version: 1.6

My html header looks like this:

<!DOCTYPE html>
<html lang="en" manifest="cache.manifest">
<head>
    <meta charset="UTF-8"/>
    <title>Canvas tutorial</title>

    <link rel="stylesheet" type="text/css" href="app.css">
    <meta name="viewport" content="width=640; user-scalable=no;"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>

I've got a version of my site rendering in the iPad safari and I've added it to my homepage. If I make a change, like adding some text to the html to my app, then:

I have to refresh twice in safari to see the change.
I have to refresh twice in the "added to homepage version" to see the change.
Even if I try on firefox on my desktop, it takes two refreshes to see my change.

Why does this happen? Why doesn't it work on the first refresh?

iOS 7 "Add to homepage" Update

I've discovered this documentation does not apply to an "add to homepage app" in iOS 7. The cache decides to refresh periodically and as far as I can tell, you have no control over this (maybe you do with javascript, but I haven't attempted that).

Fortunately I've found a workaround. See here: https://stackoverflow.com/a/19674061/61624

score 1 · Answer 1 · answered Dec 12 '13 at 09:33

By observing the traces (on Chrome) I see the browser do not wait for end of application cache refresh to show the requested page from the existing application cache

Then the browser show the previous version.

I guess a solution can be : Detect application cache refresh complete event in the page, then do a reload programmatically (HTML5 features).

I find out at http://www.html5rocks.com/en/tutorials/appcache/beginner/

the following code may help you. (the code ask permission for a refresh, but in your use case the code may be updated to do the reload right away.)

// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {

  window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      // Browser downloaded a new app cache.
      if (confirm('A new version of this site is available. Load it?')) {
        window.location.reload();
      }
    } else {
      // Manifest didn't changed. Nothing new to server.
    }
  }, false);

}, false);

Hope that help

Why isn't my cached webapp refreshing changes on the first try?

iOS 7 "Add to homepage" Update

1 Answers1