我应该如何配置工作箱以支持第三方请求的离线缓存？

Question

我目前正在使用 workbox-build 模块，特别是 generateSW 模式，来生成我的服务工作者脚本，以将我的 Web 应用程序部署到 Netlify。我的站点是静态站点。

这是我的工人-config.js:

module.exports = {
    globDirectory: '_site/',
    globPatterns: [
        '**/*.{html,iml,css,xml,eot,svg,ttf,woff,woff2,jpg,webp,png,ico,xcf,js,json,txt}'
    ],
    swDest: 'sw.js',
    ignoreURLParametersMatching: [
        /^utm_/,
        /^fbclid$/
    ],
    offlineGoogleAnalytics: true,
    mode: 'production',
    navigateFallback: '/index.html'
};

此配置适合在线使用。但是，第三方对某些资产（即图像、Javascript 等）的请求未成功预缓存以供离线使用。 Netlify 将经过优化和缩小过程的资产部署到他们的 CloudFront CDN 中。我没有其他可行的选择，只能对 Javascript、HTML 和图像资产使用 Netlify 优化和缩小过程。不幸的是，这些 CDN 资产没有预缓存。因此，在没有网络访问权限的情况下使用我的 Web 应用程序的用户不会发现这些预缓存的 CDN 资产，也不会像其他非 CDN 资产一样加载到缓存中。

在使用 workbox-build 模块时，我需要做什么来确保第三方 CDN 资产被正确预缓存？我绝对想保持简单，我希望解决方法是对 work-config.js 文件进行简单更改。

Answer 1

由于您事先不知道 URL，因此在构建时，您唯一的选择是使用运行时缓存来匹配对 URL 的请求，并应用特定的缓存策略来生成响应。

您可以在“Smarter runtime caching of hashed assets”中阅读一些 gotchas/best 实践，但总结是您需要对运行时缓存采用某种过期策略，以便以避免在添加新 URL 时您的缓存无限期地填满。

以下是如何配置 generateSW 以添加到 runtimeCaching，使用更基本的 ExpirationPlugin 控制缓存大小的方法：

module.exports = {
  // ...other options...
  runtimeCaching: [{
    urlPattern: ({url}) => url.origin === 'https://d33wubrfki0l68.cloudfront.net',
    handler: 'CacheFirst',
    options: {
      cacheName: 'cdn-assets',
      expiration: {
        // Adjust the number of entries to keep as needed.
        maxEntries: 50,
      },
    }
  }],
  clientsClaim: true,
};

您应该注意，使用运行时缓存时，资产不会开始添加到缓存中，直到后续访问，即服务工作人员首次注册后，因为它们中的大部分已经被加载service worker 控制的时间。使用 clientsClaim: true 会导致第一次注册的 service worker 立即控制注册它的页面，这增加了一些在运行时加载的资产可能被缓存的机会，但一般来说，它只是下一个最终将填充缓存的导航。

我应该如何配置工作箱以支持第三方请求的离线缓存？

How should I configure workbox to support offline caching of third party requests?

javascript

netlify

workbox