如何访问客户端服务工作者中的缓存网络存储？

Question

我正在研究如何访问存储在 Service Worker 网络缓存中的数据。我的服务人员看起来像这样：

self.addEventListener('install',(e) => {
    e.waitUntil(
        caches.open(astroCacheName).then(c => {
            return Promise.resolve(c.addAll([
                    './',
                    './css/normalize.css',
                    './css/main.css',
                    './js/index.js',
                    './js/discovery.js',
                    'http://localhost:4050/planets',
                    'http://localhost:4050/stars',
                    'http://localhost:4050/galaxies'
                ]))
        }))
})
self.addEventListener('fetch',(e) => {
    e.respondWith(
        caches.match(e.request).then(r => {
            return r || fetch(e.request)
        }))
})

self.addEventListener('activate', function (e) {
    console.log('activate event')
  e.waitUntil(caches.keys().then(function (cacheNames) {
    return Promise.all(cacheNames.map(cache => {
      if (cache !== astroCacheName) {
        console.log('Service Worker: Clearing Old Cache')
        return caches.delete(cache)
      }
    }))
  }))
})

其中事件 'install' 中的三个 las ones URLS 是对我的服务器的请求，该服务器响应 JSON 我需要在客户端访问。它们正确存储在缓存中。那么，我如何才能在客户端访问这些数据呢？

Answer 1

您可以通过两种不同的方式“访问”由 window 客户端中的 Service Worker 缓存的响应。其中一个比另一个更直接，您使用的具体方法应该适合您的用例。

间接缓存访问，通过 fetch()

如果特定 window 客户端（即网页）的 control 中有服务工作者，则任何网络请求都会触发该服务工作者的 fetch 事件处理程序，并让您的服务人员有机会生成响应。您提供的服务工作者代码中的 fetch 事件处理程序使用 caches.match(e.request) 尝试首先查找缓存的响应，如果不可能则回退到网络。因此，在您的网页中，如果您调用 fetch('/planets')，您从 Service Worker 返回的响应最终将来自缓存。

如果存在缓存未命中（给定您当前服务工作者中的 fetch 事件处理程序），或者如果请求是在服务工作者控制 window 客户端之前发出的，则fetch('/planets') 请求最终将由网络完成。这样会更有弹性。

直接缓存访问，通过 caches.match()

暴露在 service worker 全局范围内的相同 Cache Storage API 在 window 全局范围内也可用。这意味着，如果您已经安装了一个 service worker，并且该 service worker 已经填充了您的缓存，您可以直接从网页的上下文中使用 caches.match('/planets') 来获取缓存的 Response 对象。

如果您希望保证您获得的响应来自缓存（而不是由于缓存未命中而来自网络的响应），则此方法可能很有用。不利的一面是，如果服务工作者已经完成安装，您只会得到回复，如果还没有完成，则没有回退。

但有时这是合适的，例如，如果您试图仅显示已缓存的数据。

如何访问客户端服务工作者中的缓存网络存储？

How to access cache web storage in service worker in the client?

javascript

client

service-worker

间接缓存访问，通过 fetch()

直接缓存访问，通过 caches.match()