Question

我们正在使用Workbox的StaleWhileRevalidate策略来缓存JSON API的响应。在正常情况下，此API会以200的状态码进行响应并传递所需的数据。

但是，用户可能不再有权访问该数据。在这种情况下，我们的JSON API会以状态401进行响应。

不幸的是，我们的应用程序仍然“看到”了缓存的JSON响应。

一旦遇到401，Workbox中是否有任何设置或挂钩可用于修剪缓存的条目？还是要遵循其他建议或最佳做法？

Answer 1

我建议编写一个自定义插件，该插件使用cacheWillUpdate回调，并且在传入Response的状态为401时采取适当的措施。（workbox-cacheable-response在后台使用了cacheWillUpdate，但是您需要更大的灵活性，因此编写自己的逻辑很有意义。）

类似的东西：

// Or use workbox.core.cacheNames.runtime for the default cache.
const cacheName = 'my-api-cache';

const myPlugin = {
  cacheWillUpdate: async ({response}) => {
    if (response.status === 401) {
      const cache = await caches.open(cacheName);
      await cache.delete(response.url);
      return null;
    }

    // Add in any other checks here, if needed.
    return response;
  },
};

workbox.routing.registerRoute(
  /^\/api\/data.json$/,
  new workbox.strategies.StaleWhileRevalidate({
    cacheName,
    plugins: [myPlugin],
  })
);

Answer 2

所以，这是我的解决方法：

我使用workbox.cacheableResponse.Plugin来缓存401响应。然后，我添加了另一个插件，该插件检查缓存的响应是否成功。如果未收到（即收到401），则不会返回任何缓存结果：

workbox.routing.registerRoute(
  /^\/api\/data.json$/,
  new workbox.strategies.StaleWhileRevalidate({
    plugins: [
      // explicitly allow to cache `401` …
      new workbox.cacheableResponse.Plugin({ statuses: [0, 200, 401] }),
      // … but do not return a cached result
      // in this case (!cachedResponse.ok)
      {
        cachedResponseWillBeUsed: ({ cachedResponse }) => {
          return (cachedResponse && cachedResponse.ok) ? cachedResponse : null;
        }
      }
    ]
  })
);

StaleWhileRevalidate：一旦遇到不成功状态，则从缓存中删除

2 个答案: