I'm building a Vue.js application using Vuexy BootstrapVue template, deployed in a Docker container.

I am finding that when we deploy updates to our web app, that the User has to do a hard-refresh in their browser to load the latest version of the app, otherwise they'll be navigating around a cached version.

Is there a way for me to force a client browser to load the latest version for a User? Either on every load, or every few hours?

(I've tagged Bootstrap-Vue for transparency, but don't actually know if it has any bearing on this issue)

CodePudding user response：

You are facing the cache problem and there is multiple ways to handle this.

Cache Control

You can control the cache with the header with max-age or no-store, no-cache to simple disable it, like this question/answer: How do we control web page caching, across all browsers?

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control https://csswizardry.com/2019/03/cache-control-for-civilians/

Cache busting

Aappending a version (example: 1.0.0) to query string of the script tag:

<script src="path/to/your/app.min.js?v=1.0.0"

and change that version for every build.

Hashing the script file

You can also use some webpack/rollup config to build the script with a hash, like app.bf43112.js

webpack

const config = {
  output: {
    path: PATHS.build,
    filename: "[name].[contenthash].js",
  },
};

Rollup

const isProduction = process.env.NODE_ENV === 'production';

export default {
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    file: isProduction ? 'bundle[hash].js' : 'public/build/bundle.js',
  }
};

Reference: Hashed file names using Rollup

Service Worker

Another solution, that I never tested, but sounds a good method.. is creating a service worker to control how retrieve the js file: https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker

You can do things like deleting the cache, responding the cache with a response that you manually fetch with js, etc.