Workbox: Could we really cache Google Font services?

Created on 8 Aug 2018 · 5Comments · Source: GoogleChrome/workbox

Question about caching Google API

The first usage example appearing on Workbox home page is a cache system for Google Font API:

workbox.routing.registerRoute(
  new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),
  workbox.strategies.cacheFirst({
    cacheName: 'google-fonts',
    plugins: [
      new workbox.cacheableResponse.Plugin({
        statuses: [0, 200],
      }),
    ],
  }),
);

As someone said on a Stack Overflow post, The Google APIs Terms of Services say that we cannot "keep cached copies longer than permitted by the cache header": developers.google.com/terms/#e_prohibitions_on_content.

The Google Font CSS is cached for one day, and the font files are cached for one year by the cache header of the requests.

So, I was asking myself if caching the Google Font API was expressly permitted by the content owner or not.

Source

dimitrinicolas

Most helpful comment

Quick update on this: I've updated the Google Fonts examples on the homepage (and the guides pages) because the previous code samples were actually incorrect. You wouldn't want to indefinitely cache the Google Fonts stylesheets since they're not static assets and they frequently change. I've updated the example to use a stale while revalidate strategy.

As for the webfont files themselves, I've added workbox.expiration.Plugin to ensure the files aren't cached longer than a year, which matches their cache-control header.

Here's the updated example:

// Cache the Google Fonts stylesheets with a stale while revalidate strategy.
workbox.routing.registerRoute(
  /^https:\/\/fonts\.googleapis\.com/,
  workbox.strategies.staleWhileRevalidate({
    cacheName: 'google-fonts-stylesheets',
  }),
);

// Cache the Google Fonts webfont files with a cache first strategy for 1 year.
workbox.routing.registerRoute(
  /^https:\/\/fonts\.gstatic\.com/,
  workbox.strategies.cacheFirst({
    cacheName: 'google-fonts-webfonts',
    plugins: [
      new workbox.cacheableResponse.Plugin({
        statuses: [0, 200],
      }),
      new workbox.expiration.Plugin({
        maxAgeSeconds: 60 * 60 * 24 * 365,
      }),
    ],
  }),
);

We're still waiting for an official answer on whether this new example violates the ToS.

philipwalton on 22 Aug 2018

👍3

All 5 comments

@davelab6 have we ever run into this before?

rsheeter on 10 Aug 2018

Actually someone just asked about this on https://github.com/google/fonts/issues/1637

I guess Google should not be encouraging this lol

davelab6 on 10 Aug 2018

Haha thanks you so much for the link!

Google does not allow to keep cached copies of the results of APIs, probably to prevent people from redistributing them through a different service.

I would think that it is tolerated for the case of services workers caches. It is essential for the PWAs so much promoted by Google!

Nevertheless borderline...

It would be great to get an official clarification from Google.

dimitrinicolas on 10 Aug 2018

As for the webfont files themselves, I've added workbox.expiration.Plugin to ensure the files aren't cached longer than a year, which matches their cache-control header.

Here's the updated example:

// Cache the Google Fonts stylesheets with a stale while revalidate strategy.
workbox.routing.registerRoute(
  /^https:\/\/fonts\.googleapis\.com/,
  workbox.strategies.staleWhileRevalidate({
    cacheName: 'google-fonts-stylesheets',
  }),
);

// Cache the Google Fonts webfont files with a cache first strategy for 1 year.
workbox.routing.registerRoute(
  /^https:\/\/fonts\.gstatic\.com/,
  workbox.strategies.cacheFirst({
    cacheName: 'google-fonts-webfonts',
    plugins: [
      new workbox.cacheableResponse.Plugin({
        statuses: [0, 200],
      }),
      new workbox.expiration.Plugin({
        maxAgeSeconds: 60 * 60 * 24 * 365,
      }),
    ],
  }),
);

We're still waiting for an official answer on whether this new example violates the ToS.

philipwalton on 22 Aug 2018

👍3

My understanding is that the updated examples in the guide pages are the extent of the guidance we can provide here.