1

I have an offline-friendly Angular SPA set up as follows:

  • Using cache manifest to save all static assets to application cache.
  • Using JS that will auto-reload the page whenever an update in the cache manifest file has been detected. Usually this means that, if there is an update, the page will reload shortly after opening or refreshing the page.
  • Set up HTTP headers so that none of the static assets are stored in the normal browser cache (only in the appcache); this ensures that the auto-reload behavior will always show the latest assets.

All of this works fine, except for one caveat: The browser will only check for cache manifest updates when the page is reloaded, but since the app is a SPA, the user could conceivably be using the app for a long time (and changing views within the page many times) without reloading the app's single page, which brings me to my question. Is there some kind of JS that I could add such that the browser would look for a cache manifest update whenever the user changes views in the SPA without the user having to reload the page itself. The only thing I can think of is to automatically reload the page every time the view changes, thus forcing the browser to look for a cache manifest update on every view change, but this seems counter-intuitive since it is a SPA.

Gerry
  • 628
  • 6
  • 16
  • As per my information, there is no way of pinging app-cahe without reloading the page. You also have one more problem, the app-cache update will not be visible on the first reload. It will be visible only on the second reload due to how app-cache works. – Vishwanath May 05 '15 at 12:17
  • 1
    Thank you @Vishwanath. You are right, the app cache update will not be visible on first load of page after the update, but it is possible to have the JS check for the updateready event and auto-reload the page without the user having to manually refresh. – Gerry May 05 '15 at 12:59

3 Answers3

2

You can add event listener on the appcache update ready event.

Code directly copied from AppCache guide at HTML5-Rocks.

// 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);
Vishwanath
  • 6,284
  • 4
  • 38
  • 57
  • Thank you @Vishwanath, but this doesn't exactly answer my question. As stated in the first comment of the code you posted, this only checks for new cache manifest on page load, but I am looking for JS that will search for new cache manifest on an Angular SPA view change, which does not require a page load -- in fact, it usually doesn't! – Gerry May 05 '15 at 14:31
0

A little late but just in case other might have this questions use this module, you can inject it into your app and check for any changes in your app's manifest on view changes and do what needs to be done in your app!

   appcache.checkUpdate().then(function() {
alert('There\'s an update available!'); });
E. Najafi
  • 63
  • 8
0

This will be better when you are using AngularJS.

Use:ng-apcache

angular.module('myApp')
.controller('indexCtrl', ['appcache',
    function(appcache){
        appcache.checkUpdate()
        .then(
            function(value){
                $window.location.reload();
            }
        );
        );
    }
]);

;

plampot
  • 46
  • 3