Geek Answers Handbook

How to force reboot client after deployment?

I use the MEAN stack (mongo, express, angular and node). I often relate to production ... every couple of days. My concern is that I change client code and API from time to time, and I would prefer not to provide backward compatibility of the API with previous versions of client code.

In such a scenario, what is the most efficient way to ensure that all clients reboot when I click on production? I saw that Evernote, for example, has a popup that says something like this, restart your browser for the latest version of Evernote. I would like to do something similar ... do I have to go the way of socket.io or sock.js, or have I missed something simple, and is there an easier way to achieve this?

+7
javascript client mean-stack
source share
4 answers

Update: AppCache was deprecated in the summer of 2015, so below is not the best solution. A new recommendation is to use Service Workers instead. However, service workers are still experimental with fragmentary (readable: maybe not) support in IE and Safari.

Alternatively, many build tools now seamlessly integrate file-based caching and processing methods with "versions" to solve the OP issue. WebPack may be the current leader in this space.

This might be a good use case for HTML5 AppCache.

You will probably want to automate some of these steps in your deployment script, but here is some code that might come in handy to get you started.

First create the appcache manifest file. It will also allow you to cache resources in the client browser until you explicitly change the date of the application manifest file.

/app.appcache:

CACHE MANIFEST #v20150327.114142 CACHE: /appcache.js /an/image.jpg /a/javascript/file.js http://some.resource.com/a/css/file.css NETWORK: * /

In app.appcache, the comment on line #v20150327.114142 is how we tell the browser that the manifest has changed and the resources must be reloaded. It can be anything if the file differs from the browser of the previous version. When you deploy new code in your application, this line must be changed. You can also use the assembly identifier.

Secondly, on any pages that you want to use appcache, change the title tag as such:

 <html manifest="/app.appcache"></html>

Finally, you need to add Javascript to check the appcache for any changes, and if so, do something about it. Here's the angular module . For this answer, a vanilla example:

appcache.js:

 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 latest hotness. window.applicationCache.swapCache(); if (confirm('A new version of the application is available. Would you like to load it?')) { window.location.reload(); } } else { // Manifest didn't changed. Don't do anything. } }, false);

Alternatively, if AppCache does not work for your situation, a more ghetto solution would be to create a simple API endpoint that returns the current assembly ID or the date of the last deployment. Your Angular application sometimes falls into this endpoint and compares the result with the internal version, and if it differs, it restarts itself.

Or you might think about reloading the script ( example ), but being very useful in development, I'm not sure how good the idea is to use live / in-place reloading of assets in production.

+7
source share

Perhaps you can add a hash to the file name of your client code. e.g. app-abcd23.js .
Thus, the browser will reload the file, and not get it from the cache. or you can just add the hash to url.eg app.js?hash=abcd23 , but some browsers can still use the cached version.

I know that rails have pipline assets to handle, but I am not familiar with MEAN stack . there must be an npm package for this purpose.

And I don't think you really need to use socket.io if you want to notify the user that their client code is out of date. you can define your version both in html meta tag and js files, if they do not match, show a pop-up window and inform the user about the update.

+1
source share
  • Try to limit your js / files to expiration for a shorter period of time, i.e.: 1 day.
  • But if you want to pop something up and ask your user to restart ( ctrl + f5 ) your browser, then just create a script to pop up this news, if you just changed some of your files, check ip / session, which simply reloaded / said restart therefore they will not be annoyed by several pop-ups.
0
source share

Recently, I have run into the same problem. I fixed this by adding my application build number with my js / css files. All my script and style tags were included by the script in the general include files, so it was trivial to add a "build number" at the end of the js / css file path, like this

 /foo/bar/main.js?123

This 123 is the number that I am tracking in the same header file. I increase it when I want the client to force download all the js files of the application. This gives me control over downloading new versions, but allows the browser to use the cache for each request after the first. This is until I click another update by increasing the build number.

It also means that I can have a cache expiration header no matter how much I want.

0
source share

More articles:


All Articles