[Bug]: Version mismatch

[Jonsonmon]

My Home Assistant Version

Core: 2025.7.2
OS: 15.2

What I am doing

Updating browser_mod version

What I expect to happen

Stop having this annoying message about reloading for new version applied

What happened instead

Always see the message of version mismatch.
Especially companion app is very annoying.
Need to clear cache manually. it's ruining the experience for all other users .. (including me actually)

I'm using Android. I don't know about iOS..

Minimal steps to reproduce

...

Include any yaml code here

Error messages from the browser console

By checking each box below I indicate that I ...

• Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
• Have made sure I am using the latest version of the plugin.
• Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.
• If this issue is to do with an Android device losing connection, sensors becoming unavailable etc., please confirm you have read, understood and tried methods described in Wiki Article Andoird Devices 'Always On'

[storm1er]

By @dcapslock here:

@storm1er @Jonsonmon please be asured all reports of issues are taken seriously. Much work has gone into providing as much feedback as possible as to the state of running Browser Mod javascript. So while Browser Mod now overtly notifies of the situation of out of date javascript file, other custom elements will be subvertly suffering the same issue within your setup.

I fully agree that you don't want regaular users having to deal with cache clearning. As to how to prevent the siuation, this will not be down to Browser Mod, but to understanding your setups and finding the solution.

I test Browser Mod on both virtual and real Andoird devices. My real device is a Samsung Galaxy A9+. Both these do not suffer the issue.

If you can descibe your setup then I can assist in working out what is going on. e.g. Do you run a reverse proxy? Do you have SSL setup? etc.

I note that Browser Mod updates the resource search string for each version to assist with 'cache busting'. I note that Home Assistant static http files are served by aiohttp and are set with a cache age of 31 days. I also note that when a file changes content the Etag is correctly updated (tested just now). So if there is any reverse proxy caching going on that is ignoring search string and Etag, then it would likely be caching Home Assistant static files as the cache age is set to 31 days.

I believe you are both running Android. I don't have intricate knowledge of how the Companion app manages caching above and beyond Webview, but it could be a common path to investigate.

I understand you are frustruted and want a solution. I am happy to keep working with you and find a solution. If you want to track via an open issue please feel free to open a new issue. Note: This issue was closed by the OP.

The setup is the most basic on my side: I use nabu casa reverse proxy.

And for local devices there's a dual dns zone so I don't go through internet for them (using fully kiosk browser)
Please note that Fully Kiosk Browser do not encounter the issue

All other devices that use the most basic setup: home assistant official app from play store, through nabu casa reverse proxy has the issue where the reload simply does not work.

Only way to make the popup disappear is given by @Jonsonmon here

[...]
Only way to clear cache in companion app(Android(/iOS?)):
Settings>Companion App>Troubleshooting>Clear frontend cache
But unfortunately i'm thinking of removing Browser mod because of this issue (I like this integration very much).
I have few devices connected that don't know what is clearing cache (parents etc) and it's ruining the experience..

---

Now let's work a little toward solutions:

1. Remove the popup, ignore version mismatch

Not a good idea, I don't think we need to eplain why

2. Remove the cache system/bypass the existing cache system

I think this is the last option to be considered if 3 fail

4. Replace or Add to the existing browser_mod.refresh service a cache buster option

let's dig deeper

What the reload button do

• It calls the service browser_mod.refresh
• Which is declared here
• Which end up there in client

What do I understand

1. window.location.href = window.location.href; is not a cache buster method, only a "go to" browser action
2. there's effectively no cache buster method in the integration, meaning - for now - the client is responsible for the cache busting system

Suggested solutions

• Maybe we can force the client to reload the whole cache with window.location.href = window.location.href + "?cachebust=" + randomString ; Not sure this would work.
• We could use https://developer.mozilla.org/en-US/docs/Web/API/Location/reload with forceGet to true, but would only work for firefox browser based platforms
• Maybe we can do a specialized call to the resources with an argument (like first solution) then reload the browser, thus forcing the client to reload a fresh version of the resources without cache busting all resources, something like

function scopedRefresh() {
  // Step 1: Force reload ONLY browser_mod JavaScript resources
  reloadBrowserModResources()
    .then(() => {
      // Step 2: Normal page reload (now with fresh resources)
      window.location.reload();
    })
    .catch(() => {
      // Fallback: URL parameter cache busting for all resources
      window.location.href = window.location.href + '?_cache_bust=' + Date.now();
    });
}

where reloadBrowserModResources would be somthing like

function reloadBrowserModResources() {
  // Find all browser_mod script tags // or use known ones directly without search
  const scripts = document.querySelectorAll('script[src*="browser_mod"]');
  
  // cache-bust
  scripts.forEach(script => {
    const url = new URL(script.src);
    url.searchParams.set('_cache_bust', Date.now()); // Add cache buster
    
    // Create new script with fresh URL
    const newScript = document.createElement('script');
    newScript.src = url.toString();
    
    // Replace old script with new one or append to body to force the load, maybe use fetch, dunno what's best option here?
    script.parentNode.replaceChild(newScript, script);
  });
}

I hope this help

[storm1er]

Workaround I'm testing right now for admins

I added &cache_bust

EDIT: does not work for me :(

[storm1er]

Just realized that my client doesn't care what's in here, still loads with the old resource url :(

[dcapslock]

The setup is the most basic on my side: I use nabu casa reverse proxy.

And for local devices there's a dual dns zone so I don't go through internet for them (using fully kiosk browser) Please note that Fully Kiosk Browser do not encounter the issue

All other devices that use the most basic setup: home assistant official app from play store, through nabu casa reverse proxy has the issue where the reload simply does not work.

Thank you.

Now let's work a little toward solutions:

1. Remove the popup, ignore version mismatch

Not a good idea, I don't think we need to eplain why

Agreed

2. Remove the cache system/bypass the existing cache system

I think this is the last option to be considered if 3 fail

3. Replace or Add to the existing browser_mod.refresh service a cache buster option

let's dig deeper

Agreed

Suggested solutions

• Maybe we can force the client to reload the whole cache with window.location.href = window.location.href + "?cachebust=" + randomString ; Not sure this would work.

Cache issue is with loading of linked resource, not the page.

• We could use https://developer.mozilla.org/en-US/docs/Web/API/Location/reload with forceGet to true, but would only work for firefox browser based platforms
• Maybe we can do a specialized call to the resources with an argument (like first solution) then reload the browser, thus forcing the client to reload a fresh version of the resources without cache busting all resources, something like

I have done further resesrch which has come up with a candidate solution which is working with my simulated testing. I will include my findings in a new comment.

[dcapslock]

Just realized that my client doesn't care what's in here, still loads with the old resource url :(

There are two URLs with Browser Mod. One for loading as a Module (e.g. /browser_mod.js?2.4.1), and one for Dashboard reource which is required for loading on CAST (e.g. /browser_mod.js?automatically-added?2.4.1). The same file is served and Browser Mod handles having two files loaded by using a Bootstrap message that makes sure only one codeset runs.

[dcapslock]

UPDATE - Can replicate Android issue.

It is unclear how the Android App gets into a state where it has an old file for a url with a new version string. However when I force replicate such a state (newer integration version with older JS file being served), I can also confirm that when corrected, Android will only load the file from cache, even with a reload.

Chrome's standard behaviour is reported to be such. See How Different Browsers Handle Cache-Control Settings Differently. You will note the comment

“In Chrome you cannot fix caching issues with a normal reload.”

With this knowledge known, I can confirm that using Javscript fetch cache property, a reload of cache can be triggered.

Workaround

So with this there is an immediate workaround available to force all registered Browsers to reload from cache using browser_mod.javascript. Use the following yaml in Actions tab in Developer tools in yaml mode. The next reload of Browser should not have mismatch version and message.

action: browser_mod.javascript
data:
  code: >
    let moduleURL = `/browser_mod.js?${window.browser_mod._data.version}`; let
    resourceURL =
    `/browser_mod.js?automatically-added&${window.browser_mod._data.version}`;
    fetch(moduleURL, { cache: "reload" }); fetch(resourceURL, { cache: "reload"
    });

Final solution

The final solution will be to place the workaround code above in browser_mod.refresh. However, the updated browser_mod.js version needs to get out there once to make it a permanent solution for the subsequent upgrade. I will prepare 2.4.3-beta.4 with this solution. Once this code is running in a Browser, then browser_mod.refresh should be all that is needed and could be run after upgrade assuming Browsers are online, but also a Reload message should only ever be seen once.

Other custom resources?

I expect that this issue will be an issue for other custom resources. You can adapt the workaround for other custom resources, using the HACS dashboard resource URL. It may be that HACS refresh option can make sure that this is done to then provide a solution for HACS as well.

e.g.

action: browser_mod.javascript
data:
  code: >
    fetch('/hacsfiles/lovelace-mushroom/mushroom.js?hacstag=444350375440', { cache: "reload" });

[dcapslock]

v2.4.3-beta.4 available that includes the solution mentioned for browser_mod.refresh

[Jonsonmon]

Clicking RELOAD still not working. Am I missing something?

[dcapslock]

The new code needs to be running for reload to work - so will on next update, but at the moment will be running old code so you need to force reload using workaround.

Can you try running the following in developer tools for the immediate workaround?

action: browser_mod.javascript
data:
  code: >
    let moduleURL = `/browser_mod.js?${window.browser_mod._data.version}`; let
    resourceURL =
    `/browser_mod.js?automatically-added&${window.browser_mod._data.version}`;
    fetch(moduleURL, { cache: "reload" }); fetch(resourceURL, { cache: "reload"
    });

[Jonsonmon]

The new code needs to be running for reload to work - so will on next update, but at the moment will be running old code so you need to force reload using workaround.

Can you try running the following in developer tools for the immediate workaround?

action: browser_mod.javascript
data:
code: >
let moduleURL = /browser_mod.js?${window.browser_mod._data.version}; let
resourceURL =
/browser_mod.js?automatically-added&${window.browser_mod._data.version};
fetch(moduleURL, { cache: "reload" }); fetch(resourceURL, { cache: "reload"
});

Not working. Had to go into graphical instead YAML and choose my browser. But nothing happends