CODEWITHSUNDEEP
javascriptangularjssingle-page-application
Adam Siemion
Adam Siemion

Reputation: 16039

How to force an update of a Single-page application

I work on a AngularJS Single-page application which once loaded (all the resources are fetched from the HTTP server) only accesses the REST backend to get/send data. The task is how to make sure users are always using the latest version of the frontend code (.js, .css and .html files) when the users never leave the page and never refresh the browser.

I think there are several options:

  1. the frontend asks the HTTP server every N minutes what is the latest frontend code version
  2. the backend includes the latest frontend code version in every response (e.g. an additional HTTP header) which is inspected by the frontend code
  3. the backend returns a cookie with the latest frontend code version and checks if the version provided by the user is outdated
  4. websocket connection between the browser and the backend (not an option for me)

Do you know other approaches?

Upvotes: 4

Views: 4982

Answers (2)

Usman Pervaiz
Usman Pervaiz

Reputation: 493

Recently I have used the 2nd approach in my Agnularjs SPA. What I did is

In my angularjs APP's .htaccess and my API Server's .htaccess I have added a header:

<IfModule mod_headers.c>
    Header add appVersion "1.2"
</IfModule>

Now I will receive this header whenever I am getting anything from API server or frontend(js, html, css, images)

now in my index.html i have defined a variable something like 

var frontendVersion = 1.2

I have a http Response interceptor that will look for each response and I have done something like this

myAPP.factory('httpRespInterceptor', function () {

    return {
        response: function (response) {
            var appVersion = response.headers('appVersion')
            if(appVersion == frontendVersion) {
                console.log('ok')
            } else if (appVersion != null) {
                location.reload();
            }

            return response;
        }
    };
});

I have added a null check because when i am loading a same view twice I am getting Empty Header Object and in my console i don't see any request that is being sent to the server..don't have a clue why this is happening if someone can shed a light it will be grateful :)

so whenever I will make a change in my code/update the application i will change my header appVersion to 1.3 and my index.html variable to var frontendVersion = 1.3

I hope this helps. And also Please let me know if there are best solutions other than this,

Thanks,

Upvotes: 1

Mohsen Shakiba
Mohsen Shakiba

Reputation: 1872

you can also use html5 application cache, this way every time something changes, the website will update itself in the first visit, pretty handy and faster than ordinary cache.

Upvotes: 2

Related Questions