如何预缓存 css 字体规则使用的字体，该规则在其 URL 值中包含查询参数？

Question

我正在使用 Workbox(V5)，在我的 workbox-config.js 中，我预先缓存了字体 (.woff和 .woff2 格式），这是我正在使用的第 3 方 CSS 样式所需的，通过为 globPatterns 属性指定:

// workbox-config.js

module.exports = {
  globDirectory: './',
  globPatterns: [
    '**/*.{html,ico,woff,woff2}',
  ],
  globIgnores: [
    'node_modules/**/*',
    '{.,_}*/**/*',
    '**/*.{md,txt}',
    'Gemfile*',
    'package*',
  ],
  additionalManifestEntries: [
    {
      url: './manifest.webmanifest',
      revision: null, // I have also precached my manifest file like this. Is it the best practice?
    },
  ],
  swDest: './sw.js',
  sourcemap: false,
};

现在在第 3 方的 .css 文件中，我可以看到所需的字体正在使用 @font-face 规则在其 URL 值中包含一个查询参数：

@font-face {
  font-family: "bootstrap-icons";
  src: url("./fonts/bootstrap-icons.woff?4601c71fb26c9277391ec80789bfde9c") format("woff"),
       url("./fonts/bootstrap-icons.woff2?4601c71fb26c9277391ec80789bfde9c") format("woff2");
}

好吧，如果我删除已添加到 URL 的生成的哈希，当我运行我的 PWA 离线时，预缓存的字体显示得很好......但是当样式正在调用带有哈希的字体，预缓存的字体将不会显示！

我还尝试在 HTML 文件的 head 标记中预缓存字体，并为 .woff 和 [=30 执行运行timeCaching =].woff2 格式而不是通过 globPatterns 属性预缓存它们，但仍然没有运气！

<link rel="preload" as="font" href="./assets/styles/vendor/fonts/bootstrap-icons.woff" type="font/woff2" crossorigin="anonymous">
<link rel="preload" as="font" href="./assets/styles/vendor/fonts/bootstrap-icons.woff2" type="font/woff2" crossorigin="anonymous">

所以我想知道我们该如何解决这个问题？

非常感谢，阿里

Answer 1

您可以在生成 Service Worker 时使用 ignoreURLParametersMatching 配置选项来告诉 workbox-precaching 在检查缓存匹配时可以忽略某些 URL 参数。

该参数采用 RegExp 的数组，默认为 [/^utm_/, /^fbclid$/]，匹配一些常见的分析跟踪参数。

在您的特定情况下，听起来您想忽略的值都是 32 个十六进制字符，因此以下配置应该有所帮助：

// workbox-config.js

module.exports = {
  ignoreURLParametersMatching: [/^[0-9a-f]{32}$/],
  // ...other options go here...
};

如何预缓存 css 字体规则使用的字体，该规则在其 URL 值中包含查询参数？

How to precache a font that is used by css font-face rule that includes a query parameter in its URL value?

css

fonts

progressive-web-apps

workbox