Level 75
Uses basically have to be smart enough to clear browser cache as-needed or give them a friendly warning somewhere on the page to clear catche as needed.
I don't believe this no magic cover all answer here.
Jul 19, 2018
11
Level 4
How to clear the users browser cache so that the newest Vue deploy loads?
I deployed my app to Laravel Forge. It looks great in an incognito window but in a normal Chrome window the app is broken. I know clearing my browser cache will work but I cannot tell that to every single returning user. How can I make sure that returning users see the latest version of my app?
I have the version method in my webpack.mix.js:
mix.js('resources/assets/js/app.js', 'public/js').version();
mix.sass('resources/assets/sass/app.scss', 'public/css').version();
In my layouts.blade.php I load in my Javascript like so:
<script src="{{ asset('js/app.js') }}"></script>
How can I make sure my returning users see the latest Vue.js?
Level 104
Asset versioning should be solving this issue for you... can you use the mix() helper rather than asset()
3 likes
Level 4
@tykus was right. Mix() instead of asset fixed the issue! Thank you
Level 67
@jlrdw Yes there is. Perhaps you should watch some of Jeffreys videos on webpack/mix :P
Level 75
But still, that does not
clear the users browser cache
You cannot clear a uses browsers cache, they do that.
Level 67
But if you use version(), it forces the browser to download the latest version of the assets and having to have the user clear their cache is totally unnecessary, as they'd never have to do it to being with ;)
Level 75
Good to know, usually I just write my own css, so version() will also take care of css? Or is version() just for JS?
Level 67
Obviously you haven't watched Jeffreys videos on it (like you always tell everyone else to do lol o.O)
At about the 3 min mark...
https://laracasts.com/series/whats-new-in-laravel-5-4/episodes/3
1 like
Level 75
Just watched, neat how it works. What's weird is I have changed css in the past, no mix, and the browsers will still show older cached css, but after a few clicks, i.e., say you are paginating, things auto catch up.
I will study this more in docs, the versioning (hash) still has me confused. Of course Jeffery makes this stuff look so simple.
Level 67
The hash is pretty simple. Each time the file contents are changed and run through webpack, webpack will append the hash for that new version. I believe it just md5's the contents of the file to generate the hash.
So one time app.js might have this hash app.js?1234. Then you change something in app.js, and the hash changes to app.js?5678 when run through mix. To the browser, those are 2 different files. It says "hey, I don't have app.js?5678, download it." So it will always force the browser to download the latest version.
the browsers will still show older cached css, but after a few clicks, i.e., say you are paginating, things auto catch up.
Yeah, that's normal. Each browser has a different cache time though. It might be a few clicks for one browser, or it might be a week for another (unless using explicit cache-headers for the request)
2 likes
Level 6
the browsers will still show older cached css, but after a few clicks, i.e., say you are paginating, things auto catch up.
Is there no way with Etags or Cache-Control to deal with that and really have a clean slate. We do use Mix versioning but often some older stuff still remains behind. We want to trigger a full clean reload sometimes..
Please or to participate in this conversation.