Routes for some 3rd-party resources not working

[nasearle]

I have the following two routes in my service worker for Google fonts and MDL styles:

workbox.routing.registerRoute(
  new RegExp('https://fonts.(?:googleapis|gstatic).com/(.*)'),
  workbox.strategies.staleWhileRevalidate({
    cacheName: 'googleapis',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 30,
      }),
    ],
  }),
);

workbox.routing.registerRoute(
  new RegExp ('https://code.getmdl.io/(.*)'),
  workbox.strategies.staleWhileRevalidate({
    cacheName: 'furniture-store-mdl',
    plugins: [
      new workbox.expiration.Plugin({
        maxAgeSeconds: 7 * 24 * 60 * 60 // one week
      })
    ]
  })

Note that the first route is copied directly from Common Recipes, but the cacheFirst strategy is replaced with staleWhileRevalidate.

On the second page-load I can see that both routes are caching the responses, as expected:

However, on subsequent loads I see that only the fonts are found in the cache and the MDL request goes on to the network:

In the Network tab, I can see requests for Google fonts and MDL CSS are coming from the service worker and then again from workbox-core.dev.js:

When I take the app offline, neither the fonts nor the MDL CSS appear on the page. The log for the fonts is the same as before (response found in the cache), but fonts are not showing up on the page:

It looks like the MDL requests are not going through the staleWhileRevalidate route, and instead it logs:

The result is an unstyled page with no fonts while offline. I tried using networkFirst and get the same issue.

To reproduce the issue:

git clone https://github.com/google-developer-training/pwa-ecommerce-demo.git
cd pwa-ecommerce-demo/solution
git checkout v2-ecommerce-app
npm install
npm run serve

Open browser to localhost:8080

[nasearle]

@gauntface @jeffposnick

[jeffposnick]

I believe you're running into the issue resolved in https://github.com/GoogleChrome/workbox/pull/1422, which was included in the Workbox v3.1.0 release.

When I checked out your code locally and ran it with v3.1.0, things worked as expected.

(Your service worker has the v3.0.0 CDN URL hardcoded, so you were still using that, despite having updated the dependency in package.json.)

[nasearle]

Ah ok great! Thanks Jeff