Cached assets not detected by workbox

Library Affected: workbox-strategies, workbox-expiration

Browser & Platform: all browsers

Issue or Feature Request Description: After warming up cache with: await articleStrategy.handle({request: new Request(article)}) strategy is defined as:

const articleStrategy = new StaleWhileRevalidate({
  cacheName: 'cache-articles',
  plugins:[
      new CacheableResponsePlugin({
          headers: {
            'X-Is-Single': 'true',
          },
      }),
      new ExpirationPlugin({
          maxAgeSeconds: 60 * 60 * 24 * 7,
          maxEntries: 20,
      }),
  ],
})

the router that handles requests with exact same strategy is unable to find the urls in cache despite the fact that Chrome DevTools show them as present. Additionally both caches.match() and cache.match() are able to find the request in cache. Workbox is not able to do so.

After navigating to the url that is expected to be cached and waiting for the response to be handled with the exact same strategy the request is now in cache and workbox sees it for further requests.

I also find it strange that this behaviour was found on our remote testing servers but not on local ones. I could suspect that headers could have something to do with it but then why would the strategy cache the exact same response correctly when navigating to the page.

[JakubSerwatka]

Found a solution. Vary header was messing with this. ignoreVary: true fixes this.

[JakubSerwatka]

Yes I’m seeing this whenever articleStrategy is run. Here’s full code of my service worker. I’ll also try to setup a live reproduction for you soon.

import {NetworkOnly, NetworkFirst, CacheFirst, StaleWhileRevalidate} from 'workbox-strategies';
import {ExpirationPlugin, CacheExpiration} from 'workbox-expiration';
import {precacheAndRoute, matchPrecache} from 'workbox-precaching';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
import {setCacheNameDetails, skipWaiting, clientsClaim} from 'workbox-core';
import * as navigationPreload from 'workbox-navigation-preload';

navigationPreload.enable();

setCacheNameDetails({
  prefix: '',
  precache: 'site-precache',
  suffix: ''
});

precacheAndRoute([
    {url: '/assets/stylesheets/mainsite-styles317.css', revision: null},
    {url: '/assets/javascript/foundation40.js', revision: null},
    {url: '/assets/javascript/not-compiled/modernizr.js?version=1.7.10', revision: null},
    {url: '/assets/images/logo-w-mobile-end.svg', revision: null},
    {url: '/assets/images/logo-w.svg', revision: null},
    {url: '/assets/images/logo-white.svg', revision: null},
    {url: '/assets/images/icons/user.svg', revision: null},
    {url: '/assets/images/ajax-loader.gif', revision: null},
    {url: '/assets/javascript/not-compiled/intersection-observer.js?version=1.7.10', revision: null},
    {url: '/assets/images/lazy-archive-white.jpg', revision: null},
    {url: '/assets/images/icons/favicon.ico', revision: null},
    {url: '/assets/javascript/not-compiled/comment-reply.min.js?version=1.0.0', revision: null},
    {url: '/assets/images/dot.svg', revision: null},
    {url: 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js?version=3.5.1', revision: null},
    {url: '/assets/index.html', revision: 1}
  ]);

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

// Cache the underlying font files with a cache-first strategy for 1 year.
registerRoute(
  ({url}) => url.origin === 'https://fonts.gstatic.com',
  new CacheFirst({
    cacheName: 'site-fonts-webfonts',
    plugins: [
      new ExpirationPlugin({
        maxAgeSeconds: 60 * 60 * 24 * 365,
        maxEntries: 30,
      }),
    ],
  })
);

registerRoute(
    ({url}) => url.pathname == '/' || url.pathname.startsWith('/tag-rzeczowy/') || url.pathname.startsWith('/kategoria/') || url.pathname.startsWith('/instytucje/') || url.pathname.startsWith('/ludzie/'),
    new NetworkFirst({
        cacheName: 'site-offline',
        plugins: [
          new ExpirationPlugin({
            maxAgeSeconds: 60 * 60 * 24 * 365,
            maxEntries: 60,
          }),
        ],
    })
);

//TEMP
registerRoute(
  ({url}) => url.pathname.startsWith('/images/'),
  new NetworkFirst()
)

registerRoute(
    ({url}) => url.pathname.startsWith('/zaloguj/') || url.pathname == '/session-starter/' || url.pathname.startsWith('/external-api/') || url.pathname.startsWith('/api/') || url.pathname.startsWith('/wp-admin') || url.pathname.startsWith('/wp-login') || url.pathname.startsWith('/konto/'),
    new NetworkOnly()
);

registerRoute(
    ({url}) => url.pathname == '/wesprzyj/' || url.pathname == '/o-nas/' || url.pathname == '/kontakt/',
    new StaleWhileRevalidate({
        cacheName: 'site-static-pages',
    })
);

self.addEventListener('install', (event) => {
    var origin = event.target.location.origin;
    const urls = [origin + '/wesprzyj/', origin + '/o-nas/', origin + '/kontakt/'];
    const cacheName = 'oko-static-pages';
    event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(urls)));
});

const articleStrategy = new StaleWhileRevalidate({
  cacheName: 'cache-articles',
  plugins:[
      new CacheableResponsePlugin({
          headers: {
            'X-Is-Single': 'true',
          },
      }),
      new ExpirationPlugin({
          maxAgeSeconds: 60 * 60 * 24 * 7,
          maxEntries: 20,
      }),
  ],
});

registerRoute(
    new RegExp('/'),
    articleStrategy
);

async function preloadArticles(articles) {          
  for (let article of articles) {
    await articleStrategy.handle({request: new Request(article)})
  }
}

self.addEventListener('message', (event) => {
    if (event.data.type == 'PRELOAD_ARTICLES') {
      event.waitUntil(preloadArticles(event.data.articles));
    }
});

setCatchHandler(({event}) => {
  // The FALLBACK_URL entries must be added to the cache ahead of time, either
  // via runtime or precaching. If they are precached, then call
  // `matchPrecache(FALLBACK_URL)` (from the `workbox-precaching` package)
  // to get the response from the correct cache.
  //
  // Use event, request, and url to figure out how to respond.
  // One approach would be to use request.destination, see
  // https://medium.com/dev-channel/service-worker-caching-strategies-based-on-request-types-57411dd7652c
  switch (event.request.destination) {
    case 'document':
      return matchPrecache('/assets/index.html');
    break;

    case 'image':
      // If using precached URLs:
      return matchPrecache('/assets/images/lazy-archive-white.jpg');
    break;

    default:
      // If we don't have a fallback, just return an error response.
      return Response.error();
  }
});

skipWaiting();
clientsClaim();