How to cancel downloading media such as videos when navigating away

[PlopTheReal]

Library Affected:
workbox 5.1.4 (via next-offline 5.0.5)

Browser & Platform:
Google Chrome 90.0.4430.85

Issue:
When running without the service worker, fetch requests made by the browser are automatically canceled when the DOM element that contains a video or an image is removed from the DOM.
With the service worker running, it starts streaming the entire files even when you navigate away from the element (such as a large video).
This can end up in situations where you can download a lot of things in the background.

The following screenshot illustrate the issue:

How could we mitigate that or simply filter out media from the service worker with workbox options?

My current settings are the following (but I'm feeling a bit lost):

	workboxOpts: {
		swDest: process.env.NEXT_EXPORT
		? 'service-worker.js'
		: 'static/service-worker.js',
		exclude: [/_error.*/, /admin.*/, /signin.*/, 'react-loadable-manifest.json', 'build-manifest.json', "_buildManifest.js"],
		navigateFallbackDenylist: [/_error.*/, /admin.*/, /signin.*/],
		// As of Workbox v5 Alpha there isn't a well documented way to move workbox runtime into the directory
		// required by Next. As a work around, we inline the tree-shaken runtime into the main Service Worker file
		// at the cost of less cacheability
		inlineWorkboxRuntime: true,
		runtimeCaching: [
			{
				urlPattern: /^https?.*/,
				handler: 'NetworkFirst',
				options: {
					cacheName: 'offlineCache',
					expiration: {
						maxEntries: 300
					}
				}
			},
			{
				urlPattern: /\.(?:jpeg|webp)$/,
				handler: 'cacheFirst',
				options: {
					cacheName: 'offlineCache',
					expiration: {
						maxEntries: 300
					}
				}
			}
		]
	},