使用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数组，但外部字体-awesome css不是。有办法做到这一点吗?

Answer 1

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:来获得一个响应，很好地发挥服务工作者缓存