urlPattern doesn't work as expected

[artm4r]

I have this rule for one of runtimeCaching rules in config. If request is without query all works, but if I add query to request string - caching isn't working
{ urlPattern: '${WPJsonUrl}/posts', handler: 'StaleWhileRevalidate', method: 'GET', options: { cacheName: 'test-categories', expiration: { maxEntries: 1, maxAgeSeconds: 10 * 24 * 60 * 60, }, cacheableResponse: { statuses: [0, 200] }, }, },
I tryed to write string like ${WPJsonUrl}/posts.*, but nothing changed.
If string in browser request will be like /posts?page=1&per_page=7&_embed=true caching will not work=(
I think problem is that regex isn't working with the urlPattern property.
In my nuxt2 project urlPattern: ${WPJsonUrl}/posts worked fine

[userquin]

@artm4r you can use callback approach instead regex (this is via custom sw not using generateSW and runtime caching plugin):

registerRoute(
    ({ url }) => url.pathname.startsWith(`${WPJsonUrl}/posts`),
    new StaleWhileRevalidate({
      cacheName: 'test-categories',
      plugins: [
        new CacheableResponsePlugin({ statuses: [0, 200] }),
        new ExpirationPlugin({ maxEntries: 1, maxAgeSeconds: 10 * 24 * 60 * 60 }),
      ],
    }),
  )

[artm4r]

@userquin So I'll need to use InjectManifest?

[userquin]

@artm4r no, wait preparing example...

[userquin]

@artm4r try this one:

      {
        urlPattern: new RegExp(`^${WPJsonUrl}/posts.*`, 'i'),
        handler: 'StaleWhileRevalidate',
        options: {
          cacheName: 'test-categories',
          expiration: {
            maxEntries: 1,
            maxAgeSeconds: 10 * 24 * 60 * 60
          },
          cacheableResponse: {
            statuses: [0, 200],
          },
        },
      },

[artm4r]

@userquin Thanks a lot! Now it works