How to stop increasing cache memory on every refresh when we are using service workers

Question

I'm trying to do some POC on service workers for my site. Assets are getting cached but on every refresh, the cache storage size keeps increasing. How do I stop it.

here is my service worker code.

importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');

workbox.routing.registerRoute(
  /\.(?:png|jpg|jpeg|svg|gif)$/,
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'image-cache',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 1000,
        maxAgeSeconds: 365 * 24 * 60 * 60,
      })
    ],
  })
);

workbox.routing.registerRoute(
  /\.css$/,
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'css-cache',
  })
);

workbox.routing.registerRoute(
  new RegExp('.*\.js'),
  new workbox.strategies.StaleWhileRevalidate({
      cacheName: 'js-cache',
      plugins: [
        new workbox.expiration.Plugin({
          maxEntries: 200,
          maxAgeSeconds: 365 * 24 * 60 * 60,
          purgeOnQuotaError: true
        })
      ],
    })
);

on the first refresh, the cache size is 149KB, and the second time 263KB. It is happening on chrome and in firefox sometimes it increases and sometimes decreases from the last value.