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:

  1. Adding a query string in the link src: /mstylesheet.css?cache_buster=12345
  2. Changing the filename each time: /mstylesheet-12345.css
  3. 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).

javascripthtmlcssbrowser-cache

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjustable Scroll Bar

Could anyone help me find a component similar to the resizable scrollbar on Google Finance? Check out this link: http://www.google.com/finance?q=EURUSD&ei=bhM_UKDXF-aIWqAPVNQ You can see it below the chart. If you know where I can find something like ...

javascriptcomponents

I have received a JSON multi-line string after entering information in a textarea

I've been working on a small social network project where users can create and share posts. However, I encountered an issue with formatting when storing and displaying the posts. When a user enters text with line breaks in the post creation form, it ...

javascriptphpsqljsonajax

Discovering if an input field is read-only or not can be achieved by using Selenium WebDriver along with Java

Currently, I am utilizing selenium webdriver along with Java to create a script. One issue we are encountering is that certain fields become disabled after clicking on a button. We need to determine if these fields are transitioning into readonly mode or ...

javajavascriptselenium-webdriver

What is the best way to create a gradual color change in each individual cell instead of changing all at once?

Looking for some help with a grid I'm working on. I've got the cells changing colors like I want them to, but they're all changing at once. What I really need is for them to light up in a specific order - Yellow, Green, Blue, White, Orange. ...

javascripthtmlcss

Arrange the items in the last row of the flex layout with equal spacing between them

How can I arrange items in rows with equal space between them, without a large gap in the last row? <div fxFlex="row wrap" fxLayoutAlign="space-around"> <my-item *ngFor="let item of items"></my-item> </div> Current Issue: htt ...

htmlangularcssflexbox

Unlimited scrolling: Fetching additional data via an Ajax request?

I am working on setting up a table with infinite scroll functionality to showcase user information such as name, address, and email. To accomplish this, I began by importing the json-server package and creating an API endpoint using fakerjs in a separate f ...

javascriptjqueryajax

reversing an array does not have an effect

Whenever I attempt to reverse the order of my array using the reverse() function, the changes do not reflect in the view until I make a change to the file and save it. Items.js: import { useState } from "react"; const Items = (props) => { ...

javascriptreactjsnext.js

Reactjs may have an undefined value for Object

I have already searched for the solution to this question on stackoverflow, but I am still confused. I tried using the same answer they provided but I am still getting an error. Can someone please help me resolve this issue? Thank you. const typeValue = [ ...

javascripttypescript

Creating an Editor for Input Text Field in HTML: A Step-by-Step Guide

In the vast landscape of JS libraries that can achieve this function, like Trumbowyg and more. However, prior to my rails project displaying that slim version, I need to ensure JavaScript is properly escaped! Therefore, I need to create an editor using o ...

javascripthtmlruby-on-railsrubyeditor

Obtain non-numeric parameters from the URL in Angular 2 by subscribing to

How do I handle subscribing to a non-numeric parameter from a URL? Can the local variable inside my lambda function params => {} only be a number? Here's my code: getRecordDetail() { this.sub = this.activatedRoute.params.subscribe( ...

javascriptangulartypescript

Enhancing an image with zoom effect in a 2-column layout on hover

Could someone help me achieve a 2-column layout where the left column contains text and the right column an image? I want the image in the right column to zoom when the user hovers over either the left or right column. The issue is that when the user hove ...

htmlcss

In Chrome, CSS automatic hyphens are displayed as question mark symbols

On my website, I have implemented automatic hyphenation using CSS: article > p, article > li { -o-hyphens: auto; -o-hyphenate-limit-before: 3; -o-hyphenate-limit-after: 3; -o-hyphenate-limit-chars: 6 3 3; -o-hyphenate-limit-lines: 2; -o-h ...

htmlcssreactjs

What causes the disparity in the functionality of getServerSideProps between index.js and [id].js in NextJS?

Exploring NextJS and React as part of my e-commerce site development journey has been exciting. However, I encountered a roadblock when trying to connect to an external database that requires real-time updates, making getStaticProps unsuitable for my needs ...

javascriptreactjsnext.js

Is there a way to use HTML and CSS to switch the style of a dynamic decimal number to either Roman numerals or Katakana characters within a specified HTML element, such as a tag, div

I've searched everywhere but only found guides on list styling and counter styling in CSS that didn't work out. So, for example, I have a number inside an HTML tag that is changed dynamically using Vue Watch. I want to display the number in upper ...

javascripthtmlcssvue.js

The token endpoint in Nuxtjs auth module's configuration for auth strategies is not being triggered

Our system has two important endpoints, namely /auth and /token. The endpoint /auth is responsible for providing the authorization code required to call /token in order to obtain an access token. The utilization of NuxtJS has made the auth module a prefer ...

javascriptvue.jsnuxtjsnuxt-auth

What is the fallback mechanism in Astro js when the cache is unavailable?

When the cache is not accessible in Next.js, the page will be server-side rendered and displayed using either the true or blocking fallback approach. I am curious about the approach taken by Astro.js in this situation. I am planning to develop a dynamic b ...

javascriptnext.jsserver-side-renderingastrojs

The top margin in CSS relative positioning is not being displayed

My client has a specific requirement for the webpage to be positioned in the center of the screen. To achieve this, I have enclosed the entire webpage within a div element called "mainpage". Here is the CSS code: #mainpage { position:relative; wi ...

csscss-positionpercentagescreen-resolution

What is the best way to utilize *ngFor for looping in Angular 6 in order to display three images simultaneously?

I have successfully added 3 images on a single slide. How can I implement *ngFor to dynamically load data? <carousel> <slide> <img src="../../assets/wts1.png" alt="first slide" style="display: inline-blo ...

angularhtmlcssangular-materialcarousel

The REST API request returns a response code of 0

I have been attempting to make an API call to the Insightly API using this code: var x = new XMLHttpRequest(); x.open("GET", "https://api.insight.ly/v2.2/Projects/Search?status=in%20progress&brief=false&count_total=false", true); x.setRequestHeade ...

javascriptrestapi

Nightwatch execute() function not technique following anticipate

After reviewing the documentation, I am confident that this code should work correctly. However, I am encountering an issue where something needs to run once the expect has finished, but it doesn't seem to be functioning as expected. Functioning Code ...

javascriptseleniumtestingnightwatch.js