CODEWITHSUNDEEP
javascripthtmlbrowser-cachepage-refresh
demiculus
demiculus

Reputation: 1333

How to hard refresh when user tries to refresh?

I have cache svg problem in my site when the user refreshes the site. But when the user hard refreshes the problem doesn't exist.

So when the user tries to refresh the site I want it to hard refresh. How can I do this?

I'm using typescript.

There are 2 components to this,

  1. Understanding that user wants to refresh
  2. Hard refreshing for the user

Also I've tried

<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate, post-check=0, pre-check=0" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

none of them worked.

Upvotes: 2

Views: 589

Answers (3)

treyBake
treyBake

Reputation: 6560

You can keep CSS/JS up-to-date on a client by using version control.

The advantages over using a timestamp is that it doesn't force a end-user to download the resources each time they refresh or land on a page, instead they only download the files when there's an update. You can either manually do this, e.g:

<link rel="stylesheet" href="css/file.css?version=0.0.1" />

of course the problem with this, is that you have to remember to do this each time you make a change. But it does mean a user will only download specific files that are changed. You could use a server-side language like PHP to create a variable and simply append to ?version= to do a blanket update where you simply change the variable value to update. However this will update every file per update.

<?php $version = '0.0.1'; ?>

<link rel="stylesheet" href="css/file.css?version=<?php echo $version; ?>" />
<link rel="stylesheet" href="css/file2.css?version=<?php echo $version; ?>" />
<link rel="stylesheet" href="css/file3.css?version=<?php echo $version; ?>" />

There probably is a way to do with vanilla JavaScript but my knowledge of JavaScript is much more finite than my knowledge on PHP.

Upvotes: 1

Matija Lukic
Matija Lukic

Reputation: 669

Just add unique query to URL to your html src atribute, e.g. using timestamp: url + '?' + Date.now()

That are going to generate new number every time so you will get new file version.

Upvotes: 0

alanmcknee
alanmcknee

Reputation: 199

Try to add some timestamps to your assets. src="your.svg?ts=321321323"

Upvotes: 1

Related Questions