使用 sw-precache 缓存外部资源

Question

我试图让 sw-precache 预缓存外部 CDN 资源，但生成的服务-worker.js 不包含 url 中的 CDN url =12=]数组。

这是我的 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 上的资源。由于您的特定资产的 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: 来获得播放的响应服务工作者缓存很好。

使用 sw-precache 缓存外部资源

Caching external resources with sw-precache

progressive-web-apps

sw-precache