HTML5 appCache event without refresh
I have an event on the oad page that checks my manifest status, and if there is a change, it asks the user to reload. However, I am trying to link <button>
to manually check if the status is on noupdate
. I can't seem to get this to work, here is 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 detection function noupdate
essentially fires my alert on page load without a hitch, but if I use it in a button related function.
<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 doesn't get noupdate status ...
source to share
If you bind event listeners on window load, as shown in the first block of code, all you need to do in the update function is the following:
<script>
function refresh() {
applicationCache.update()
}
</script>
After you have called applicationCache.update, the "updateready", "noupdate" or "error" event will fire. An error event usually means that the appcache manifest cannot be loaded because the server is unavailable. You can also bind a listener to this event.
As an aside, the call is window.applicationCache.swapCache()
not required for the way you currently use appcache. swapCache is only needed when you want to update resources (such as images shown on a page) without reloading the page itself. window.location.reload()
enough to completely reload all resources, assuming all your javascript is being evaluated again and so on. A real restart.
source to share
This is because the event noupdate
is only fired on the page load
. On page load, the browser checks the application cache, determines if an update is required, and then fires an event. When you click the button, the event will already be fired so you can't catch it.
Instead, you should really bind the event to the page load, but your events updateready
and noupdate
update the variable, eg. isUpToDate
... Then your button click handler should check the variable isUpToDate
and decide whether to update it accordingly.
source to share