Service Workers里的CacheStorage和Cache

CacheStorage及Cache定义在Service Workers里。该Specification暂时还是WD状态，下文里所提及的API都可能会有变动。

这两个接口大量地使用了Promise，你必须对Promise有较好的了解。

CacheStorage和Cache，是两个与缓存有关的接口，用于管理当前网页/Web App的缓存；在使用Service Worker时基本都会用到。它们跟数据库有点类似，我们可以用mongodb来打个比喻：

• CacheStorage管理着所有的Cache，是整个缓存api的入口，类似mongo
• Cache是单个缓存库，通常一个app会有一个，类似mongo里的每个db

无论在ServiceWorker域或window域下，你都可以用caches来访问全局的CacheStorage。

CacheStorage

既然CacheStorage管理着所有的Cache，那主要功能无非就是增删改查：

• .delete()，删除某个Cache
• .open()，打开某个Cache（打开后才能修改Cache），若没有则新建一个
• .keys()，得到所有Cache的名称
• .has()，判断某个Cache是否存在

需要注意的是，上面所有方法，都返回Promise。

例子

// 删除名为`my-app`的Cache
caches.delete('my-app').then(() => {console.log('Deleted.')})

// 打开名为`my-app`的Cache
caches.open('my-app').then(cache => {
  // 操控cache
})

Cache

Cache是一个类Map的数据结构对象。其键都是一个request（url），而值则是response。
一个Map总会有get（这里是match）、set（这里是put）、delete及keys方法：

• .match(requestUrl, options)，返回Promise，能得到requestUrl对应的response
• .put(requestUrl, response)，将requestUrl及其response保存在Cache里
• .delete(requestUrl)，从Cache里删除requestUrl及其response
• keys()，返回所有存在Cache的requestUrl

除了上述的基本方法外，Cache还提供.add(requestUrl)，可以自动取得requestUrl对应的response，然后put进Cache里。

例子

// 得到在Cache里某个url对应的response
cache.match('/users').then(response => {
  // 操控response
})

// 将`/user`及其response添加到缓存里
cache.add('/users').then(() => {console.log('Done.')})


****************转摘：https://www.jianshu.com/p/f8fb042c70e6