Catch and Handle DOMExeption22: QuotaExeededError

[malikarami]

Summary

I was reported by the Sentry that some of the users of our PWA are faced with DOMExeption22: QuotaExeededError. This error is so far produced by the Samsung Internet only but it is likely to happen on any other browsers as I cache 37.1MB of data and if the user is short on Disk, This error can happen again.

I am aware that the Quota is highly related to the user's free disk space but I prefer to catch this error and handle it by purging the cache or removing some of the assets from there. According to the workbox documentation, this situation can be handled by some plugins.

I looked up the Next-PWA documentation but it seems like there is no support for adding workbox plugins and options such as purgeOnQuotaError or maxAgeSeconds. I also can't catch and ignore the error as it is produced by webpack Strategy.js and I have no access to that file. (or is there a way for catching the error that I am unaware of?)

I think a possible solution for me is to register the service worker manually and config it from the scratch, But I honestly rather not. Is there any workaround?

Versions

• next-pwa: 5.2.24
• next: 11.0.1

How To Reproduce

You can check the Simulate custom storage quota on Chromes Application/Storage and reproduce this behavior.

Screenshots

[scouttyg]

+1 to this, we ran into this on a production site as well, and similarly couldn't find an easy solution to add in purgeOnQuotaError and / or maxAgeSeconds without writing our own custom service worker.

The best example of implementing the custom service worker was https://github.com/shadowwalker/next-pwa/blob/master/examples/offline-fallback/service-worker.js which included some ExpirationPlugin examples that also implemented purgeOnQuotaError

@shadowwalker If you have any thoughts on how to more easily add in cache purging via a config option though let me know!

[GusRuss89]

After looking at this issue I went on a bit of a mission to figure out how to add the ExpirationPlugin but eventually discovered that it's already handled. You can add it to your next.config.js runtimeCaching options using options.expiration like this.

const withPWA = require('next-pwa')({
  // ...
  runtimeCaching: [
    {
      urlPattern: () => true,
      handler: 'NetworkFirst',
      options: {
        cacheName: 'everything',
        // Configuring this will add a workbox-expiration.ExpirationPlugin instance to the workbox-strategies configured in handler.
        expiration: {
          maxEntries: 50,
          maxAgeSeconds: 5 * 60, // 5 mins
          purgeOnQuotaError: true,
        },
        cacheableResponse: {
          statuses: [0, 200],
        },
      },
    },
  ],
})