How to force users to see new site instead of the cached version?

Question

We've just launched a new website. This was a complete redesign, including a change from a static HTML website, hosted on Server A, to a WordPress site hosted on Server B. (the relevance of that is server caching)

I've sent the new website to members of our team, some of whom haven't been on their computers since 20-Dec-2021 (its now 11-Jan-2022) and their computer has displayed the old website to them. The HTML of the old website gets served to them, but not the images. So in essence they get a broken site. They can get the new site by refreshing the page.

This is obviously some sort of caching issue, either browser or server, I'm not concerned about our team members, but am concerned about potential customers who have previously visited the site getting served the wrong and / or broken site.

The homepage URL is still the same (eg. https://example.com) so I can`t force them to see the new site that way.

Any ideas how I can force users who have previously visited the old site to see the new site?

Further info: I'm running a LAMP stack with Plesk.

Answer 1

You are likely out of luck. There is nothing you can do to uncache a client other then wait out the caching period.

Delending on how bad the caching is, you may get some relief by using a different subdirectory, or, as @Stephencollins commented adding irrelevant parameters to the URL.

Alternatively you could launch the new site on a different domain.

I'd suggest the first step is to try ascertain how long the caching is /was being set for.

Answer 2

So that users don't see broken pages, you should make sure that your old images, css, js, etc get copied to your new server. That way, even if a user is viewing an old copy of the page, the browser can still fetch any resources it needs to render that old page and prevent it from looking bad, even if it isn't up to date.

---

If there is a JavaScript file that is loaded by the old site, you can use it to force users to get the new site. You can replace its contents on the new server with code that forces the page to reload.

window.location.reload();

The new site shouldn't have a reference to this JS to prevent the site from continually refreshing.

---

You should set proper cache control headers so that you don't have this problem again in the future. Rather than making browsers guess how long they can cache pages, you should explicitly tell them.

For a site based on Apache, you can put something like this in your .htaccess file:

# Default caching: 1 day
Header set Cache-Control "max-age=84600, public"

# Resource caching: 1 week
<FilesMatch "\.(ico|jpg|jpeg|png|gif|svg|webp|pdf|js|css)$">
  Header set Cache-Control "max-age=592200, public"
</FilesMatch>

That would mean that everybody gets new HTML within 24 hours and changes to images and scripts with in a week. I usually recommend longer cache times for resources because changes to them can be forced by using version parameters on their URLs.

Answer 3

User versioning on your .css and .js file urls. Eg.:

mystyle.css?v=1
myscript.js?v=1

mystyle.css?v=2
myscript.js?v=2

And then you just add a new version.

Answer 4

The mentioned code below will do that:

const clearCache = useCallback(async () => {
        const version = localStorage.getItem('version')
        if (version === packageJson.version) return

        localStorage.clear()
        localStorage.setItem('version', packageJson.version)

        const hasCache = 'caches' in window
        if (!hasCache) return

        const keys = await caches.keys()

        await Promise.all(keys.map((key) => caches.delete(key)))

        // Makes sure the page reloads. Changes are only visible after you refresh.
        window.location.reload(true)
    }, [])
    useEffect(() => clearCache(), [clearCache])

Answer 5

Might be silly of me to ask but have CTRL+F5 keys been used?

I ask because my goto browser is FireFox and clicking Refresh doesn't always reflect changes made to my dev or production sites unless, those two keys a pressed. Sometimes it takes up to three goes of that key combo for the change to display especially images and favicons.

UPDATED: OK understood sam, maybe use a JS Alert on the site to advise users to force a refresh?

Or using the htaccess file to redirect as in: Redirect 301 / https://example.com or Redirect /path/to/old/file/old.html /path/to/new/file/new.html maybe even this, RedirectMatch 301 ^/blog/about /blog/about.html. There's a few examples out there that should suit.

Using Mod rewite also come to mind.

Another thought, using Forcing a Page to Load from the Server as answered at Stack Overflow.