CODEWITHSUNDEEP
angularjs
Al Polden
Al Polden

Reputation: 920

How to refresh partial views when the appCache is updated?

I'm using angularjs routing:

angular.module('questionModule', []).
  config(['$routeProvider', function ($routeProvider) {
      $routeProvider.
      when('/questions', { templateUrl: 'partials/questions.htm', controller: QuestionsController }).
      when('/questions/:Id', { templateUrl: 'partials/questionDetail.htm', controller: QuestionDetailCtrl }).
      otherwise({ redirectTo: '/questions' });
  } ]);

on this page:

<html ng-app="questionModule" manifest="AngularManifest.appcache" >
<head>
    <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="question.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
    <script src="appCacheBootstrap.js" type="text/javascript"></script>
</head>
<body>
    <h2>This example uses angular js routing to display partial views</h2>
    <div ng-view></div>
</body>

Yet when i make a change to one of the partial view files and update the manifest file to force the app cache to be refreshed, the change does not appear. I have to access chrome://appcache-internals/ and remove the app cache to see the updates. How do i make this automatic? The app cache appears to refresh correctly when im on a page that doesn't use routing.

Here is how i handle changes to the manifest file:

$(function () {
    if (window.applicationCache) {
        applicationCache.addEventListener('updateready', function () {
            console.log("appcache status: " + window.applicationCache.status);
            if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
                window.applicationCache.swapCache();
                if (confirm('A new version of this site is available. Load it?')) {
                    window.applicationCache.update();
                    window.location.reload();
                }
            }
        });
    }
    {
        console.log("null window.applicationCache");
    }
});

When i'm on an augularjs routed page window.applicatonCache is null.

Upvotes: 4

Views: 2537

Answers (2)

JDawgg
JDawgg

Reputation: 759

Were you missing an 'else' before the curlies containing the "null window.applicationCache" message?

If so the correct snippet would have been:

$(function () {
    if (window.applicationCache) {
        applicationCache.addEventListener('updateready', function () {
            console.log("appcache status: " + window.applicationCache.status);
            if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
                window.applicationCache.swapCache();
                if (confirm('A new version of this site is available. Load it?')) {
                    window.applicationCache.update();
                    window.location.reload();
                }
            }
        });
    }
    else{
        console.log("null window.applicationCache");
    }
});

Otherwise you were printing the null applicationCache message every time regardless of whether the cache was active or not. Don't believe everything you read in the console :).

Upvotes: 2

Al Polden
Al Polden

Reputation: 920

It turns out that because i was running the site via the asp.net development server rather than IIS it didn't work. I suspect that the development server added headers to stop it from working.

Upvotes: 0

Related Questions