Vue WebApp - Load latest build

Question

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)

Answer 1

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.