maxEntries and maxAgeSeconds not working

[Viktor-as]

Hi, I need help 🙏

I am caching images and I want the cache to delete it self every day and not to cache more then for example 50 images.

This is my next.config.js:

/** @type {import('next').NextConfig} */
const { i18n } = require('./next-i18next.config');
// @ts-check
const withTranslateRoutes = require('next-translate-routes/plugin');
const runtimeCaching = require('./services/cache');

const withPWA = require('@ducanh2912/next-pwa').default({
  dest: 'public',
  register: true,
  skipWaiting: true,
  fallbacks: {
    image: '/offline/offline.png',
  },
  disable: process.env.NODE_ENV === 'development',
  workboxOptions: {
    runtimeCaching: runtimeCaching,
    cleanupOutdatedCaches: true,
  },
  cacheOnFrontEndNav: false,
  reloadOnOnline: true,
});

const nextConfig = withPWA(
  withTranslateRoutes({
    webpack: (config) => {
      config.module.rules.push({
        test: /\.svg$/,
        use: [{ loader: '@svgr/webpack', options: { icon: true } }],
      });
      return config;
    },
    pageExtensions: ['tsx', 'js'],
    i18n,
    reactStrictMode: false,
  })
);
module.exports = nextConfig;

I import my runtimeCaching rules from another file ./services/cache.js it has this code:

module.exports = [
{
    urlPattern: ({ request, url, sameOrigin }) => {
      //other images
      if (!sameOrigin) return false;
      if (url.pathname === '/_next/image') {
        // console.log('url-other-images', url.href);
        return true;
      }
      return false;
    },
    handler: 'NetworkFirst',
    options: {
      cacheName: 'other-images',
      expiration: {
        maxEntries: 20,
        maxAgeSeconds: 60, // 1 min
      },
    },
  },
]

So I am able to cache all images, but maxEntries: 20 and maxAgeSeconds: 60, does not work. In chrome dev tools I see in the cache like 100+ images, and they do not disappear after 1 min. My PWA app gets very big, very fast.

Maybe I am configuring something wrong?

[DuCanhGH]

Well if workboxOptions.* options do not work, you should open an issue in GoogleChrome/workbox rather than this one unless you are certain that this is due to next-pwa modifying the options, which doesn't seem to be the case in this one.

That said, I found this in Workbox's documentation:

Because it's slow to open IndexedDB, expiration won't occur until after the request is used. This means that an expired request may be used once, but will be expired after that. To alleviate this, the plugin will check the Date header of the cached response, if one exists and the date can be parsed, it'll expire based on this as it doesn't require an IndexedDB lookup.

Are you sure that you had requested the files again after they expired?

Just a side note, but skipWaiting is not a valid next-pwa option, although workboxOptions.skipWaiting is. You should consider adding // @ts-check to the top of your next.config.js to leverage type checking.

[Viktor-as]

Probably not the best idea to run on every fetch :D

Your advice fixed the TS error. But when should now this code run? As I am not able to trigger the image cache deletion after I moved the code into worker/index.ts

It looks that it is triggered on new build, when a new service worker is installed, but after that the code does not get triggered again 🤔
I tried refreshing the page and opening in new tab. Changed (currentTime - cachedTimestamp) / 1000 > 60 to delete img cache older then 1 min

[DuCanhGH]

@Viktor-as sorry for forgetting to reply 💀 The notification is marked as read so I thought there were no issues on your side.

That the images only get deleted on page load is expected since worker/index.ts is only run once. If that isn't the case then I don't really know either because that's just weird.

You can use a RegExp to check if the request's URL is pointing towards an image, in which case, run the cleanup code. Should work well enough while you wait for a response from Workbox (tbh, that won't come anytime soon).

[Viktor-as]

Its ok @DuCanhGH no worries.

Well I put some conole.log in your code example in worker/index.ts then I get those console logs printed only when I rebuild the website and on first load. I guess this triggers only when a new service worker is installing. But not on the following site reloads.

Yeah I could add the cache cleaning logic to fetch event listener and with RegExp narrow down to only image requests, but would this give me any advantages? For example in my homepage I have like 10 images, so the code would run 10 times.

For now I left the cleanup code in useEffect in my homepage to run only once on page load.

And yeah, I am not really hoping for workbox to fix this issue or even answer ☠️

[DuCanhGH]

@Viktor-as ah yes, my bad, worker/index.ts is only executed once on each service worker installation. Not really in the best state of mind today. I mean, I straight up went and consecutively pushed several commits to master today.

With this in mind, perhaps using useEffect makes more sense than that. I'd still say that you can just listen to "fetch" event and (use Promise.all to) delete all the expired files (concurrently) though. This ensures that the files are always cleaned up properly. I mean, this is workbox-expiration's code:
https://github.com/GoogleChrome/workbox/blob/v7/packages/workbox-expiration/src/CacheExpiration.ts#L99-L144 https://github.com/GoogleChrome/workbox/blob/v7/packages/workbox-expiration/src/ExpirationPlugin.ts#L145-L183

Not that different to be honest. They have this dontWaitFor which is kinda crazy to me though. Perhaps you can consider throwing that stuff into your code as well 💀 I mean, that's probably to shut up their linter I guess.

[Viktor-as]

I mean, I straight up went and consecutively pushed several commits to master today.

@DuCanhGH hehe, happens :D

Well I guess I leave it in useEffect for now as I moved already to other tasks. If I come back to PWA task I will try to listen on fetch events and do the cleaning.

Thanks again for the help, and good luck :)