api-cache | JavaScript对API数据的缓存组件 | REST library

I think you have a little misconception :)

Your first image shows only the names of the caches saved/cached in the Cache API. If you click "api-cache" or "workbox-precache-v2...", you'll see what's inside that cache on the right. Those are cache names, not the contents of the caches.

Your second image shows a network request that was made for the file 1327-m.jpg. That file was found from the browser's disk cache and served from there. In offline mode the network request would not show status code 200 if it wasn't successful – you would also not see the image on the page. So what is this disk cache? The browser has different sorts of caches. The network panel – shown on your second picture – does NOT show you the caches provided by the Cache API ("api-cache" etc.). Instead, the network panel shows you where the browser actually got the file. In this particular situation it got it from disk which means it read it from the hard drive. Other possible values include eg. "memory cache" and "ServiceWorker". The browser stores the files in different places and the info on the network panel shows you where it got them back to be used on the page.

Does this make it clearer for you?

(So what is memory cache? That's a faster cache, it has got its files in RAM. Disk is slower than memory and sometimes the browser decides to put the files on the disk instead of the faster memory cache. You cannot control this yourself, browser is in full control. It usually uses heuristics like the freshness and the recentness of use of the file.)

It's a little buried in the docs, but you can use a function that implements the handlerCallback interface to perform custom actions when a Route matches, like so:

Make sure you are setting your cache into cachemanager as below.