Cache busting for updated scripts in theme components?

AI-generated summary

rahim123 is looking for a way to update cached JavaScript in users’ browsers when changing image URLs or links in a custom HTML script added to the Head section of a theme component. Currently, a browser refresh is required to see the updates. The user noticed the Ad plugin can force an immediate refresh after changing HTML and is wondering if a similar method can be applied to their custom plugin JavaScript.

Hi there, I was wondering what options might exist to make the cached Javascript in users’ browser sessions update when I change the image URLs and/or <href> links in this script, which is added as custom HTML in the Head section of a new theme component:

With this current widget code it requires a browser refresh for users to see the newly updated images or changed links. I assumed that this would update via some sort of AJAX method in browser caches, just like CSS changes are reflected immediately without a page reload, but that’s not the case with custom Head scripts.

I noticed that the Ad plugin for house ads somehow manages to force a refresh immediately after changing the HTML for the ad. For the House Ads plugin I found the following in house-ads.js when searching for the keyword refresh :

  @observes("refreshOnChange")
  refreshAd() {
    if (this.get("listLoading")) {
      return;
    }

    this.set("adHtml", this.chooseAdHtml());
  },

  didInsertElement() {
    this._super(...arguments);

    if (!this.get("showAd")) {
      return;
    }

    if (this.get("listLoading")) {
      return;
    }

    if (adIndex.topic_list_top === null) {
      // start at a random spot in the ad inventory
      Object.keys(adIndex).forEach((placement) => {
        const adNames = this.adsNamesForSlot(placement);
        adIndex[placement] = Math.floor(Math.random() * adNames.length);
      });
    }

    this.refreshAd();
  },

Would a similar method somehow be applicable for my custom plugin Javascript?