PDF in Object tag does not read latest version

Question

I am hosting a website where a couple of PDF-files which are currently in Object-tags are updated weekly. The name of these PDF-files stay the same, but the data changes.

Currently I'm using:

<object id="men" data="seasons/S2223/Men2023.pdf?" type="application/pdf" width="100%" height="750px">
<p>The file could not be read in the browser
      <a href="seasons/S2223/Men2023.pdf?"> Click here to download</a>
</p>
</object>

When I update the PDF I'm expecting the

data="seasons/S2223/Men2023.pdf?"

to be reading the latest PDF however it stays the same as before.

I added the ? at the end of the filename which should check for the latest version but it doesn't seem to work.

When I clear my browser's cache it's updated but ofcourse this isn't a suitable option for users.

All help is appreciated.

Answer 1

Caching, in this context, is where the browser has loaded the data from a URL in the past and still has a local copy of it. To speed things up and save bandwidth, it uses its local copy instead of asking the server for a fresh copy.

If you want the browser to fetch a fresh copy then you need to do something to make it think that the copy it has in the cache is no good.

Cache Busting Query String

You are trying to use this approach, but it isn't really suitable for your needs and your implementation is broken.

This technique is designed for resources that change infrequently and unpredictable such as the stylesheet for a website. (Since your resources change weekly, this isn't a good option for you.)

It works by changing the URL to the resource whenever the resource changes. This means that the URL doesn't match the one the browser has cached data for. Since the browser doesn't know about the new URL it has to ask for it fresh.

Since you have hardcoded the query to n=1, it never changes which defeats the object.

Common approaches are to set the value of the query to a time stamp or a checksum of the file. (This is usually done with the website's build tool as part of the deployment process.)

Cache Control Headers

HTTP provides mechanisms to tell the browser when it should get a new copy. There are a variety of headers and I encourage you to read this Caching Tutorial for Web Authors and Webmasters as it covers the topic well.

Since your documents expire weekly, I think the best approach for you would be to set an Expires header on the HTTP resource for the PDF's URL.

You could programmatically set it to (for example) one hour after the time a new version is expected to be uploaded.

How you go about this would depend on the HTTP server and/or server-side programming capabilities of the host where you deploy the PDF.