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?

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

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e9838c-16bb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e9838c-16bb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?