Google fonts sometimes fail to load - caching of opaque errors

[Josh Kelley]

Library Affected: workbox-strategies, workbox-recipes

Browser & Platform: Google Chrome 123.0.6312.58 for Mac

Issue Description:

I've noticed that Google fonts sometimes fail to load for my web app.

We're using a standard <link> tag to request the fonts stylesheet:

    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
      crossorigin
    />

and our own local version of the Google Fonts recipe, based off the old https://developers.google.com/web/tools/workbox/guides/common-recipes#google_fonts page:

  registerRoute(
    ({ url }) => url.origin === 'https://fonts.googleapis.com',
    new StaleWhileRevalidate({
      cacheName: 'google-fonts-stylesheets',
    })
  );

  registerRoute(
    ({ url }) => url.origin === 'https://fonts.gstatic.com',
    new CacheFirst({
      cacheName: 'google-fonts-webfonts',
      plugins: [
        new CacheableResponsePlugin({
          statuses: [0, 200],
        }),
        new ExpirationPlugin({
          maxAgeSeconds: 60 * 60 * 24 * 365,
          maxEntries: 30,
        }),
      ],
    })
  );

The cause, as best as I can tell, is that Chrome will randomly fail to load the googleapis.com link when the page is first loaded. (It seems to work fine whenever an already open page is reloaded.) I've been unable to find any details as to why. Sample console error messages:

The FetchEvent for "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" resulted in a network error response: an "opaque" response was used for a request whose type is not non-cors
The FetchEvent for "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" resulted in a network error response: an "opaque" response was used for a request whose type is not non-cors
The FetchEvent for "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" resulted in a network error response: an "opaque" response was used for a request whose type is not non-cors
GET https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap net::ERR_FAILED

When this happens, Workbox may cache an opaque response, causing the next page load or reload to not have valid fonts. (I believe that had previously happened in the sample console messages - the previous response had failed, resulting in the FetchEvent messages, then the current response failed too.)

If I modify the recipe to not cache opaque responses, I no longer have these issues:

  registerRoute(
    ({ url }) => url.origin === 'https://fonts.googleapis.com',
    new StaleWhileRevalidate({
      cacheName: 'google-fonts-stylesheets',
      plugins: [
        new CacheableResponsePlugin({
          statuses: [200],
        }),
      ],
    })
  );

  registerRoute(
    ({ url }) => url.origin === 'https://fonts.gstatic.com',
    new CacheFirst({
      cacheName: 'google-fonts-webfonts',
      plugins: [
        new CacheableResponsePlugin({
          statuses: [200],
        }),
        new ExpirationPlugin({
          maxAgeSeconds: 60 * 60 * 24 * 365,
          maxEntries: 30,
        }),
      ],
    })
  );

Based on this, I believe that the recipe's guidance to allow caching of opaque Google fonts responses is out of date.