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.

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.

• javascript
• caching
• service-worker
• progressive-web-apps

Share Improve this question Follow edited Sep 28, 2017 at 9:14 xkeshav asked Sep 28, 2017 at 7:29 xkeshavxkeshav 54.1k4747 gold badges181181 silver badges251251 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

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.

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.)

Caches are tremendously useful in a wide variety of use cases. For example, you should consider using caches when a value is expensive to pute or retrieve, and you will need its value on a certain input more than once.

A Cache is similar to ConcurrentMap, but not quite the same. The most fundamental difference is that a ConcurrentMap persists all elements that are added to it until they are explicitly removed. A Cache on the other hand is generally configured to evict entries automatically, in order to constrain its memory footprint. In some cases a LoadingCache can be useful even if it doesn't evict entries, due to its automatic cache loading.