1

I see a lot of answers about forcing cache reload recommending a solution that incorporates the HTML page itself.

But when you have a situation where your old website was written as an index.html homepage, and now you swap that with something new, how do you make sure that a returning visitor sees the new content?

The old website used to have index.html as the index page (in nginx's configuration), which i have now changed to index.php. But whenever i visit it from a browser that has visited it previously, it still opens the cached old index.html page. A new browser will load index.php correctly.

One of seemingly correct answers i found, was to tell nginx to set expires -1; for the server {} section, which would force the cache to invalidate; but for some reason that didn't work.

What needs to happen, of course, is that the visitors will always get the new page, without explicitly issuing a refresh themselves.

Presumably the solution should be to invalidate the cache through headers. But how?

Edits to address all the suggested comments and answers

  1. Like i said in the first paragraph of my answer, this issue is not solved by editing the index file (like adding parameters for "cache busting"), because the index file itself has been cached, that is the problem.
  2. I have nowhere in my question mentioned javascript or CSS files. Again, it's the index.html file that has been cached.
  3. The existence of index.html and index.php does not create conflicts. The entire system is working correctly, it's only the old visitors who have previously visited the page back when index.html was set as the index page in the server configuration, that still get the cached index.html as the homepage even after the index has been changed to index.php. This is also very easily provable by the fact that this problem still happens even after the index.html file is completely deleted. Because once the browser caches an HTML file, it no longer asks the server for what the index file is, it just shows what it has cached.

So the complete scenario is this:

  1. The website has index.html set as the index page in the server configuration
  2. Browser visits the website
  3. Browser caches the homepage
  4. The index page in the server configuration gets changed to index.php
  5. Same browser visits the website
  6. Browser shows cached index.html from before

In number 5., if i were to visit the website with a new browser, it will show the contents of the new homepage that is in index.php. So the question is, how do i get the old browser to forget what it has cached, and load the new homepage?

Digital Ninja
  • 3,415
  • 5
  • 26
  • 51
  • Did I understand this correctly? You do not have a "new" index page, but rather an old one. You then have made some CSS / JS changes, what have you, and the users have the old CSS / JS cached, and you now want them to have an uncached version of the page so that they make use of the NEW edited CSS / JS? – Martin Nov 14 '18 at 09:54
  • If that's the case, then one way of doing it would be to add a phantom/ghost string to your CSS / JS files where it is relevant. Better known as *cache busting*. This shouldn't be added to static libraries, but rather things that you will change over course of time, such as custom CSS and JS and whatnot. No need to add it to static libraries you won't make changes to as caching is a healthy functionality, making users load content faster, improving their user experience. – Martin Nov 14 '18 at 09:58
  • If you have 2 index files, assuminly *index.html* and another named *index.php*, then that could cause some conflicts. I would suggest naming the old index file *index-old.html* and perhaps put a redirect logic in the *.htaccess* file, so that if the user should ever land / try to go to *index-old.html*, they'll be redirected to the relevant index page, in this case, *index.php*. You could also remove the old index page entirely if you don't care to save whatever content it contains as a back-up. – Martin Nov 14 '18 at 10:13
  • i've edited my original question to address the suggestions. @Martin – Digital Ninja Nov 14 '18 at 10:42

1 Answers1

1

If I understood your question correctly, I believe what you are looking for is something called cache busting. What this means, is that you essentially add a phantom/ghost string to your relevant CSS / JS files. By relevant, I mean files that you expect to make changes to over the course of time.

Remember, caching is a healthy functionality to the user, as it makes your website faster once the user has loaded the content once. You should therefore think carefully of what files you want to add the cache busting to. Fx. there is no need to add cache busting to static libraries that you will not make future changes to.

An example of cache busting would be the following:

<script src="/js/example.js<?php echo '?'.date('Y-m-d H:i:s'); ?>" type="text/javascript"></script>

<link href="/css/example.css<?php echo '?'.date('Y-m-d H:i:s'); ?>" rel="stylesheet">

What you will notice here, is that I am concatenating the PHP date function to my JS and CSS examples. The date function prints the current day, hour, minutes and seconds. In other words, it's constantly changing its name down to the very second. Therefore, it is impossible for the browser to keep a cached version of the files as they are technically not the same file after every second has passed.

If this wasn't what you were looking for, specifically, let me know and I'll edit my answer.

Your question could also be similar to what has been addressed and answered here.

Martin
  • 2,326
  • 1
  • 12
  • 22
  • i've edited my original question to address everyone's suggestions. – Digital Ninja Nov 14 '18 at 10:42
  • Are you not able to *cache bust* the page so that it is forced to load the new contents? For example if they load and old *whatever-page.php*, then doing *whatever-page.php?123* will make browser interpret it as something else entirely and load a fresh version. – Martin Nov 14 '18 at 13:06
  • Sure, but how would you get the visitors to go to that URL? All this refers to the homepage, which loads when visitors go to the base URL, such as `www.example.com`. So i can't really force people to say "btw, add ?123 in your address bar". Basically the problem here is that the server used to tell everyone "please cache your HTML pages", and now i need it to tell them "hold on, i changed my mind". You know what i mean? Because those browsers caching HTML pages was the correct behaviour, but it was a mistake on the development part, and now i need a mechanism to undo it. – Digital Ninja Nov 14 '18 at 13:39
  • In that case, try have a look at this thread: https://stackoverflow.com/questions/49547/how-to-control-web-page-caching-across-all-browsers – Martin Nov 14 '18 at 13:41
  • If it doesn't work on page-level at all, try to address the issue with the use of the .htaccess file as described in the link I gave earlier. Other than that, I can't come up with anything else. @DigitalNinja – Martin Nov 14 '18 at 13:51