sw 预缓存 - 从不同域加载资产的运行时缓存

Question

我正在使用软件预缓存来管理我的服务工作者。假设我的站点是 abc.com 并且该站点上的服务工作者是运行并由 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'
    }
  }
}

此缓存 css 仅来自 url abc.com/style/style.css 而不是 xyz.com/style/test.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\/*.js/.

而不是 'https:\/\/xyz\.com\/*.js'

sw 预缓存 - 从不同域加载资产的运行时缓存

sw precache - runtime caching for assets loading from different domain

javascript

service-worker

progressive-web-apps

sw-precache

sw-toolbox