Css/Js Cache Webview

Hi,
I hope you're doing great, my question is about how to deal with css/js cache in webview every time we made a change, the issue is that every time I made a change on the web app, and deploy it, I need to clear data on the phone to have the change applied, thing that I didn't see on the official app, once you deploy the change, the change is applied immediately on the app and no further steps are required.
How do you deal with that sort of cache?

You can disable service worker:

serviceWorkerRegistration.unregister();

I see, is that how you deal officially with cache when you push a new release?
Should I unregister the serviceWorker then register him again?
The idea was just to update the cache when new css/jss file are deployed.
Sorry if I ask a lot of questions.

Actually we don't really have a good way of dealing with it yet. If you find a solution, let us know.

Hi,
I have the same issue and would like to use the below workaround for now. Do you foresee any issues in doing so?

Before building the app
In /traccar-web/modern/src/index.js, change serviceWorkerRegistration.register(); to serviceWorkerRegistration.register('/service-worker.js?v=1', { scope: '/' });
Then increment the version before the next build.
E.G. change it to serviceWorkerRegistration.register('/service-worker.js?v=2', { scope: '/' });

Does it actually solve the problem? The problem is that all the code is cached. I think the right solution is to reload it if new version is detected.

Yes, it makes sense. Will adding below to the end of service-worker.js do what I am trying to achieve?

//To skip waiting
self.addEventListener("install", (event) => {
  self.skipWaiting();
});

// Delete cache names
caches.keys().then(function(names) {
    for (let name of names)
        caches.delete(name);
});

//Refresh browser
self.addEventListener('activate', async () => {
  const tabs = await self.clients.matchAll({type: 'window'})
  tabs.forEach((tab) => {
    tab.navigate(tab.url)
  })
})