Next-pwa: How can I avoid all API request from being cached.

[dreamer01]

I tried something from issue #46

But it didn't help.
I updated the regex to /\/api\/.*/g

runtimeCaching: [
  ...
  {
    urlPattern: /\/api\/.*/g,
    handler: "NetworkFirst",
  },
  ...

]

It would be helpful if I could exclude all network request matching regex /\/api\/.*/g
Thanks.

[LucasMallmann]

Hey @dreamer01 , have you ever tried to use the NetworkOnly handler? This way it shouldn't chache the requests.

[dreamer01]

@LucasMallmann not yet, I will try that now.
Thanks for help.

[dreamer01]

@LucasMallmann it didn't help.

runtimeCaching :

  {
    urlPattern: /\/api\/.*/g,
    handler: "NetworkOnly",
  },

Here is screen shot for my cache after recommended change, it still caches api requests.

For context, I am trying to avoid Auth0 requests from getting cached.

[dreamer01]

I beileve my others cache regex is overwriting whatever my trying to with network cache regex, does the order of cache matter in runtimeCaching array ?

[shadowwalker]

@dreamer01 Can you share your full configuration of runtimeCaching.?
Yes, the order in the array matters. The first rule that capture the request wins. So always put rules with larger scope behind the rules with smaller and specific scope.

[dreamer01]

@shadowwalker Sure, here is the link to gist with my runtimeCaching config.

=> runtimeCaching.js

// next.config.js

const withPWA = require("next-pwa");
const runtimeCaching = require("./config/runtimeCaching");

module.exports = withPWA({
  pwa: {
    dest: "public",
    runtimeCaching,
    // disable: true,
  },
})

[dreamer01]

@shadowwalker hey, any updates on the above issue.

[shadowwalker]

@dreamer01 Sorry about the delay, I updated the default runtime caching to add the api routes. Can you try out version 2.6.0 ?
https://github.com/shadowwalker/next-pwa/blob/0c6b78530fdb4d0a9a2cc43a10a15fd6f93b4fae/cache.js#L81-L106

[dreamer01]

Hey @shadowwalker
This helps, but doesn't really solve the issue at hand, the behaviour expected is to not cache the APIs.

The usecase I am pointing is especially effective in case of auth APIs.

If using the configuration provided in latest version, the issue still presists.

• If a user logs in, and request to user details is made/api/user , the user information is saved in cache.
• When online making request to /api/user data is fetched from network request thats fine.
• But when user logs out and such request for user details /api/user is made data from cache is returned, which implicates user is still logged in.

It would be great if can avoid caching of /api/user API.

Thanks for the added feature 🤗

[LucasMallmann]

@dreamer01 let me see if I understand your bug.

• The user logs out and it's still receiving the information even though it has already logged out?

I'm asking this bc I'm facing a similar issue here, where the user logs out, but still sees the page as if he was logged in. I wrote my cache configuration using only NetworkOnly strategy, so I find this to be a little weird.

[dreamer01]

@LucasMallmann , Yes but in my case its happening only when user is offline, so NetworkOnly is not entertained and reads user details from cached version, though he is logged out.
I can't clear cache on logout as not such API is available.

@shadowwalker The behavior I want to achieve is not to cache /api request at all. Zero caching for apis.

[shadowwalker]

@LucasMallmann
Issue with using cookies should be fixed with version 3.0+
Example for cookies: https://github.com/shadowwalker/next-pwa/tree/master/examples/cookie

@LucasMallmann
I don't get why NetworkOnly won't work for you. Anyway, if you want to clear cache when user log out. You can do so in your log out handler function (run this in window environment, not in service worker environment)

// This clears all the caches
caches.keys().then(cacheNames => {
  cacheNames.forEach(cacheName => {
    caches.delete(cacheName);
  });
});

// Or just clear the cache for APIs
caches.delete('apis');

[dreamer01]

@shadowwalker Thanks for the responses and update.