4

我正在尝试sw-precache预缓存外部 CDN 资源，但生成的 service-worker.js 不包含precacheConfig数组中的 CDN url。

这就是我的gulpfile：

staticFileGlobs: [
    'http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css',
     'client/assets/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,ico}'
]

我的本地client/assets文件夹中的文件被添加到precacheConfig数组中，但外部字体真棒 css 不是。有没有办法做到这一点？

4

1 回答 1

10

sw-precache只能预缓存并保持最新的本地资产，例如与client/assets/**/*...您正在使用的模式匹配的资产。它不适用于通过 CDN 访问的远程资产。

你有几种方法：

  1. 使用npm（或包管理器或您的选择）下载资源的本地副本（即font-awesome），然后将该第三方资源与您的第一方资产一起部署。如果第三方代码被您传递给的模式拾取，staticFileGlobs那么它可以像其他本地代码一样被预缓存和版本控制。

  2. 使用运行时缓存来处理 CDN 上的资源。由于您的特定资产的 URL 包含4.0.3版本控制字符串，因此可以安全地假设基础内容永远不会更改，并且cacheFirst策略可能是安全的。

您可以将sw-precache配置修改为如下所示：

{
  staticFileGlobs: [
    'client/assets/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,ico}'
  ],
  runtimeCaching: [{
    urlPattern: /^https:\/\/netdna\.bootstrapcdn\.com\//,
    handler: 'cacheFirst'
  }],
  // ...any other config options...
}

该配置足够广泛，可以从该 CDN 获取任何服务，对其进行缓存，然后在后续访问中将其缓存优先一次。

请注意，您的示例http:为您的 CDN 的 URL 使用了一个协议，您需要使用该协议https:来获取与服务工作者缓存很好地配合使用的响应。

于 2016-11-14T20:28:26.080 回答