Tricks for refreshing cached web page assets in the year 2023

Question

Tricks for refreshing cached web page assets in the year 2023

So far, here are some of the old Cache Buster techniques I've come across:

Adding a query string in the link src: /mstylesheet.css?cache_buster=12345
Changing the filename each time: /mstylesheet-12345.css
Using Apache with Cache-Control "must-revalidate" along with no-cache

I've encountered issues with all of these methods as browsers stubbornly refuse to update assets.

Based on my understanding, it seems like browser caches view the following URLs as distinct entities:

/mstylesheet.css
/mstylesheet.css?cache_buster=12345
/mstylesheet.css?cache_buster=54321

Therefore, the question arises: Will the following javascript code be effective in forcing an existing stylesheet, linked via a link tag without a cache buster query string, to be updated in the browser cache?

fetch("/mstylesheet.css",{ method: "GET",headers: {"Cache-Control": "no-cache"}});

(I would like this to run occasionally, not every time a page loads).

javascript html css browser-cache

Answer 1

Answer №1

According to Referrer and cache control APIs for fetch(), using either reload or no-store can help bypass the locally stored cache when making requests:

  // To completely bypass the cache, use cache: "no-store"
  fetch("some.json", {cache: "no-store"})
    .then(function(response) { /* handle the response */ });

  // To update the HTTP cache with the fetched resource while bypassing
  // the local cache, use cache: "reload"
  fetch("some.json", {cache: "reload"})
    .then(function(response) { /* handle the response */ });

This information remains applicable up to 2023. However, it's important to consider compatibility with older browsers or servers that may not support these cache directives. It's worth noting that misbehaving servers could ignore these headers, and service workers might not forward requests as intended. As long as you have control over these factors, it shouldn't be a problem, but it underscores the need for all components of your application to adhere to these standards.

From what I understand, different URLs are treated as distinct entities in the browser cache, right?

Yes, that is correct. The full URL serves as the cache key, and Chrome has even implemented cache partitioning to ensure that caches from different origins remain separate, even if they refer to the same URL. More information on this can be found here.

Answer 2

According to Referrer and cache control APIs for fetch(), using either reload or no-store can help bypass the locally stored cache when making requests:

  // To completely bypass the cache, use cache: "no-store"
  fetch("some.json", {cache: "no-store"})
    .then(function(response) { /* handle the response */ });

  // To update the HTTP cache with the fetched resource while bypassing
  // the local cache, use cache: "reload"
  fetch("some.json", {cache: "reload"})
    .then(function(response) { /* handle the response */ });

This information remains applicable up to 2023. However, it's important to consider compatibility with older browsers or servers that may not support these cache directives. It's worth noting that misbehaving servers could ignore these headers, and service workers might not forward requests as intended. As long as you have control over these factors, it shouldn't be a problem, but it underscores the need for all components of your application to adhere to these standards.

From what I understand, different URLs are treated as distinct entities in the browser cache, right?

Yes, that is correct. The full URL serves as the cache key, and Chrome has even implemented cache partitioning to ensure that caches from different origins remain separate, even if they refer to the same URL. More information on this can be found here.

Tricks for refreshing cached web page assets in the year 2023

Answer №1

Similar questions

What is the best way to send a Node.js variable to the inner part of a Pug script tag?

Tips for transferring JavaScript values to PHP through AjaxWould you like to learn how to

Combine all div elements to create a unified image and then proceed to save it as a jpg file before uploading to the server

What is preventing me from being able to retrieve the properties of this object in JavaScript?

Ways to Implement Horizontal Scrolling in Dojo FilteringSelect Component

Utilizing JSON for Google Charts

An error was encountered: Unable to assign value to the property "once" of [object Object] because it only has a

Unable to use column formatting on a row using flexbox

Having trouble with Javascript not detecting when it's empty?

mention the element to display on the pagination

Styling HTML elements using CSS within PHP echo statements

Ensure data accuracy by triggering the cache - implementing SWR hook in Next.js with TypeScript

Redux application is not functioning properly

Trigger callback function when user selects a date on the calendar using Material UI X Date Picker

Using third-party libraries like jQuery, CSS, and JavaScript in your React project by directly importing them into the index.html file can be a more efficient approach compared

How to arrange three buttons in a row using CSS styling

Join the nested Observables array

Revising Your Task Checklist with React

Moving data of a row from one table to another in Laravel by triggering a button click

Preventing Duplicate Form Submissions in Rails 5 using jQuery