How to ignore url querystring from cached urls when using workbox?

Question

Is there a way to ignore query string "?screenSize=" from below registered route using workbox! If I can use regex how would i write it in below scenario? Basically, I am looking to match the cache no matter what is the screenSize querystring.

workboxSW.router.registerRoute('https://example.com/data/image?screenSize=980',
workboxSW.strategies.cacheFirst({
    cacheName: 'mycache',
    cacheExpiration: {
        maxEntries: 50
    },
    cacheableResponse: {statuses: [0, 200]}
})
);

After trying the cachedResponseWillBeUsed plugin: I do not see the plugin is applied:

Jeff Posnick · Accepted Answer · 2019-04-04 20:30:19Z

6

Update: As of Workbox v4.2.0, the new cacheKeyWillBeUsed lifecycle callback can help override the default cache key for both read and write operations: https://github.com/GoogleChrome/workbox/releases/tag/v4.2.0

Original response:

You should be able to do this by writing a cachedResponseWillBeUsed plugin that you pass in when you configure the strategy:

// See https://workboxjs.org/reference-docs/latest/module-workbox-runtime-caching.RequestWrapper.html#.cachedResponseWillBeUsed
const cachedResponseWillBeUsed = ({cache, request, cachedResponse}) => {
  // If there's already a match against the request URL, return it.
  if (cachedResponse) {
    return cachedResponse;
  }

  // Otherwise, return a match for a specific URL:
  const urlToMatch = 'https://example.com/data/generic/image.jpg';
  return caches.match(urlToMatch);
};

const imageCachingStrategy = workboxSW.strategies.cacheFirst({
  cacheName: 'mycache',
  cacheExpiration: {
      maxEntries: 50
  },
  cacheableResponse: {statuses: [0, 200]},
  plugins: [{cachedResponseWillBeUsed}]
});


workboxSW.router.registerRoute(
  new RegExp('^https://example\.com/data/'),
  imageCachingStrategy
);

edited Apr 4, 2019 at 20:30

answered Sep 18, 2017 at 16:17

Jeff Posnick

56.4k14 gold badges150 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

seUser Over a year ago

What if the url is like example.com/data/{id}/image?screenSize=980, is there possibilities to make this type of url work with above approach?

Jeff Posnick Over a year ago

I've updated the response to show using a hardcoded URL as the cache key, and to make the regular expression more generic. I don't really understand how the {id} portion of the URL comes into play when determining your cache lookup—Should it be taken into account? Should it be ignored?—so you'd have to adjust the code depending on that.

seUser Over a year ago

Yes i have another url which uses dynamic id, now is it possible to do the same as above for that type of url? Like using 'ignoreSearch: true'

seUser Over a year ago

how to verify if this plugin is being apply?

seUser Over a year ago

I included the applied plugins screenshot, but do not see cachedResponseWillBeUsed, am I looking at the right place?

|

aw04 · Accepted Answer · 2018-05-24 19:50:31Z

4

To build on the other answer, caches.match has an option ignoreSearch, so we can simply try again with the same url:

cachedResponseWillBeUsed = ({cache, request, cachedResponse}) => {
  if (cachedResponse) {
    return cachedResponse;
  }

  // this will match same url/diff query string where the original failed
  return caches.match(request.url, { ignoreSearch: true });
};

answered May 24, 2018 at 19:50

aw04

11.2k11 gold badges60 silver badges92 bronze badges

Comments

Hajopa · Accepted Answer · 2020-04-23 16:59:14Z

1

As of v5, building on aw04's answer, the code should read as follows:

const ignoreQueryStringPlugin = {
    cachedResponseWillBeUsed: async({cacheName, request, matchOptions, cachedResponse, event}) => {
        console.log(request.url);
        if (cachedResponse) {
            return cachedResponse;
        }

        // this will match same url/diff query string where the original failed
        return caches.match(request.url, {ignoreSearch: true});
    }
};

registerRoute(
    new RegExp('...'),
    new NetworkFirst({
        cacheName: 'cache',
        plugins: [
            ignoreQueryStringPlugin
        ],
    })
);

answered Apr 23, 2020 at 16:59

Hajopa

1012 silver badges3 bronze badges

Comments

Kovács Gergely · Accepted Answer · 2021-04-06 12:08:36Z

1

You can use the cacheKeyWillBeUsed simply, modifying the saved cache key to ignore the query at all, and matching for every response to the url with any query.

const ignoreQueryStringPlugin = {
 cacheKeyWillBeUsed: async ({request, mode, params, event, state}) => {
  //here you can extract the fix part of the url you want to cache without the query
  curl = new URL(request.url);
  return curl.pathname;

 }
};

and add it to the strategy

workbox.routing.registerRoute(/\/(\?.+)?/,new 
 workbox.strategies.StaleWhileRevalidate({
  matchOptions: {
   ignoreSearch: true,
  },
  plugins: [
   ignoreQueryStringPlugin
  ],
}));

answered Apr 6, 2021 at 12:08

Kovács Gergely

1031 silver badge11 bronze badges

Comments

kudlohlavec · Accepted Answer · 2019-05-15 16:21:21Z

0

ignoreURLParametersMatching parameter worked for me:

https://developers.google.com/web/tools/workbox/modules/workbox-precaching#ignore_url_parameters

answered May 15, 2019 at 16:21

kudlohlavec

5244 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to ignore url querystring from cached urls when using workbox?

5 Answers 5

8 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related