Issue with multiple simultaneous Range: requests for the same URL

Library Affected: workbox-range-requests, workbox-core

Browser & Platform: Brave Version 1.25.68 Chromium: 91.0.4472.77 (Official Build) (64-bit), Google Chrome 93.0.4577.82 (Official Build) (64-bit)

Issue or Feature Request Description:

We have a bug with caching and retrieving media from a service worker

The goal is to be able to intercept a request made from the video tag and serve it from a cache.

We are having problems with this for larger files of about 100mb+

We have looked at https://github.com/GoogleChrome/workbox/issues/1663#issuecomment-448755945 and https://github.com/GoogleChrome/workbox/issues/2382

But are experiencing a bug where the media is buffering for a long time with the service worker, especially during scrubbing and wanted to combat this.

This also seems like a bug specifically only on Chrome and not in Firefox, it works as expected in firefox

Screenshots

These requests are taking forever to load when scrubbing, especially while moving back and forth

---

Workbox setup code

The code for our service worker is in service-worker.setup.js

/* eslint-disable no-restricted-globals */
const { RangeRequestsPlugin } = require('workbox-range-requests')
const { registerRoute } = require('workbox-routing')
const { clientsClaim, skipWaiting } = require('workbox-core')
const { CacheFirst } = require('workbox-strategies/CacheFirst')
const {
  CacheableResponsePlugin
} = require('workbox-cacheable-response/CacheableResponsePlugin')

const { precacheAndRoute } = require('workbox-precaching/precacheAndRoute')

skipWaiting()
clientsClaim()

registerRoute(
  // Match /api/asset/<anything except getSignedUploadURL>
  ({ url }) => url.toString().match(/\/api\/asset\/(?!getSignedUploadURL).*/),
  new CacheFirst({
    cacheName: 'modfy-assets',
    matchOptions: {
      // TODO: I don't know what this does, research it
      ignoreVary: true,
      ignoreSearch: true
    },
    plugins: [
      // Only cache responses with status code 200 that have data from the signed
      // URL fetched
      new CacheableResponsePlugin({
        statuses: [200]
      }),
      new RangeRequestsPlugin()
    ]
  })
)

// eslint-disable-next-line no-restricted-globals
precacheAndRoute(self.__WB_MANIFEST || [])

self.onmessage = (event) => {
  if (event.data === 'claimMe') {
    self.clients.claim()
  } else if (event.data === 'isMultiplayer=true') {
    self.isMultiplayer = true
  } else if (event.data === 'isMultiplayer=false') {
    self.isMultiplayer = false
  }
}

---

Repo for reproduction https://github.com/modfy/service-worker-media-bug Public link https://service-worker-testing.vercel.app

[wanderview]

I believe the problem should be fixed in chrome canary 97.0.4670.0.

[jeffposnick]

Based on the latest at https://bugs.chromium.org/p/chromium/issues/detail?id=1258212, it sounds like this will be addressed in a future release of Chrome, and there’s not anything to track here.