Is that caches or cache?

Question

I was reading google slide on progressive Web apps where they mentioned cache interface has below methods

cache.add() 
cache.addAll()
cache..put()
cache.delete()
cache.keys()
cache.match()
cache.matchAll()

but in further slides in real implementation, they are using sometimes caches ( with s ) and sometimes cache

caches.open()  // whereas this method was not mentioned anywhere

caches.keys() 
caches.delete()
caches.match()

cache.put () // only here using cache 

Also, check for the same in MDN

they are writing Cache.add, Cache.addAll, and Cache.put ( with capital c)

and using caches.open , cache.match() and other methods

I want to know does cache and caches are 2 different objects ( or interface ) or What I am lacking here?

Please provide some resources or links to know more about these.

Answer 1

window.caches is a CacheStorage interface which stores all named Cache objects. For example the window.caches.open() method returns a promise that resolves to a Cache object.

// Get a named Cache object from CacheStorage
window.caches.open('cachename').then(cache => {
    // Work with resolved cache object (instance of Cache)
});

So whenever they reference caches, they mean the global CacheStorage interface, while cache is and arbitrarily named variable storing an individual Cache that was opened/resolved.

Answer 2

To be precise, caches store cache objects. Also quoting an example in the image attached (of Developer Tools in Google Chrome) from your link of progressive Web apps

To read more about caches, refer CacheStorage.

(Because "You can access CacheStorage through the global caches property" so its one and the same thing.)