Cleanly deploying PJAX or Turbolinks application

Question

If I have an application that uses PJAX or Turbolinks then I am seeing a problem when new code is deployed to the server - say Heroku. The issue is that users who are accessing the application will continue to use the Javascript from the previous version of the application (since it is already loaded into the browser), but will get the HTML pages from the new version. Sometimes the new HTML code assumes the new Javascript is loaded so things don't work properly.

Have others noticed this problem? What do you do about it? It seems like this would be a common problem for single-page Javascript applications (like those based on Backbone and Ember) too. Meteor at least seamlessly upgrades the code in the client, as a way to deal with this problem.

Answer 1

https://github.com/rails/turbolinks/#asset-change-detection looks like the answer. In your script tags, put data-turbolinks-track. Then I assume what happens is that when turbolinks loads a page, it looks for that script tag, and if the URL has changed (it will change automatically if you use the asset pipeline) then it reloads the whole page for you.

Answer 2

taking pivotaltracker as an example, they check for the client connection and force the user to reload their clients if a new version arrived.

as long as you don't provide backwards compatibility within your app, there is nothing else you can do.

Answer 3

If you're using Pjax, you can add

<meta http-equiv="x-pjax-version" content="v123">

to your header. You can use a server defined value for the content attribute, and then before you deploy, just make sure that value is updated. Once it's deployed, subsequent Pjax requests will see this header has been updated, cancel it's Ajax request, and pull down a full page reload.

For Turbolinks 5, you can add data-turbolinks-track="reload" to your script and stylesheet links in the header. Turbolinks will watch these files for changes on each request. Then upon deployment, just like Pjax, it will request a full page reload.

Classic Turbolinks just requires the attribute data-turbolinks-track instead.

You can read more and see other functions on Pjax's GitHub page: https://github.com/defunkt/jquery-pjax or Turbolinks: https://github.com/turbolinks/turbolinks.

For Turbolinks Classic: https://github.com/turbolinks/turbolinks-classic