_offline page flashes briefly when loading dynamic route with query parameter

[jamesopti]

trafficstars

Summary

I'm trying to debug why the _offline page I have flashes momentarily when loading a cached page without a network connection.

The start Url is / The page I'm testing is /docs/[docId]?foo=bar

Works fine: /docs/[docId] Flashes _offline: /docs/[docId]?foo=bar

Versions

• next-pwa: next-pwa@npm:5.6.0
• next: next@npm:12.2.5

[jamesopti]

UPDATE:

This seems to have solved the issue for us, caching all requests to our /docs/[docId] page in the same key. Would love any input on this approach.

{
    urlPattern: ({ url }) => {
      const isSameOrigin = self.origin === url.origin
      if (!isSameOrigin) return false
      const pathname = url.pathname
      if (pathname.startsWith('/docs/')) return true
      return false
    },
    handler: 'NetworkFirst',
    options: {
      cacheName: 'docs',
      expiration: {
        maxEntries: 32,
        maxAgeSeconds: SEVEN_DAYS,
      },
      networkTimeoutSeconds: 10,
      plugins: [{ cacheKeyWillBeUsed: async () => '/docs' }],
    },
  },