HTML5 appCache event for no update

Question

I have a on page oad event that checks my manifest status, and if there is a change it asks the user to reload. However, I'm trying to bind a <button> to manually check if there is a status on noupdate. I can't seem to get this to work, here's my code:

window.addEventListener('load', function(e) {
  if (window.applicationCache) {
    window.applicationCache.addEventListener('updateready', function(e) {
      if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
          // Browser downloaded a new app cache.
          // Swap it in and reload the page to get the new hotness.
          window.applicationCache.swapCache();
          if (confirm('A new version of this App is available. Load it now?')) {
                window.location.reload();
          }
        } else {
          // no manifest change..
        }
    }, false);

    // if there is no update, display a message
    window.applicationCache.addEventListener('noupdate', function(e) {

      alert('App is up to date. ');

    }, false);

  }
}, false);

// check for a update each hour
setInterval(function () { window.applicationCache.update(); }, 3600000);

My function detecting noupdate essentially fires my alert on page load without a hitch, but If I use it in a function tied to a button..

<a href="javascript:refresh();" data-theme="a" data-role="button" 
data-icon="arrow-r" data-inline="true">Refresh</a>

<script>
    function refresh() {
        if (window.applicationCache) {
            window.applicationCache.addEventListener('updateready', function(e) {
              if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
                  // Browser downloaded a new app cache.
                  // Swap it in and reload the page to get the new hotness.
                  window.applicationCache.swapCache();
                  if (confirm('A new version of this App is available. Load it now?')) {
                        window.location.reload();
                  }
                } else {
                  // no manifest change..
                }
            }, false);

            // if there is no update, display a message
            window.applicationCache.addEventListener('noupdate', function(e) {

              alert('App is up to date. ');

            }, false);

          }
    }
</script>

It does not get the noupdate status...

Answer 1

If you bind event listeners on window-load, as exemplified in your first code block, all you need to do in the refresh function is this:

<script>
    function refresh() {
      applicationCache.update()
    }
</script>

After you have called applicationCache.update, either "updateready", "noupdate" or "error" event will fire. The error event typically means the appcache manifest could not be downloaded because the server is unreachable. You may wish to bind a listener to this event as well.

As an aside, calling window.applicationCache.swapCache() is not necessary for how you're using appcache currently. swapCache is only needed when you want to update resources (e.g. images shown on the page) without reloading the page itself. window.location.reload() is sufficient for a full reload of all resources, with the benefit that all your javascript is evaluated again and such. A true restart.

Answer 2

This is because the noupdate event is only fired on the page's load event. As you load the page, the browser will check the application cache, determine whether an update is needed, and then fire the event. When you click the button, the event would already have fired so you can't catch it.

Instead, you should indeed attach the event to page load, but have your updateready and noupdate events update a variable, e.g. isUpToDate instead. Then, your button's click handler should check the the isUpToDate variable and decide whether or not to refresh accordingly.