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

Question

我们正在使用Workbox的StaleWhileRevalidate策略来缓存JSON API的响应。在正常情况下，此API会以200的状态码响应并传递所需的数据。但是，可能会发生用户不再有权访问该数据的情况。在这种情况下，我们的JSON API会以status响应401。不幸的是，我们的应用程序仍然“看到”了缓存的JSON响应。一旦我们遇到一个问题，Workbox中是否有任何设置或挂钩可以用来修剪缓存的条目401？还是要遵循其他建议或最佳做法？

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;

        }

      }

    ]

  })

);