VueJS - how to redeploy app and force users to reload the whole app?

Question

I have an app deployed that requires login. It uses API calls to GET/POST/DELETE/etc data. For this particular app, it is very likely that users are keeping it open all the time, day after day. They have no need to close the browser.

My problem is that if I do a bug fix, and redeploy the app, some users may not get that updated version since they are using the cached version of the app (cached in their browser).

My question is: is there a way to force the user to reload the whole app?

I was thinking I could somehow force them to log out, and then, upon logging back in, the user's browser would reload the whole app. Would that work?

What are the other options?

You could have an API call for checking the version only, or include a version property or header in every API response. Then, if there is a version mismatch, force a reload. — Daniel, Oct 30 '18 at 18:18
@BoussadjraBrahim I use Django to power an API with Django Rest framework — Garfonzo, Oct 30 '18 at 22:03
Please check this answer https://stackoverflow.com/questions/20744846/force-webpage-refresh-from-external-page — Pavlo Zhukov, May 13 '20 at 22:21
Does this answer your question? [Force webpage refresh from external page](https://stackoverflow.com/questions/20744846/force-webpage-refresh-from-external-page) — Pavlo Zhukov, May 13 '20 at 22:21

score 0 · Answer 1 · answered May 13 '20 at 21:57

The backend serving your files must include headers that tell the browser not to cache your app. There is this very good explanation about it. Some spoiler:

response["Cache-Control"] = "no-cache, no-store, must-revalidate" # HTTP 1.1.
response["Pragma"] = "no-cache" # HTTP 1.0.
response["Expires"] = "0" # Proxies.

As your users keep logged in for long periods, you could set a timeout refresh maybe. With the right headers, this refresh will bring the new version to your users. I like Daniel's idea too, but it feels slightly harder to implement, I guess.

IMHO, it's better to keep caching and serve assets with hash — Pavlo Zhukov, May 13 '20 at 22:17

VueJS - how to redeploy app and force users to reload the whole app?

1 Answers1