绕过 Service-Worker 缓存

Question

我有一个渐进式网络应用程序，它与 API 对话。对此 api 的调用由 service worker 缓存，效果很好。

但现在，我想添加一个重新加载按钮，理想情况下，它会强制服务工作者尝试绕过缓存并在成功时更新它，而且如果连接，它也不应该 return 缓存结果无法制作。

我有点不确定如何解决这个问题。我正在使用 sw-toolbox.

Answer 1

根据您的描述，您正在使用应用程序缓存。它可以从独立于 sw-tool box 的应用程序访问。

  function onReloadButtonClicked(event) {
      //Check for browser cache support
      if ('caches' in window) {
        //Update cache if network query is successful
        caches.open('your_cache_name')
          .then(function(cache) {
            cache.add('your_url');
          }).catch(function(err) {
            // Do something with the error
          });
      }
    }

Answer 2

所有请求都通过接收回调的获取回调 request object. Thus, before returning a cached response you can look for an additional header parameter (you need to include it into your request to API) to skip the logic returning cached response。

绕过 Service-Worker 缓存

Bypass Service-Worker caching

service-worker

progressive-web-apps

sw-toolbox