How does pwa update the cache?

if I have an api, the data returned by the api will not be affected by user actions, so it rarely changes, and I intercept the api, using caching first. If my data changes, how can I abandon the original cache and adopt the new data? How do you let sw know that the data has changed and that you need to update the cache? Is there a similar plan?

Webapp javascript pwa

Jun.29,2021

there are usually two types of pwa update caches: automatic updates and manual updates.

you can update it manually during register.

navigator.serviceWorker.register('/service-worker.js').then(reg => {
  // sometime later
  reg.update();
});

or add the version like this, not update every visit

var version = 'v1';

navigator.serviceWorker.register('/service-worker.js').then(function (reg) {
    if (localStorage.getItem('sw_version') !== version) {
        reg.update().then(function () {
            localStorage.setItem('sw_version', version)
        });
    }
});

or update automatically. In the sw.js file, update the cacheName in each manual update

//  active
var cacheName = "cachev2"
self.addEventListener('install', function (event) {
    event.waitUntil(self.skipWaiting());
});

self.addEventListener('activate', function (event) {
    event.waitUntil(
        Promise.all([
            // 
            self.clients.claim(),

            // 
            caches.keys().then(function (cacheList) {
                return Promise.all(
                    cacheList.map(function (cacheName) {
                        if (cacheName !== 'cachev1') {
                            return caches.delete(cacheName);
                        }
                    })
                );
            })
        ])
    );
});

or there is another way, that is, the API is followed by query with a parameter of version. If this parameter is changed, the path of the whole fetch match will be different.
but this will modify the logic code, which is not very good.

you can see this reference

Previous: Novice ask json array how to insert new fields and values?

Next: How to show and hide vue v-show?