Vue.js after deploying an app i need to hard refresh in order to see the changes i've made

Question

I have a live app which is used by other clients. after i made changes on dev environment i'm deploying the app. Naturally the cliend doesn't do hard refresh but the client needs to do hard refresh in order to see the changes i've made. What can i do ?

Answer 1

Been struggling with this myself.

I modified the original registerServiceWorker.js provided by Vue when creating a new project to include the following under the updated () function:

    updated () {
      console.log('New content is available; please refresh.')
      caches.keys().then(function(names) {
        for (let name of names)
          caches.delete(name);
      });
    },

The complete file:

/* eslint-disable no-console */

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log(
        'App is being served from cache by a service worker.\n'

      )
    },
    registered () {
      console.log('Service worker has been registered.')
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    updatefound () {
      console.log('New content is downloading.')
    },
    updated () {
      console.log('New content is available; please refresh.')
      caches.keys().then(function(names) {
        for (let name of names)
          caches.delete(name);
      });
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error (error) {
      console.error('Error during service worker registration:', error)
    }
  })
}

So after deploying a newer version, the browser will detect it automatically and clear the cache. Unfortunately, it does not trigger automatically in the app's lifetime as the client still needs to refresh, but at least skips the need for a HARD refresh.

My next task is to get this to work during the app's lifetime.

Answer 2

When your app is deployed, it is actually built with some new assets and the code doesn't need any update because the cache is invalidated (if the deployment is done well).

Service workers may persist but this is a different thing.