javascript - sw 预缓存 - 从不同域加载 Assets 的运行时缓存

Question

我正在使用 sw 预缓存来管理我的服务 worker 。假设我的站点是 abc.com 并且 service worker 正在该站点上运行并由 url abc.com/service-worker.js 加载

为了优化目的，所有的 css 和 js 都从不同的 url 加载让我们说 xyz.com

当我提供时现在在运行时缓存中

{
  // See https://github.com/GoogleChrome/sw-toolbox#methods
  urlPattern: '*.css',
  handler: 'fastest',
  // See https://github.com/GoogleChrome/sw-toolbox#options
  options: {
    cache: {
      maxEntries: 20,
      name: 'css-cache'
    }
  }
}

这只缓存来自 url abc.com/style/style.css 而不是 xyz.com/style/test.css 的 css

我试过了

{
  // See https://github.com/GoogleChrome/sw-toolbox#methods
  urlPattern: 'https:\/\/xyz\.com\/*.js',
  handler: 'fastest',
  // See https://github.com/GoogleChrome/sw-toolbox#options
  options: {
    cache: {
      maxEntries: 20,
      name: 'js-cache'
    },
    // urlPattern: /\.googleapis\.com\//,
  }
}

但一切都是徒劳。如果有人遇到过相同的问题，我们将不胜感激在正确方向上提供的任何帮助。

Answer 1

我认为您的问题在于，当您实际上应该传递正则表达式时，却将字符串作为 urlPattern 传递。

因此，您应该使用 /https:\/\/xyz\.com\/* 而不是 'https:\/\/xyz\.com\/*.js' .js/.