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

I'm using Workbox(V5) and in my workbox-config.js I precached the fonts (.woff and .woff2 formats) that are needed for the 3rd-party CSS styles that I'm using, by specifying this for the globPatterns property:

// 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,
};

Now in the .css file of the 3rd-party, I can see that the needed fonts are being used with the @font-face rule that includes a query parameter in its URL value:

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

Well, if I remove the generated hash that has been added to the URL, when I run my PWA offline, the precached fonts show up just fine... But when the styles are calling the fonts with the hash, the precached fonts won't show up!

I have also tried to precache the fonts in my HTML file's head tag and the do runtimeCaching for the .woff and .woff2 formats instead of precaching them by the globPatterns property, but still no luck!

<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">

So I was wondering how can we fix this problem?

Thanks a heap, Ali

Solution

You can use the ignoreURLParametersMatching configuration option when generating your service worker to tell workbox-precaching that certain URL parameters can be ignored when checking the cache for a match.

The parameter takes an array of RegExps, and the default is [/^utm_/, /^fbclid$/], which matches some common analytics tracking parameters.

In your particular case, it sounds like the values you want to ignore are all 32 hex characters, so the following configuration should help:

// workbox-config.js

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