What's the proper way to inform users to refresh the browser on a SPA website (when .js files are changed)

Question

I'm looking for a proper way to inform users about an updated website version.

Whenever I upload new production .js files some parts of the website still works properly without refreshing the browser, but most doesn't and users might never figure out to just refresh the browser.

How can I give an automatic notice for users to refresh the browser, whenever new .js files are uploaded?

I'm using Vue and Laravel-mix.

Answer 1

A cache buster is required and can be automated with eg. gulp-rev : the concept is to rename resource files at each build, so that they won't be retrieved from cache when the user opens your app.

But it's not sufficient if the browser tab is open and the upgrade is done while the user is using the app. In this case, perhaps you want to display a modal message to refresh the page, or automatically refresh to load the new version.

For that, you should store the version number (or git commit hash) somewhere in your SPA scope when the app is first opened, and periodically check the current backend version with a webservice call. If you detect a version change, you'll display the message (and prevent the user from using its old version).