使用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:来获得与服务工作者缓存很好地匹配的响应.