javascript - sw-precache-config，忽略路径不起作用？

Question

我有以下 sw-precache-config.js

module.exports = {
  staticFileGlobs: [
    'index.html',
    'manifest.json',
    'bower_components/webcomponentsjs/*',
  ],
  navigateFallback: 'index.html',
  runtimeCaching: [{
    urlPattern: /.+\/api\/.+/,
    handler: 'networkOnly',
  }],
};

我有带有 service-worker 的 SPA 应用程序(使用上述配置生成)来缓存资源。

当我在没有缓存资源的情况下打开 myapp/api/route 时(第一次访问网站)，它工作正常。

如果我打开 myapp 的主页，浏览器会缓存资源，并且后续对 myapp/api/route 的请求会导致问题(生成了 myapp 主页的布局，但没有数据)。

当我清除浏览器的缓存(Chrome - 开发者工具 - 选项卡应用程序 - 缓存存储 - 清除)时，我可以再次打开 myapp/api/route。

所以我的问题是:如何强制浏览器忽略所有“myapp/api/*”路由的 service-worker.js？

Answer 1

您只需忽略包含该模式的请求即可。

// service-worker.js   
self.onfetch = evt => {
  let path = new URL(evt.request.url).pathname;
  if(path.startsWith('/myapp/api')) {
    // these requests will be networked
    return;
  }
  // Handle other requests here
};