Cache busting for updated scripts in theme components?

dev
1

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?