Question

我试图让precacheConfig预先缓存外部CDN资源，但生成的service-worker.js并不包含{{1}中的CDN网址数组。

这就是我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访问的远程资产。

您有几种方法：

使用npm（或包管理器或您选择的）下载资源的本地副本（即font-awesome），然后将第三方资源与第一方资产一起部署。如果第三方代码是通过您传递给staticFileGlobs的模式获取的，则可以将其预先缓存并版本化，就像本地其他任何内容一样。
使用运行时缓存来处理CDN上的资源。由于特定资产的网址包含4.0.3版本字符串，因此可以安全地假设基础内容永远不会更改，并且cacheFirst策略可能是安全的。
< / LI>
您可以将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的网址，您需要使用https:来获得与之相关的响应服务工作者缓存。

使用sw-precache缓存外部资源

1 个答案: