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

Question

我使用的是Workbox(V5)，并在我的Workbox -config.js我预演了字体(。Woff和。woff2格式)，我正在使用的第三方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,
};

现在在第三方的.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文件的头标记和做运行时缓存字体的。Woff和。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参数

参数接受RegExps的数组，默认是[/^utm_/, /^fbclid$/]，它匹配一些常见的分析跟踪参数。

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

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