4

I'm currently running a laravel with VueJs Web application. I made some changes to the css and released the new version a few days ago. Most of the css messed up because of browser cache.

Instead of asking users to force reload cache, which is not feasible , is there another way to force browser to retrieve the new version of files so that the changes are reflected?

Thank you!

Shin
  • 51
  • 1
  • 3
  • asked before, see: https://www.google.com/search?q=forece+update+browser+cache+after+update+site%3Astackoverflow.com, and https://stackoverflow.com/questions/118884/how-to-force-the-browser-to-reload-cached-css-js-files – Luuk Dec 07 '19 at 11:11
  • 1
    doesn't Laravel mix handle this? https://laravel.com/docs/6.x/mix#versioning-and-cache-busting – lagbox Dec 07 '19 at 11:18

3 Answers3

5

Yes, you can prevent the browser caching of your newly updated script by adding a version number at the end of the file. 

<link 
    rel="stylesheet" 
    href="{{ asset('css/app.css?v='.filemtime(public_path('css/app.css'))) }}" 
/>

The same you can do with the js file as well.

the filemtime() method returns the file modification time, that only changes when you modify your css file.

jogesh_pi
  • 9,652
  • 4
  • 34
  • 64
2

Various strategies to achieve this.

Immediate fix :

Rename your CSS/JS file with a dummy suffix and update your HTML to point to them. The browser will be tricked into believing they are different files and will refresh. Framework can probably automate that for you at build time going forward.

Another usual way to deal with this issue is to tweak the headers to always check against the server if the cache expired - can be configured manually in .htaccess - check cache-control and expires headers.

Nicolas B
  • 105
  • 8
2

The best way would be using mix to create version of the compiled assets.

mix.js('resources/js/app.js', 'public/js')
.version();

And because in development mode versions are not needed you can use the following codes to tell mix to puth file versions only when you run npm run prod

mix.js('resources/js/app.js', 'public/js');
if (mix.inProduction()) {
    mix.version();
}

for more info you can check the laravel documentation https://laravel.com/docs/8.x/mix#versioning-and-cache-busting

Divin17
  • 21
  • 2