cache issue with updating old codes

user_9985969 0
Viewed 151

I'm having extremely annoying and deal breaker issues with all the js caching that nuxt js does, all the codes get executed as they were cached before and not being implemented on website unless the user clears the browser cache for the website manually!

I searched for solutions to delete caches automatically and didn't found such solution. now I have recently upgraded my website and changed a get method axios command to post but whenever I or anyone else opens the website it gets the data via old get method and throwing errors unless you clear caches manually.

I had same issues before when changing UI of website completely and it showing old codes when you enter website, like showing some content which are completely removed in new code but not disappering unless I clear caches.

is there any solutions to get around these kind of problems?

nuxt.js vue.js
1 Answers

I have recently founded a solution for this problem that seems to be working well.

  1. Create the following plugin:

     // update.js
 export default async (context) => {
       const workbox = await window.$workbox

       if (!workbox) {
         console.debug("Workbox couldn't be loaded.")
         return
       }

       workbox.addEventListener('installed', (event) => {
         if (!event.isUpdate) {
           console.debug('The PWA is on the latest version.')
           return
         }

         console.debug('There is an update for the PWA, reloading...')
         window.location.reload()
       })
 }

  2. Add the plugin to Nuxt:

     // nuxt.config.js

 // ...

   plugins: [
     { src: '@/plugins/update.js', mode: 'client' },
   ],

 // ...

This plugin forces the app to reload after an update is pushed. Other than this I suggest that you change the version property in your package.json each time you want to push a new update.

Hope this helps!

Source: Github: Nuxt community: Detect and update new builds

user_54151020
Related