使用sw-precache缓存外部资源

Question

我试图让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不是。有什么方法可以实现这一点吗？

Answer 1

sw-precache只能预先缓存并保持本地资产的最新，比如那些与您正在使用的client/assets/**/*...模式相匹配的资产。它不是用来处理通过CDN访问的远程资产。

你有几种方法：

1. 使用npm (或包管理器或您的选择)下载资源的本地副本(即字体-太棒了)，然后将第三方资源与您的第三方资产一起部署。如果第三方代码是由传递给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获取任何服务，缓存它，然后提供缓存--首先在以后的访问中提供一次。

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