How to handle site updates using angular?

Question

I have an angular application hosted on github pages. When I push the new version, users who have partially loaded the site may experience problems before the page is refreshed.

I think this is possible because the user's browser has downloaded an updated version of the view. The updated view uses a new directive that is not found in the modules that they downloaded in their browsers.

I can think of a lot of hacks to get around this, but, of course, this should be commonplace. Is there a standard way to handle this or structure your application to avoid these problems.

Answer 1

Assuming you are decreasing client-side javascript and / or css assets, you can check if there was a script or stylesheet that was included in the html as:

<script src="scripts/vendor.a2d3cfb2.js"></script> 

Still exists on the server - if it does not exist, you can ask the user to restart the application, since it may be an indicator of a new version of the application being deployed.

Please note that this is required using a file that often changes, if not always, when a new version of the application is deployed. If you do not have such a file or you often deploy the application with minor changes, you can use index.html to check the caching devices in the links to the stylesheets; the javascripts in the new version received from the server have changed.

A rough sketch of checking for an updated script file:

 var module = angular.module('test', []); module.run(function($interval, $http) { var intervalHandle; var scripts = [].slice.call(document.scripts); var testFile = scripts[0]; //use resource whose uri changes with each deploy intervalHandle = $interval(function() { $http.head(url + '?' + Date.now()) //scripts may be large avoid downloading content .catch(function(response) { if (response.status === 404 || response.status === 410) { alert('New version may be deployed.'); $interval.cancel(intervalHandle); } }); }, 5 * 1000 * 60); //every five mnutes });