Next-pwa: Excluding some pages based on urls or patterns.

[efleurine]

Hi thanks for this great package.

I have a quick question. Assuming I want to exclude some pages from being cached. Like let's say /dashboard and/or /dashboard/* is that possible?.

If yes, could you point me in the right direction. Thank you. I am new to pwa and offline all.

Thanks in advance.

[harshzalavadiya]

I was also wondering the same that instead of just public folder excludes is it possible to exclude some url's

because I have nginx reverse proxying nextjs application and have multiple microservices mapped in a context being cached by service worker that I don't need

[shadowwalker]

@efleurine and @harshzalavadiya , absolutely you can achieve this by specify runtimeCaching in your pwa config. You can provide runtime cache configuration completely by your own, you provide a function to modify default runtime cache. For the structure of this configuration, I recommend to take a closer look at cache.js

Example

1st Way

...
  pwa: {
    runtimeCaching: [
      {
        urlPattern: /.*/i,
        handler: 'StaleWhileRevalidate',
        options: {
          cacheName: 'others',
          expiration: {
          maxEntries: 16,
          maxAgeSeconds: 24 * 60 * 60 // 24 hours
        }
      }
    }, { ... }]
  }
...

2nd Way (not working)

  pwa: {
    runtimeCaching: (defaultCache) => {
      // do some modification on defaultCache
      return defaultCache
    }
  }

[harshzalavadiya]

@shadowwalker Thanks for quick response also I found this link showing workbox documentation for cache options

Update: Second way doesn't seems to be working throws error
child "runtimeCaching" fails because ["runtimeCaching" must be an array]

[shadowwalker]

https://github.com/shadowwalker/next-pwa/blob/7c83f896ce0161dbfe7ecd2afb6b52526137c798/index.js#L180

It should work as long as return is an array.

[sospedra]

Hey @shadowwalker it doesn't work, very weird 😕
When a function is provided somehow an array is not passed. I did some debugging and everything looks fine. And it looks like an array is getting passed to Workbox. But it triggers this error:

If a literal array is provied, instead, it works wihout hassle 🤔

@harshzalavadiya A workaround that seems to work is the following:

const defaultCache = require('next-pwa/cache')
// ...
pwa: {
  dest: 'public',
  runtimeCaching: [
    ...defaultCache,
    // your cache strategies
  ],
},

[harshzalavadiya]

@sospedra, I did the same thing back then to resolve this issue, since I didn't needed fontawesone and google fonts

[shadowwalker]

I've removed the support for the second method, as I could not figure out what's wrong.