diff --git a/.circleci/cache-version.txt b/.circleci/cache-version.txt
index 36b5b0fd6622..e28e8ca9e43d 100644
--- a/.circleci/cache-version.txt
+++ b/.circleci/cache-version.txt
@@ -1,3 +1,3 @@
 # Bump this version to force CI to re-create the cache from scratch.
 
-04-15-24-macstadium-3
+04-22-24
diff --git a/.circleci/workflows.yml b/.circleci/workflows.yml
index a37d595f6a39..23358e95ad6b 100644
--- a/.circleci/workflows.yml
+++ b/.circleci/workflows.yml
@@ -29,9 +29,7 @@ mainBuildFilters: &mainBuildFilters
         - develop
         - /^release\/\d+\.\d+\.\d+$/
         # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
-        - 'cacie/fix/websocket-closed'
-        - 'app-mem-mng-flag'
-        - 'publish-binary'
+        - 'update-v8-snapshot-cache-on-develop'
 
 # usually we don't build Mac app - it takes a long time
 # but sometimes we want to really confirm we are doing the right thing
@@ -42,8 +40,7 @@ macWorkflowFilters: &darwin-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'cacie/fix/websocket-closed', << pipeline.git.branch >> ]
-    - equal: [ 'app-mem-mng-flag', << pipeline.git.branch >> ]
+    - equal: [ 'mschile/service_worker_uncontrolled', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -54,8 +51,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'cacie/fix/websocket-closed', << pipeline.git.branch >> ]
-    - equal: [ 'app-mem-mng-flag', << pipeline.git.branch >> ]
+    - equal: [ 'mschile/service_worker_uncontrolled', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -78,8 +74,7 @@ windowsWorkflowFilters: &windows-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'cacie/fix/websocket-closed', << pipeline.git.branch >> ]
-    - equal: [ 'app-mem-mng-flag', << pipeline.git.branch >> ]
+    - equal: [ 'mschile/service_worker_uncontrolled', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -146,7 +141,7 @@ commands:
           name: Set environment variable to determine whether or not to persist artifacts
           command: |
             echo "Setting SHOULD_PERSIST_ARTIFACTS variable"
-            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "publish-binary" && "$CIRCLE_BRANCH" != "feat/psrotocol_shadow_dom_support" && "$CIRCLE_BRANCH" != "feat/support_wds5" && "$CIRCLE_BRANCH" != "cacie/fix/websocket-closed" ]]; then
+            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "mschile/service_worker_uncontrolled" ]]; then
                 export SHOULD_PERSIST_ARTIFACTS=true
             fi' >> "$BASH_ENV"
   # You must run `setup_should_persist_artifacts` command and be using bash before running this command
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index cae1ef0d82c4..c3d3e2a049f1 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -3,9 +3,13 @@
 
 _Released 4/23/2024 (PENDING)_
 
+**Performance:**
+
+- Fixed a performance issue with activated service workers that aren't controlling clients which could lead to correlation timeouts. Fixes [#29333](https://github.com/cypress-io/cypress/issues/29333) and [#29126](https://github.com/cypress-io/cypress/issues/29126).
+
 **Bugfixes:**
 
-- Fixed a bug introduced in [`13.6.0`](https://docs.cypress.io/guides/references/changelog#13-6-0) where Cypress would occasionally exit with status code 1, even when a test run was successfully, due to an unhandled WebSocket exception (`Error: WebSocket connection closed`). Addresses [#28523](https://github.com/cypress-io/cypress/issues/28523).
+- Fixed a regression introduced in [`13.6.0`](https://docs.cypress.io/guides/references/changelog#13-6-0) where Cypress would occasionally exit with status code 1, even when a test run was successful, due to an unhandled WebSocket exception (`Error: WebSocket connection closed`). Addresses [#28523](https://github.com/cypress-io/cypress/issues/28523).
 - Fixed an issue where Cypress would hang on some commands when an invalid `timeout` option was provided. Fixes [#29323](https://github.com/cypress-io/cypress/issues/29323).
 
 **Dependency Updates:**
diff --git a/packages/driver/cypress/e2e/e2e/service-worker.cy.js b/packages/driver/cypress/e2e/e2e/service-worker.cy.js
index d4e93d663c93..122782d82fcc 100644
--- a/packages/driver/cypress/e2e/e2e/service-worker.cy.js
+++ b/packages/driver/cypress/e2e/e2e/service-worker.cy.js
@@ -666,4 +666,51 @@ describe('service workers', { defaultCommandTimeout: 1000, pageLoadTimeout: 1000
     cy.get('#output').should('have.text', 'done')
     validateFetchHandlers({ listenerCount: 1 })
   })
+
+  it('supports a service worker that is activated but not handling fetch events', () => {
+    const script = () => {
+      self.addEventListener('fetch', function (event) {
+        event.respondWith(fetch(event.request))
+      })
+    }
+
+    cy.intercept('/fixtures/service-worker.js', (req) => {
+      req.reply(`(${script})()`,
+        { 'Content-Type': 'application/javascript' })
+    })
+
+    cy.visit('fixtures/service-worker.html?skipReload')
+
+    cy.get('#output').should('have.text', 'done')
+    validateFetchHandlers({ listenerCount: 1 })
+  })
+
+  it('supports a redirected request', () => {
+    const script = () => {
+      self.addEventListener('fetch', function (event) {
+        return
+      })
+    }
+
+    cy.intercept('/fixtures/service-worker.js', (req) => {
+      req.reply(`(${script})()`,
+        { 'Content-Type': 'application/javascript' })
+    })
+
+    cy.intercept('/fixtures/1mb*', (req) => {
+      req.reply({
+        statusCode: 302,
+        headers: {
+          location: '/fixtures/redirected',
+        },
+      })
+    })
+
+    cy.intercept('/fixtures/redirected', (req) => {
+      req.reply('redirected')
+    })
+
+    cy.visit('fixtures/service-worker.html')
+    cy.get('#output').should('have.text', 'done')
+  })
 })
diff --git a/packages/driver/cypress/fixtures/service-worker.html b/packages/driver/cypress/fixtures/service-worker.html
index 6ca9ad9eebf5..182ffda29033 100644
--- a/packages/driver/cypress/fixtures/service-worker.html
+++ b/packages/driver/cypress/fixtures/service-worker.html
@@ -4,7 +4,7 @@
   <title></title>
   <script>
     const makeRequest = () => {
-      fetch(`/fixtures/1mb?j=${Math.random()}`).then((response) => {
+      fetch(`/fixtures/1mb?j=${Math.random()}#hash`).then((response) => {
         document.getElementById('output').innerText = 'done'
       }).catch(() => {})
     }
@@ -14,6 +14,7 @@
       const serviceWorker = registration.installing || registration.waiting
       if (serviceWorker) {
         let controllerChangeCalled = false
+        // called when clients.claim() is called in the service worker
         navigator.serviceWorker.addEventListener('controllerchange', (e) => {
           controllerChangeCalled = true
           makeRequest()
@@ -21,8 +22,14 @@
 
         serviceWorker.addEventListener('statechange', (e) => {
           if (e.target.state === 'activated' && !controllerChangeCalled) {
-            // service worker activated, reload page so it can intercept requests
-            location.reload()
+            // service worker activated, either skip reloading the page
+            // so we can test when an activated service worker is not intercepting requests
+            // or reload the page so it can intercept requests
+            if (location.search.includes('skipReload')) {
+              makeRequest()
+            } else {
+              location.reload()
+            }
           }
         })
       } else {
diff --git a/packages/proxy/lib/http/index.ts b/packages/proxy/lib/http/index.ts
index 4b3ddcf10713..35478d333e33 100644
--- a/packages/proxy/lib/http/index.ts
+++ b/packages/proxy/lib/http/index.ts
@@ -26,7 +26,7 @@ import type { Request, Response } from 'express'
 import type { RemoteStates } from '@packages/server/lib/remote_states'
 import type { CookieJar, SerializableAutomationCookie } from '@packages/server/lib/util/cookies'
 import type { ResourceTypeAndCredentialManager } from '@packages/server/lib/util/resourceTypeAndCredentialManager'
-import type { ProtocolManagerShape } from '@packages/types'
+import type { FoundBrowser, ProtocolManagerShape } from '@packages/types'
 import type Protocol from 'devtools-protocol'
 import type { ServiceWorkerClientEvent } from './util/service-worker-manager'
 
@@ -101,6 +101,7 @@ export type ServerCtx = Readonly<{
   socket: CyServer.Socket
   request: any
   serverBus: EventEmitter
+  getCurrentBrowser: () => FoundBrowser
 }>
 
 const READONLY_MIDDLEWARE_KEYS: (keyof HttpMiddlewareThis<{}>)[] = [
@@ -272,6 +273,7 @@ export class Http {
   middleware: HttpMiddlewareStacks
   netStubbingState: NetStubbingState
   preRequests: PreRequests = new PreRequests()
+  getCurrentBrowser: () => FoundBrowser
   request: any
   socket: CyServer.Socket
   serverBus: EventEmitter
@@ -296,6 +298,7 @@ export class Http {
     this.serverBus = opts.serverBus
     this.resourceTypeAndCredentialManager = opts.resourceTypeAndCredentialManager
     this.getCookieJar = opts.getCookieJar
+    this.getCurrentBrowser = opts.getCurrentBrowser
 
     if (typeof opts.middleware === 'undefined') {
       this.middleware = defaultMiddleware
@@ -361,6 +364,7 @@ export class Http {
         this.preRequests.removePendingRequest(pendingRequest)
       },
       protocolManager: this.protocolManager,
+      getCurrentBrowser: this.getCurrentBrowser,
     }
 
     const onError = (error: Error): Promise<void> => {
diff --git a/packages/proxy/lib/http/response-middleware.ts b/packages/proxy/lib/http/response-middleware.ts
index 1722c1d8eb56..31a8267a90bb 100644
--- a/packages/proxy/lib/http/response-middleware.ts
+++ b/packages/proxy/lib/http/response-middleware.ts
@@ -839,7 +839,8 @@ const MaybeInjectServiceWorker: ResponseMiddleware = function () {
 
   span?.setAttributes({ hasServiceWorkerHeader: hasHeader })
 
-  if (!hasHeader) {
+  // skip if we don't have the header or we're not in chromium
+  if (!hasHeader || this.getCurrentBrowser().family !== 'chromium') {
     span?.end()
 
     return this.next()
diff --git a/packages/proxy/lib/http/util/prerequests.ts b/packages/proxy/lib/http/util/prerequests.ts
index 2016dd71a7c0..a9c2d347437c 100644
--- a/packages/proxy/lib/http/util/prerequests.ts
+++ b/packages/proxy/lib/http/util/prerequests.ts
@@ -116,6 +116,7 @@ export class PreRequests {
   pendingPreRequests = new QueueMap<PendingPreRequest>()
   pendingRequests = new QueueMap<PendingRequest>()
   pendingUrlsWithoutPreRequests = new QueueMap<PendingUrlWithoutPreRequest>()
+  pendingPreRequestsToRemove: Map<string, number> = new Map()
   sweepIntervalTimer: NodeJS.Timeout
   protocolManager?: ProtocolManagerShape
 
@@ -144,21 +145,43 @@ export class PreRequests {
           debugVerbose('timed out unmatched pre-request: %o', browserPreRequest)
           metrics.unmatchedPreRequests++
 
+          this.pendingPreRequestsToRemove.delete(browserPreRequest.requestId)
+
           return false
         }
 
         return true
       })
 
+      this.pendingPreRequestsToRemove.forEach((timestamp, requestId) => {
+        if (timestamp + this.sweepInterval < now) {
+          this.pendingPreRequestsToRemove.delete(requestId)
+        }
+      })
+
       this.pendingUrlsWithoutPreRequests.removeMatching(({ timestamp }) => {
         return timestamp + this.sweepInterval >= now
       })
     }, this.sweepInterval)
   }
 
+  checkAndRemovePendingPreRequest (requestId: string) {
+    return this.pendingPreRequestsToRemove.delete(requestId)
+  }
+
   addPending (browserPreRequest: BrowserPreRequest) {
     const key = `${browserPreRequest.method}-${tryDecodeURI(browserPreRequest.url)}`
 
+    // if we have a pending request to remove, we should remove it now and return
+    // since we don't want to proceed with this pre-request anymore. In practice,
+    // this typically happens when we receive a cached response while executing
+    // the async function to add the pre-request
+    if (this.checkAndRemovePendingPreRequest(browserPreRequest.requestId)) {
+      debugVerbose('Received previous request to remove pre-request %s, skipping adding', browserPreRequest.requestId)
+
+      return
+    }
+
     metrics.browserPreRequestsReceived++
     const pendingRequest = this.pendingRequests.shift(key)
 
@@ -225,9 +248,30 @@ export class PreRequests {
   }
 
   removePendingPreRequest (requestId: string) {
+    let removed = false
+
     this.pendingPreRequests.removeMatching(({ browserPreRequest }) => {
-      return (browserPreRequest.requestId.includes('-retry-') && !browserPreRequest.requestId.startsWith(`${requestId}-`)) || (!browserPreRequest.requestId.includes('-retry-') && browserPreRequest.requestId !== requestId)
+      const matches = (browserPreRequest.requestId.includes('-retry-') && browserPreRequest.requestId.startsWith(`${requestId}-`)) ||
+        (!browserPreRequest.requestId.includes('-retry-') && browserPreRequest.requestId === requestId)
+
+      if (matches && !removed) {
+        removed = true
+      }
+
+      return !matches
     })
+
+    // if we didn't find a pre-request to remove, add it to the pending list so we can remove it later,
+    // this typically happens when we receive a cached response while executing
+    // the async function to add the pre-request
+    if (!removed) {
+      debugVerbose('No pre-request found to remove, adding to pending list: %s', requestId)
+      this.pendingPreRequestsToRemove.set(requestId, Date.now())
+    } else {
+      debugVerbose('Removed pre-request %s', requestId)
+    }
+
+    return removed
   }
 
   get (req: CypressIncomingRequest, ctxDebug, callback: GetPreRequestCb) {
@@ -322,5 +366,6 @@ export class PreRequests {
 
     this.pendingRequests = new QueueMap<PendingRequest>()
     this.pendingUrlsWithoutPreRequests = new QueueMap<PendingUrlWithoutPreRequest>()
+    this.pendingPreRequestsToRemove = new Map()
   }
 }
diff --git a/packages/proxy/lib/http/util/service-worker-injector.ts b/packages/proxy/lib/http/util/service-worker-injector.ts
index 8d17b3807dc5..69767294e03e 100644
--- a/packages/proxy/lib/http/util/service-worker-injector.ts
+++ b/packages/proxy/lib/http/util/service-worker-injector.ts
@@ -5,10 +5,15 @@ import type { ServiceWorkerClientEvent } from './service-worker-manager'
 // this should be of type ServiceWorkerGlobalScope from the webworker lib,
 // but we can't reference it directly because it causes errors in other packages
 interface ServiceWorkerGlobalScope extends WorkerGlobalScope {
+  registration: ServiceWorkerRegistration
+  clients: {
+    claim: () => Promise<void>
+    matchAll(): Promise<{ url: string }[]>
+  }
   onfetch: FetchListener | null
   addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void
   removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void
-  __cypressServiceWorkerClientEvent: (event: string) => void
+  __cypressServiceWorkerClientEvent: ((event: string) => void) | undefined
 }
 
 // this should be of type FetchEvent from the webworker lib,
@@ -18,8 +23,16 @@ interface FetchEvent extends Event {
   respondWith(r: Response | PromiseLike<Response>): void
 }
 
+// this should be of type ExtendableEvent from the webworker lib,
+// but we can't reference it directly because it causes errors in other packages
+interface ExtendableEvent extends Event {
+  waitUntil(f: Promise<any>): void
+}
+
 type FetchListener = (this: ServiceWorkerGlobalScope, ev: FetchEvent) => any
 
+type ServiceWorkerClientEventWithoutScope = Omit<ServiceWorkerClientEvent, 'scope'>
+
 declare let self: ServiceWorkerGlobalScope
 
 /**
@@ -30,20 +43,15 @@ declare let self: ServiceWorkerGlobalScope
 export const injectIntoServiceWorker = (body: Buffer) => {
   function __cypressInjectIntoServiceWorker () {
     let listenerCount = 0
-    let eventQueue: ServiceWorkerClientEvent[] = []
     const nonCaptureListenersMap = new WeakMap<EventListenerOrEventListenerObject, EventListenerOrEventListenerObject>()
     const captureListenersMap = new WeakMap<EventListenerOrEventListenerObject, EventListenerOrEventListenerObject>()
     const targetToWrappedHandleEventMap = new WeakMap<Object, EventListenerOrEventListenerObject>()
     const targetToOrigHandleEventMap = new WeakMap<Object, EventListenerOrEventListenerObject>()
 
-    const sendEvent = (event: ServiceWorkerClientEvent) => {
-      // if the binding has been created, we can call it
-      // otherwise, we need to queue the event
-      if (self.__cypressServiceWorkerClientEvent) {
-        self.__cypressServiceWorkerClientEvent(JSON.stringify(event))
-      } else {
-        eventQueue.push(event)
-      }
+    const sendEvent = (event: ServiceWorkerClientEventWithoutScope) => {
+      const payload = Object.assign({}, event, { scope: self.registration.scope })
+
+      self.__cypressServiceWorkerClientEvent!(JSON.stringify(payload))
     }
 
     const sendHasFetchEventHandlers = () => {
@@ -59,6 +67,11 @@ export const injectIntoServiceWorker = (body: Buffer) => {
       sendEvent({ type: 'fetchRequest', payload })
     }
 
+    const sendClientsClaimed = (payload: { clientUrls: string[] }) => {
+      // call the CDP binding to inform the backend that the service worker is now handling requests
+      sendEvent({ type: 'clientsClaimed', payload })
+    }
+
     // A listener is considered valid if it is a function or an object (with the handleEvent function or the function could be added later)
     const isValidListener = (listener: EventListenerOrEventListenerObject) => {
       return listener && (typeof listener === 'function' || typeof listener === 'object')
@@ -203,60 +216,76 @@ export const injectIntoServiceWorker = (body: Buffer) => {
       return oldRemoveEventListener(type, listener, options)
     }
 
-    const originalPropertyDescriptor = Object.getOwnPropertyDescriptor(
+    const originalOnFetchPropertyDescriptor = Object.getOwnPropertyDescriptor(
       self,
       'onfetch',
     )
 
-    if (!originalPropertyDescriptor) {
-      return
+    if (originalOnFetchPropertyDescriptor) {
+      // Overwrite the onfetch property so we can
+      // determine if the service worker handled the request
+      Object.defineProperty(
+        self,
+        'onfetch',
+        {
+          configurable: originalOnFetchPropertyDescriptor.configurable,
+          enumerable: originalOnFetchPropertyDescriptor.enumerable,
+          get () {
+            return originalOnFetchPropertyDescriptor.get?.call(this)
+          },
+          set (value: typeof self.onfetch) {
+            let newHandler
+
+            if (value) {
+              newHandler = wrapListener(value)
+            }
+
+            originalOnFetchPropertyDescriptor.set?.call(this, newHandler)
+
+            sendHasFetchEventHandlers()
+          },
+        },
+      )
     }
 
-    // Overwrite the onfetch property so we can
-    // determine if the service worker handled the request
-    Object.defineProperty(
-      self,
-      'onfetch',
-      {
-        configurable: originalPropertyDescriptor.configurable,
-        enumerable: originalPropertyDescriptor.enumerable,
-        get () {
-          return originalPropertyDescriptor.get?.call(this)
-        },
-        set (value: typeof self.onfetch) {
-          let newHandler
+    const oldClientsClaim = self.clients.claim
 
-          if (value) {
-            newHandler = wrapListener(value)
-          }
+    // Overwrite the clients.claim method so we can inform the backend that the service worker is now handling requests
+    self.clients.claim = async () => {
+      await oldClientsClaim.call(self.clients)
 
-          originalPropertyDescriptor.set?.call(this, newHandler)
+      const clients = await self.clients.matchAll()
+      const clientUrls = clients.map((client) => client.url)
 
-          sendHasFetchEventHandlers()
-        },
-      },
-    )
+      sendClientsClaimed({ clientUrls })
+    }
+
+    // During the install phase, we need to wait for the binding to be created
+    // before sending the hasFetchEventHandlers event and any other events
+    self.addEventListener('install', (event) => {
+      const waitForBinding = () => {
+        // if the binding has not been created yet, we need to wait for it
+        if (!self.__cypressServiceWorkerClientEvent) {
+          return new Promise<void>((resolve) => {
+            const timer = setInterval(() => {
+              if (self.__cypressServiceWorkerClientEvent) {
+                clearInterval(timer)
+                resolve()
+              }
+            }, 5)
+          })
+        }
+
+        return Promise.resolve()
+      }
 
-    // listen for the activate event so we can inform the
-    // backend whether or not the service worker has a handler
-    self.addEventListener('activate', () => {
-      sendHasFetchEventHandlers()
-
-      // if the binding has not been created yet, we need to wait for it
-      if (!self.__cypressServiceWorkerClientEvent) {
-        const timer = setInterval(() => {
-          if (self.__cypressServiceWorkerClientEvent) {
-            clearInterval(timer)
-
-            // send any events that were queued
-            eventQueue.forEach((event) => {
-              self.__cypressServiceWorkerClientEvent(JSON.stringify(event))
-            })
-
-            eventQueue = []
-          }
-        }, 5)
+      const installHandler = async () => {
+        // wait for the binding to be created before sending the hasFetchEventHandlers event
+        await waitForBinding()
+        sendHasFetchEventHandlers()
       }
+
+      (event as ExtendableEvent).waitUntil(installHandler())
     })
   }
 
diff --git a/packages/proxy/lib/http/util/service-worker-manager.ts b/packages/proxy/lib/http/util/service-worker-manager.ts
index 606aae28adff..ed528407668c 100644
--- a/packages/proxy/lib/http/util/service-worker-manager.ts
+++ b/packages/proxy/lib/http/util/service-worker-manager.ts
@@ -8,6 +8,8 @@ const debug = Debug('cypress:proxy:service-worker-manager')
 type ServiceWorkerRegistration = {
   registrationId: string
   scopeURL: string
+  hasFetchHandler: boolean
+  isHandlingRequests: boolean
   activatedServiceWorker?: ServiceWorker
 }
 
@@ -42,9 +44,10 @@ export const serviceWorkerClientEventHandlerName = '__cypressServiceWorkerClient
 export declare type ServiceWorkerEventsPayload = {
   'fetchRequest': { url: string, isControlled: boolean }
   'hasFetchHandler': { hasFetchHandler: boolean }
+  'clientsClaimed': { clientUrls: string[] }
 }
 
-type _ServiceWorkerClientEvent<T extends keyof ServiceWorkerEventsPayload> = { type: T, payload: ServiceWorkerEventsPayload[T] }
+type _ServiceWorkerClientEvent<T extends keyof ServiceWorkerEventsPayload> = { type: T, scope: string, payload: ServiceWorkerEventsPayload[T] }
 
 export type ServiceWorkerClientEvent = _ServiceWorkerClientEvent<keyof ServiceWorkerEventsPayload>
 
@@ -84,9 +87,9 @@ export const serviceWorkerClientEventHandler = (handler: ServiceWorkerEventHandl
 export class ServiceWorkerManager {
   private serviceWorkerRegistrations: Map<string, ServiceWorkerRegistration> = new Map<string, ServiceWorkerRegistration>()
   private pendingInitiators: Map<string, string> = new Map<string, string>()
+  private pendingControlledUrls: Map<string, string[]> = new Map<string, string[]>()
   private pendingPotentiallyControlledRequests: Map<string, pDefer.DeferredPromise<boolean>[]> = new Map<string, pDefer.DeferredPromise<boolean>[]>()
   private pendingServiceWorkerFetches: Map<string, boolean[]> = new Map<string, boolean[]>()
-  private hasFetchHandler = false
 
   /**
    * Goes through the list of service worker registrations and adds or removes them from the manager.
@@ -130,6 +133,7 @@ export class ServiceWorkerManager {
     }
 
     if (!initiatorAdded) {
+      debug('Service worker not activated yet, adding initiator origin to pending list: %s', scriptURL)
       this.pendingInitiators.set(scriptURL, initiatorOrigin)
     }
   }
@@ -139,20 +143,46 @@ export class ServiceWorkerManager {
    * @param event the service worker fetch event to handle
    */
   handleServiceWorkerClientEvent (event: ServiceWorkerClientEvent) {
-    debug('Handling service worker fetch event: %o', event)
+    debug('Handling service worker event: %o', event)
 
     switch (event.type) {
       case 'fetchRequest':
         this.handleServiceWorkerFetchEvent(event.payload as ServiceWorkerEventsPayload['fetchRequest'])
         break
       case 'hasFetchHandler':
-        this.hasServiceWorkerFetchHandlers(event.payload as ServiceWorkerEventsPayload['hasFetchHandler'])
+        this.handleHasServiceWorkerFetchHandlersEvent(event.payload as ServiceWorkerEventsPayload['hasFetchHandler'], event.scope)
+        break
+      case 'clientsClaimed':
+        this.handleClientsClaimedEvent(event.payload as ServiceWorkerEventsPayload['clientsClaimed'], event.scope)
         break
       default:
-        throw new Error(`Unknown event type: ${event.type}`)
+        debug('Unknown event type: %o', event)
     }
   }
 
+  /**
+   * Determines if the given stack is controlled by a service worker.
+   * @param stack the stack to check
+   * @param controlledURLs the set of controlled URLs for the service worker
+   * @param scopeURL the scope URL for the service worker registration
+   * @returns `true` if the stack is controlled by the service worker, `false` otherwise.
+   */
+  private isInitiatorStackControlledByServiceWorker (stack: Protocol.Runtime.StackTrace | undefined, controlledURLs: Set<string>, scopeURL: string) {
+    debug('Checking if initiator stack is controlled by service worker: %o', { callFrames: stack?.callFrames, controlledURLs })
+
+    return stack?.callFrames?.some((callFrame) => {
+      const callFrameUrl = callFrame.url?.split('?')[0]
+
+      return controlledURLs?.has(callFrameUrl) || callFrameUrl?.startsWith(scopeURL)
+    }) ?? false
+  }
+
+  private shouldControlDocumentRequest (registration: ServiceWorkerRegistration, browserPreRequest: BrowserPreRequest) {
+    return browserPreRequest.originalResourceType?.toLowerCase() === 'document' &&
+      browserPreRequest.documentURL === browserPreRequest.url &&
+      browserPreRequest.url.startsWith(registration.scopeURL)
+  }
+
   /**
    * Processes a browser pre-request to determine if it is controlled by a service worker.
    * If it is, the service worker's controlled URLs are updated with the given request URL.
@@ -162,6 +192,14 @@ export class ServiceWorkerManager {
    */
   async processBrowserPreRequest (browserPreRequest: BrowserPreRequest) {
     if (browserPreRequest.initiator?.type === 'preload') {
+      debug('skipping preload request: %o', browserPreRequest)
+
+      return false
+    }
+
+    if (browserPreRequest.hasRedirectResponse) {
+      debug('skipping request with redirect response: %o', browserPreRequest)
+
       return false
     }
 
@@ -173,50 +211,81 @@ export class ServiceWorkerManager {
       activatedServiceWorker = registration.activatedServiceWorker
       const paramlessDocumentURL = browserPreRequest.documentURL?.split('?')[0] || ''
 
+      // if the service worker is active and the request is for the document URL,
+      // we can assume that the service worker is controlling the document
+      // and update the registration to reflect that
+      if (!registration.isHandlingRequests && this.shouldControlDocumentRequest(registration, browserPreRequest)) {
+        registration.isHandlingRequests = true
+        debug('received request for the document of an activated service worker, updating registration to handle requests: %o', { registration, browserPreRequest })
+      }
+
       // We are determining here if a request is controlled by a service worker. A request is controlled by a service worker if
-      // we have an activated service worker, the request URL does not come from the service worker, and the request
+      // we have an activated service worker that is handling request, the request URL does not come from the service worker, and the request
       // originates from the same origin as the service worker or from a script that is also controlled by the service worker.
       if (!activatedServiceWorker ||
+        !registration.hasFetchHandler ||
+        !registration.isHandlingRequests ||
         activatedServiceWorker.scriptURL === paramlessDocumentURL ||
         !activatedServiceWorker.initiatorOrigin ||
         !paramlessDocumentURL.startsWith(activatedServiceWorker.initiatorOrigin)) {
-        debug('Service worker not activated or request URL is from the service worker, skipping: %o', { activatedServiceWorker, browserPreRequest })
+        debug('Service worker not activated/handling requests, or the request is directly from the service worker, skipping: %o', { registration, browserPreRequest })
 
         return
       }
 
       const paramlessInitiatorURL = browserPreRequest.initiator?.url?.split('?')[0]
-      const paramlessCallStackURL = browserPreRequest.initiator?.stack?.callFrames[0]?.url?.split('?')[0]
       const urlIsControlled = paramlessURL.startsWith(registration.scopeURL)
       const initiatorUrlIsControlled = paramlessInitiatorURL && activatedServiceWorker.controlledURLs?.has(paramlessInitiatorURL)
-      const topStackUrlIsControlled = paramlessCallStackURL && activatedServiceWorker.controlledURLs?.has(paramlessCallStackURL)
 
-      if (urlIsControlled || initiatorUrlIsControlled || topStackUrlIsControlled) {
+      debug('Checking if request is potentially controlled by service worker: %o', { registration, browserPreRequest })
+
+      if (urlIsControlled || initiatorUrlIsControlled || this.isInitiatorStackControlledByServiceWorker(browserPreRequest.initiator?.stack, activatedServiceWorker.controlledURLs, registration.scopeURL)) {
         requestPotentiallyControlledByServiceWorker = true
       }
     })
 
-    if (activatedServiceWorker && requestPotentiallyControlledByServiceWorker && await this.isURLControlledByServiceWorker(browserPreRequest.url)) {
-      debug('Request is controlled by service worker: %o', browserPreRequest.url)
-      activatedServiceWorker.controlledURLs.add(paramlessURL)
-
-      return true
-    }
+    let isControlled = false
 
     if (activatedServiceWorker) {
-      debug('Request is not controlled by service worker: %o', browserPreRequest.url)
+      if (requestPotentiallyControlledByServiceWorker) {
+        try {
+          isControlled = await this.isURLControlledByServiceWorker(browserPreRequest)
+        } catch (e) {
+          debug('timed out checking if pre-request is controlled by service worker: %o', { url: browserPreRequest.url, requestId: browserPreRequest.requestId })
+        }
+
+        if (isControlled) {
+          debug('Request is controlled by service worker: %o', { url: browserPreRequest.url, requestId: browserPreRequest.requestId })
+          activatedServiceWorker.controlledURLs.add(paramlessURL)
+
+          return true
+        }
+      }
+
+      debug('Request is not controlled by service worker: %o', { url: browserPreRequest.url, requestId: browserPreRequest.requestId, requestPotentiallyControlledByServiceWorker })
     }
 
     return false
   }
 
+  private getRegistrationForScope (scope: string) {
+    return Array.from(this.serviceWorkerRegistrations.values()).find((registration) => registration.scopeURL === scope)
+  }
+
   /**
    * Handles a service worker has fetch handlers event.
    * @param event the service worker has fetch handlers event to handle
+   * @param scope the scope of the service worker registration
    */
-  private hasServiceWorkerFetchHandlers (event: ServiceWorkerEventsPayload['hasFetchHandler']) {
-    debug('service worker has fetch handlers event called: %o', event)
-    this.hasFetchHandler = event.hasFetchHandler
+  private handleHasServiceWorkerFetchHandlersEvent (event: ServiceWorkerEventsPayload['hasFetchHandler'], scope: string) {
+    const registration = this.getRegistrationForScope(scope)
+
+    if (registration) {
+      registration.hasFetchHandler = event.hasFetchHandler
+      debug('service worker has fetch handlers: %o', registration)
+    } else {
+      debug('could not find service worker registration for scope: %s', scope)
+    }
   }
 
   /**
@@ -224,53 +293,80 @@ export class ServiceWorkerManager {
    * @param event the service worker fetch event to handle
    */
   private handleServiceWorkerFetchEvent (event: ServiceWorkerEventsPayload['fetchRequest']) {
-    const promises = this.pendingPotentiallyControlledRequests.get(event.url)
+    // remove the hash from the URL since the browser won't
+    // send it with the pre-request or the proxy request
+    const url = new URL(event.url)
+
+    url.hash = ''
+    const urlWithoutHash = url.href
+
+    const promises = this.pendingPotentiallyControlledRequests.get(urlWithoutHash)
 
     if (promises) {
-      debug('found pending controlled request promise: %o', event)
+      debug('found pending controlled request promise: %o', { ...event, urlWithoutHash })
 
       const currentPromiseForUrl = promises.shift()
 
       if (promises.length === 0) {
-        this.pendingPotentiallyControlledRequests.delete(event.url)
+        this.pendingPotentiallyControlledRequests.delete(urlWithoutHash)
       }
 
       currentPromiseForUrl?.resolve(event.isControlled)
     } else {
-      const fetches = this.pendingServiceWorkerFetches.get(event.url)
+      const fetches = this.pendingServiceWorkerFetches.get(urlWithoutHash)
 
-      debug('no pending controlled request promise found, adding a pending service worker fetch: %o', event)
+      debug('no pending controlled request promise found, adding a pending service worker fetch: %o', { ...event, urlWithoutHash })
 
       if (fetches) {
         fetches.push(event.isControlled)
       } else {
-        this.pendingServiceWorkerFetches.set(event.url, [event.isControlled])
+        this.pendingServiceWorkerFetches.set(urlWithoutHash, [event.isControlled])
       }
     }
   }
 
+  /**
+   * Handles a clients claimed event.
+   * @param event the clients claimed event to handle
+   * @param scope the scope of the service worker registration
+   */
+  private handleClientsClaimedEvent (event: ServiceWorkerEventsPayload['clientsClaimed'], scope: string) {
+    const registration = this.getRegistrationForScope(scope)
+
+    if (registration) {
+      registration.isHandlingRequests = true
+
+      if (registration.activatedServiceWorker) {
+        event.clientUrls.forEach((url) => registration.activatedServiceWorker?.controlledURLs.add(url))
+      } else {
+        this.pendingControlledUrls.set(registration.scopeURL, event.clientUrls)
+      }
+
+      debug('clients claimed on service worker registration: %o', registration)
+    } else {
+      debug('could not find service worker registration for scope: %s', scope)
+    }
+  }
+
   /**
    * Determines if the given URL is controlled by a service worker.
    * @param url the URL to check
    * @returns a promise that resolves to `true` if the URL is controlled by a service worker, `false` otherwise.
    */
-  private isURLControlledByServiceWorker (url: string) {
-    if (!this.hasFetchHandler) {
-      return false
-    }
-
+  private isURLControlledByServiceWorker (browserPreRequest: BrowserPreRequest) {
+    const url = browserPreRequest.url
     const fetches = this.pendingServiceWorkerFetches.get(url)
 
     if (fetches) {
       const isControlled = fetches.shift()
 
-      debug('found pending service worker fetch: %o', { url, isControlled })
+      debug('found pending service worker fetch: %o', { url, isControlled, requestId: browserPreRequest.requestId })
 
       if (fetches.length === 0) {
         this.pendingServiceWorkerFetches.delete(url)
       }
 
-      return Promise.resolve(isControlled)
+      return Promise.resolve(!!isControlled)
     }
 
     let promises = this.pendingPotentiallyControlledRequests.get(url)
@@ -283,9 +379,16 @@ export class ServiceWorkerManager {
     const deferred = pDefer<boolean>()
 
     promises.push(deferred)
-    debug('adding pending controlled request promise: %s', url)
+    debug('adding pending controlled request promise: %o', { url, requestId: browserPreRequest.requestId })
+
+    let timer
+    // race the deferred promise with a timeout to prevent the pre-request from hanging indefinitely
+    const racingPromises = Promise.race([
+      deferred.promise,
+      new Promise<boolean>((_resolve, reject) => timer = setTimeout(reject, 250)),
+    ]).finally(() => clearTimeout(timer))
 
-    return deferred.promise
+    return racingPromises
   }
 
   /**
@@ -295,7 +398,9 @@ export class ServiceWorkerManager {
     debug('Registering service worker with registration ID %s and scope URL %s', registrationId, scopeURL)
 
     // Only register service workers if they haven't already been registered
-    if (this.serviceWorkerRegistrations.get(registrationId)?.scopeURL === scopeURL) {
+    const registration = this.serviceWorkerRegistrations.get(registrationId)
+
+    if (registration && registration.scopeURL === scopeURL) {
       debug('Service worker with registration ID %s and scope URL %s already registered', registrationId, scopeURL)
 
       return
@@ -304,6 +409,8 @@ export class ServiceWorkerManager {
     this.serviceWorkerRegistrations.set(registrationId, {
       registrationId,
       scopeURL,
+      isHandlingRequests: false,
+      hasFetchHandler: false,
     })
   }
 
@@ -324,15 +431,17 @@ export class ServiceWorkerManager {
 
     if (registration) {
       const initiatorOrigin = this.pendingInitiators.get(scriptURL)
+      const controlledUrls = this.pendingControlledUrls.get(registration.scopeURL)
 
       registration.activatedServiceWorker = {
         registrationId,
         scriptURL,
-        controlledURLs: registration.activatedServiceWorker?.controlledURLs || new Set<string>(),
+        controlledURLs: registration.activatedServiceWorker?.controlledURLs || new Set(controlledUrls) || new Set<string>(),
         initiatorOrigin: initiatorOrigin || registration.activatedServiceWorker?.initiatorOrigin,
       }
 
       this.pendingInitiators.delete(scriptURL)
+      this.pendingControlledUrls.delete(registration.scopeURL)
     } else {
       debug('Could not find service worker registration for registration ID %s', registrationId)
     }
diff --git a/packages/proxy/lib/types.ts b/packages/proxy/lib/types.ts
index 3fb51cc692a2..d58d2eadfb72 100644
--- a/packages/proxy/lib/types.ts
+++ b/packages/proxy/lib/types.ts
@@ -66,6 +66,7 @@ export type BrowserPreRequest = {
   errorHandled?: boolean
   initiator?: Protocol.Network.Initiator
   documentURL: string
+  hasRedirectResponse?: boolean
   cdpRequestWillBeSentTimestamp: number
   cdpRequestWillBeSentReceivedTimestamp: number
 }
diff --git a/packages/proxy/test/unit/http/index.spec.ts b/packages/proxy/test/unit/http/index.spec.ts
index 7af1adf38f64..9a9df0338f72 100644
--- a/packages/proxy/test/unit/http/index.spec.ts
+++ b/packages/proxy/test/unit/http/index.spec.ts
@@ -457,6 +457,7 @@ describe('http', function () {
           url: 'foo',
           isControlled: true,
         },
+        scope: 'foo',
       }
 
       http.handleServiceWorkerClientEvent(event)
diff --git a/packages/proxy/test/unit/http/response-middleware.spec.ts b/packages/proxy/test/unit/http/response-middleware.spec.ts
index cb98c06db7f8..a8279fa4d7e7 100644
--- a/packages/proxy/test/unit/http/response-middleware.spec.ts
+++ b/packages/proxy/test/unit/http/response-middleware.spec.ts
@@ -2308,7 +2308,7 @@ describe('http/response-middleware', function () {
       injectIntoServiceWorkerStub.restore()
     })
 
-    it('does not rewrite service worker if the request does not have the service worker header', function () {
+    it('does not rewrite the service worker if the request does not have the service worker header', function () {
       prepareContext({
         req: {
           proxiedUrl: 'http://www.foobar.com:3501/not-service-worker.js',
@@ -2321,7 +2321,28 @@ describe('http/response-middleware', function () {
       })
     })
 
-    it('rewrites the service worker', async function () {
+    it('does not rewrite the service worker if the browser is non-chromium', function () {
+      prepareContext({
+        req: {
+          proxiedUrl: 'http://www.foobar.com:3501/service-worker.js',
+          headers: {
+            'service-worker': 'script',
+          },
+        },
+        getCurrentBrowser: () => {
+          return {
+            family: 'firefox',
+          }
+        },
+      })
+
+      return testMiddleware([MaybeInjectServiceWorker], ctx)
+      .then(() => {
+        expect(injectIntoServiceWorkerStub).not.to.be.called
+      })
+    })
+
+    it('rewrites the service worker in chromium based browsers', async function () {
       prepareContext({
         req: {
           proxiedUrl: 'http://www.foobar.com:3501/service-worker.js',
@@ -2368,6 +2389,11 @@ describe('http/response-middleware', function () {
         onError (error) {
           throw error
         },
+        getCurrentBrowser: () => {
+          return {
+            family: 'chromium',
+          }
+        },
         ..._.omit(props, 'incomingRes', 'res', 'req'),
       }
     }
diff --git a/packages/proxy/test/unit/http/util/prerequests.spec.ts b/packages/proxy/test/unit/http/util/prerequests.spec.ts
index 892feb32695f..aeafb6d593d9 100644
--- a/packages/proxy/test/unit/http/util/prerequests.spec.ts
+++ b/packages/proxy/test/unit/http/util/prerequests.spec.ts
@@ -9,10 +9,11 @@ describe('http/util/prerequests', () => {
   let preRequests: PreRequests
   let protocolManager: ProtocolManagerShape
 
-  function expectPendingCounts (pendingRequests: number, pendingPreRequests: number, pendingWithoutPreRequests = 0) {
+  function expectPendingCounts (pendingRequests: number, pendingPreRequests: number, pendingWithoutPreRequests = 0, pendingPreRequestsToRemove = 0) {
     expect(preRequests.pendingRequests.length).to.eq(pendingRequests, 'wrong number of pending requests')
     expect(preRequests.pendingPreRequests.length).to.eq(pendingPreRequests, 'wrong number of pending prerequests')
     expect(preRequests.pendingUrlsWithoutPreRequests.length).to.eq(pendingWithoutPreRequests, 'wrong number of pending without prerequests')
+    expect(preRequests.pendingPreRequestsToRemove.size).to.eq(pendingPreRequestsToRemove, 'wrong number of pending prerequests to remove')
   }
 
   beforeEach(() => {
@@ -188,6 +189,9 @@ describe('http/util/prerequests', () => {
     preRequests = new PreRequests(10, 200)
     preRequests.addPending({ requestId: '1234', url: 'foo', method: 'GET', cdpRequestWillBeSentReceivedTimestamp: performance.now() + performance.timeOrigin } as BrowserPreRequest)
     preRequests.addPendingUrlWithoutPreRequest('bar')
+    preRequests.removePendingPreRequest('12345')
+
+    expectPendingCounts(0, 1, 1, 1)
 
     // preRequests garbage collects pre-requests that never matched up with an incoming request after around
     // 2 * requestTimeout. We verify that it's gone (and therefore not leaking memory) by sending in a request
@@ -231,6 +235,20 @@ describe('http/util/prerequests', () => {
     expectPendingCounts(0, 2)
   })
 
+  it('adds to pending pre-requests to remove if the pre-request is not found', () => {
+    expectPendingCounts(0, 0)
+
+    // remove a pre-request that doesn't exist yet
+    preRequests.removePendingPreRequest('1235')
+
+    expectPendingCounts(0, 0, 0, 1)
+
+    // add a pre-request that matches the pending removal
+    preRequests.addPending({ requestId: '1235', url: 'foo', method: 'GET' } as BrowserPreRequest)
+
+    expectPendingCounts(0, 0)
+  })
+
   it('removes a pending request', () => {
     const cb = sinon.stub()
 
diff --git a/packages/proxy/test/unit/http/util/service-worker-manager.spec.ts b/packages/proxy/test/unit/http/util/service-worker-manager.spec.ts
index 9103141020f5..5017af68ffe4 100644
--- a/packages/proxy/test/unit/http/util/service-worker-manager.spec.ts
+++ b/packages/proxy/test/unit/http/util/service-worker-manager.spec.ts
@@ -3,8 +3,8 @@ import sinon from 'sinon'
 import { ServiceWorkerManager, serviceWorkerClientEventHandler } from '../../../../lib/http/util/service-worker-manager'
 
 const createBrowserPreRequest = (
-  { url, initiatorUrl, callFrameUrl, documentUrl, isPreload }:
-  { url: string, initiatorUrl?: string, documentUrl?: string, callFrameUrl?: string, isPreload?: boolean },
+  { url, initiatorUrl, callFrameUrl, documentUrl, isPreload, originalResourceType, hasRedirectResponse }:
+  { url: string, initiatorUrl?: string, documentUrl?: string, callFrameUrl?: string, isPreload?: boolean, originalResourceType?: string, hasRedirectResponse?: boolean },
 ) => {
   return {
     requestId: 'id-1',
@@ -12,7 +12,8 @@ const createBrowserPreRequest = (
     url,
     headers: {},
     resourceType: 'fetch' as const,
-    originalResourceType: undefined,
+    originalResourceType: originalResourceType || 'Fetch' as const,
+    hasRedirectResponse: hasRedirectResponse || false,
     ...(isPreload
       ? {
         initiator: {
@@ -52,440 +53,715 @@ const createBrowserPreRequest = (
 
 describe('lib/http/util/service-worker-manager', () => {
   describe('ServiceWorkerManager', () => {
-    context('processBrowserPreRequest', () => {
-      let manager: ServiceWorkerManager
-
-      beforeEach(() => {
-        manager = new ServiceWorkerManager()
+    let manager: ServiceWorkerManager
 
-        manager.updateServiceWorkerRegistrations({
-          registrations: [{
-            registrationId: '1',
-            scopeURL: 'http://localhost:8080',
-            isDeleted: false,
-          }],
-        })
+    beforeEach(() => {
+      manager = new ServiceWorkerManager()
 
-        manager.updateServiceWorkerVersions({
-          versions: [{
-            versionId: '1',
-            runningStatus: 'running',
-            registrationId: '1',
-            scriptURL: 'http://localhost:8080/sw.js',
-            status: 'activated',
-          }],
-        })
+      manager.updateServiceWorkerRegistrations({
+        registrations: [{
+          registrationId: '1',
+          scopeURL: 'http://localhost:8080',
+          isDeleted: false,
+        }],
+      })
 
-        manager.addInitiatorToServiceWorker({
+      manager.updateServiceWorkerVersions({
+        versions: [{
+          versionId: '1',
+          runningStatus: 'running',
+          registrationId: '1',
           scriptURL: 'http://localhost:8080/sw.js',
-          initiatorOrigin: 'http://localhost:8080/',
-        })
+          status: 'activated',
+        }],
+      })
 
-        manager.handleServiceWorkerClientEvent({
-          type: 'hasFetchHandler',
-          payload: {
-            hasFetchHandler: true,
-          },
-        })
+      manager.addInitiatorToServiceWorker({
+        scriptURL: 'http://localhost:8080/sw.js',
+        initiatorOrigin: 'http://localhost:8080/',
       })
 
-      it('will detect when requests are controlled by a service worker', async () => {
-        // A script request emanated from the service worker's initiator is controlled
-        let result = manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://localhost:8080/foo.js',
-        }))
+      manager.handleServiceWorkerClientEvent({
+        type: 'hasFetchHandler',
+        payload: {
+          hasFetchHandler: true,
+        },
+        scope: 'http://localhost:8080',
+      })
+    })
 
-        manager.handleServiceWorkerClientEvent({
-          type: 'fetchRequest',
-          payload: {
-            url: 'http://localhost:8080/foo.js',
-            isControlled: true,
-          },
+    context('processBrowserPreRequest', () => {
+      context('with clients claimed', () => {
+        beforeEach(() => {
+          manager.handleServiceWorkerClientEvent({
+            type: 'clientsClaimed',
+            payload: {
+              clientUrls: ['http://localhost:8080/index.html'],
+            },
+            scope: 'http://localhost:8080',
+          })
         })
 
-        expect(await result).to.be.true
+        it('will detect when requests are controlled by a service worker', async () => {
+          // A script request emanated from the service worker's initiator is controlled
+          let result = manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://localhost:8080/foo.js',
+          }))
 
-        // A script request emanated from the previous script request is controlled
-        result = manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://example.com/bar.css',
-          callFrameUrl: 'http://localhost:8080/foo.js',
-        }))
+          manager.handleServiceWorkerClientEvent({
+            type: 'fetchRequest',
+            payload: {
+              url: 'http://localhost:8080/foo.js',
+              isControlled: true,
+            },
+            scope: 'http://localhost:8080',
+          })
 
-        manager.handleServiceWorkerClientEvent({
-          type: 'fetchRequest',
-          payload: {
+          expect(await result).to.be.true
+
+          // A script request emanated from the previous script request is controlled
+          result = manager.processBrowserPreRequest(createBrowserPreRequest({
             url: 'http://example.com/bar.css',
-            isControlled: true,
-          },
+            callFrameUrl: 'http://localhost:8080/foo.js',
+          }))
+
+          manager.handleServiceWorkerClientEvent({
+            type: 'fetchRequest',
+            payload: {
+              url: 'http://example.com/bar.css',
+              isControlled: true,
+            },
+            scope: 'http://localhost:8080',
+          })
+
+          expect(await result).to.be.true
+
+          // A script request emanated from the previous css is controlled
+          result = manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://example.com/baz.woff2',
+            initiatorUrl: 'http://example.com/bar.css',
+          }))
+
+          manager.handleServiceWorkerClientEvent({
+            type: 'fetchRequest',
+            payload: {
+              url: 'http://example.com/baz.woff2',
+              isControlled: true,
+            },
+            scope: 'http://localhost:8080',
+          })
+
+          expect(await result).to.be.true
+
+          // A script request emanated from a different script request is not controlled
+          expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://example.com/quux.js',
+            callFrameUrl: 'http://example.com/bar.js',
+          }))).to.be.false
+
+          // A script request emanated from a different css request is not controlled
+          expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://example.com/quux.css',
+            initiatorUrl: 'http://example.com/baz.css',
+          }))).to.be.false
+
+          // A script request emanated from a different document is not controlled
+          expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://example.com/quux.css',
+            initiatorUrl: 'http://example.com/baz.css',
+          }))).to.be.false
+
+          // A preload request is not controlled
+          expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://example.com/quux.css',
+            isPreload: true,
+          }))).to.be.false
+
+          // A request that is not handled by the service worker 'fetch' handler is not controlled (browser pre-request first)
+          result = manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://localhost:8080/foo.js',
+          }))
+
+          manager.handleServiceWorkerClientEvent({
+            type: 'fetchRequest',
+            payload: {
+              url: 'http://localhost:8080/foo.js',
+              isControlled: false,
+            },
+            scope: 'http://localhost:8080',
+          })
+
+          expect(await result).to.be.false
+
+          // A request that is not handled by the service worker 'fetch' handler is not controlled (fetch event first)
+          manager.handleServiceWorkerClientEvent({
+            type: 'fetchRequest',
+            payload: {
+              url: 'http://localhost:8080/foo.js',
+              isControlled: false,
+            },
+            scope: 'http://localhost:8080',
+          })
+
+          expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://localhost:8080/foo.js',
+          }))).to.be.false
         })
 
-        expect(await result).to.be.true
+        it('will not detect requests when not controlled by an active service worker', async () => {
+          // remove the current service worker
+          manager.updateServiceWorkerRegistrations({
+            registrations: [{
+              registrationId: '1',
+              scopeURL: 'http://localhost:8080',
+              isDeleted: true,
+            }],
+          })
+
+          // add a new service worker that is not activated
+          manager.updateServiceWorkerRegistrations({
+            registrations: [{
+              registrationId: '2',
+              scopeURL: 'http://localhost:8080',
+              isDeleted: false,
+            }],
+          })
+
+          // update the service worker to be in a non-activated state
+          manager.updateServiceWorkerVersions({
+            versions: [{
+              versionId: '1',
+              runningStatus: 'running',
+              registrationId: '2',
+              scriptURL: 'http://localhost:8080/sw.js',
+              status: 'activating',
+            }],
+          })
 
-        // A script request emanated from the previous css is controlled
-        result = manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://example.com/baz.woff2',
-          initiatorUrl: 'http://example.com/bar.css',
-        }))
+          manager.addInitiatorToServiceWorker({
+            scriptURL: 'http://localhost:8080/sw.js',
+            initiatorOrigin: 'http://localhost:8080/',
+          })
 
-        manager.handleServiceWorkerClientEvent({
-          type: 'fetchRequest',
-          payload: {
+          // A script request emanated from the service worker's initiator is not controlled
+          expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://localhost:8080/foo.js',
+          }))).to.be.false
+
+          // A script request emanated from the previous script request is not controlled
+          expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://example.com/bar.css',
+            callFrameUrl: 'http://localhost:8080/foo.js',
+          }))).to.be.false
+
+          // A script request emanated from the previous css is not controlled
+          expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
             url: 'http://example.com/baz.woff2',
-            isControlled: true,
-          },
+            initiatorUrl: 'http://example.com/bar.css',
+          }))).to.be.false
+
+          // A script request emanated from a different script request is not controlled
+          expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://example.com/quux.js',
+            callFrameUrl: 'http://example.com/bar.js',
+          }))).to.be.false
+
+          // A script request emanated from a different css request is not controlled
+          expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://example.com/quux.css',
+            initiatorUrl: 'http://example.com/baz.css',
+          }))).to.be.false
+
+          // A script request emanated from a different document is not controlled
+          expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://example.com/quux.css',
+            initiatorUrl: 'http://example.com/baz.css',
+            documentUrl: 'http://example.com/index.html',
+          }))).to.be.false
+
+          // A preload request is not controlled
+          expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://example.com/quux.css',
+            isPreload: true,
+          }))).to.be.false
         })
 
-        expect(await result).to.be.true
-
-        // A script request emanated from a different script request is not controlled
-        expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://example.com/quux.js',
-          callFrameUrl: 'http://example.com/bar.js',
-        }))).to.be.false
-
-        // A script request emanated from a different css request is not controlled
-        expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://example.com/quux.css',
-          initiatorUrl: 'http://example.com/baz.css',
-        }))).to.be.false
-
-        // A script request emanated from a different document is not controlled
-        expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://example.com/quux.css',
-          initiatorUrl: 'http://example.com/baz.css',
-        }))).to.be.false
-
-        // A preload request is not controlled
-        expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://example.com/quux.css',
-          isPreload: true,
-        }))).to.be.false
-
-        // A request that is not handled by the service worker 'fetch' handler is not controlled (browser pre-request first)
-        result = manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://localhost:8080/foo.js',
-        }))
-
-        manager.handleServiceWorkerClientEvent({
-          type: 'fetchRequest',
-          payload: {
+        it('will detect when requests are controlled by a service worker and handles query parameters', async () => {
+        // A script request emanated from the service worker's initiator is controlled
+          let result = manager.processBrowserPreRequest(createBrowserPreRequest({
             url: 'http://localhost:8080/foo.js',
-            isControlled: false,
-          },
+            documentUrl: 'http://localhost:8080/index.html?foo=bar',
+          }))
+
+          manager.handleServiceWorkerClientEvent({
+            type: 'fetchRequest',
+            payload: {
+              url: 'http://localhost:8080/foo.js',
+              isControlled: true,
+            },
+            scope: 'http://localhost:8080',
+          })
+
+          expect(await result).to.be.true
+
+          // A script request emanated from the previous script request is controlled
+          result = manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://example.com/bar.css',
+            callFrameUrl: 'http://localhost:8080/foo.js?foo=bar',
+            documentUrl: 'http://localhost:8080/index.html?foo=bar',
+          }))
+
+          manager.handleServiceWorkerClientEvent({
+            type: 'fetchRequest',
+            payload: {
+              url: 'http://example.com/bar.css',
+              isControlled: true,
+            },
+            scope: 'http://localhost:8080',
+          })
+
+          expect(await result).to.be.true
+
+          // A script request emanated from the previous css is controlled
+          result = manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://example.com/baz.woff2',
+            initiatorUrl: 'http://example.com/bar.css?foo=bar',
+            documentUrl: 'http://localhost:8080/index.html?foo=bar',
+          }))
+
+          manager.handleServiceWorkerClientEvent({
+            type: 'fetchRequest',
+            payload: {
+              url: 'http://example.com/baz.woff2',
+              isControlled: true,
+            },
+            scope: 'http://localhost:8080',
+          })
+
+          expect(await result).to.be.true
+
+          // A script request emanated from a different script request is not controlled
+          expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://example.com/quux.js',
+            callFrameUrl: 'http://example.com/bar.js?foo=bar',
+            documentUrl: 'http://localhost:8080/index.html?foo=bar',
+          }))).to.be.false
+
+          // A script request emanated from a different css request is not controlled
+          expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://example.com/quux.css',
+            initiatorUrl: 'http://example.com/baz.css?foo=bar',
+            documentUrl: 'http://localhost:8080/index.html?foo=bar',
+          }))).to.be.false
+
+          // A script request emanated from a different document is not controlled
+          expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://example.com/quux.css',
+            initiatorUrl: 'http://example.com/baz.css?foo=bar',
+            documentUrl: 'http://localhost:8080/index.html?foo=bar',
+          }))).to.be.false
+
+          // A preload request is not controlled
+          expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://example.com/quux.css',
+            isPreload: true,
+            documentUrl: 'http://localhost:8080/index.html?foo=bar',
+          }))).to.be.false
         })
 
-        expect(await result).to.be.false
-
-        // A request that is not handled by the service worker 'fetch' handler is not controlled (fetch event first)
-        manager.handleServiceWorkerClientEvent({
-          type: 'fetchRequest',
-          payload: {
+        it('will detect when requests are controlled by a service worker and handles re-registrations', async () => {
+        // A script request emanated from the service worker's initiator is controlled
+          let result = manager.processBrowserPreRequest(createBrowserPreRequest({
             url: 'http://localhost:8080/foo.js',
-            isControlled: false,
-          },
+          }))
+
+          manager.handleServiceWorkerClientEvent({
+            type: 'fetchRequest',
+            payload: {
+              url: 'http://localhost:8080/foo.js',
+              isControlled: true,
+            },
+            scope: 'http://localhost:8080',
+          })
+
+          expect(await result).to.be.true
+
+          manager.updateServiceWorkerRegistrations({
+            registrations: [{
+              registrationId: '1',
+              scopeURL: 'http://localhost:8080',
+              isDeleted: false,
+            }],
+          })
+
+          // A script request emanated from the previous script request is controlled
+          result = manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://example.com/bar.css',
+            callFrameUrl: 'http://localhost:8080/foo.js',
+          }))
+
+          manager.handleServiceWorkerClientEvent({
+            type: 'fetchRequest',
+            payload: {
+              url: 'http://example.com/bar.css',
+              isControlled: true,
+            },
+            scope: 'http://localhost:8080',
+          })
+
+          expect(await result).to.be.true
         })
 
-        expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://localhost:8080/foo.js',
-        }))).to.be.false
-      })
+        it('will detect when requests are controlled by a service worker and handles unregistrations', async () => {
+        // A script request emanated from the service worker's initiator is controlled
+          const result = manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://localhost:8080/foo.js',
+          }))
+
+          manager.handleServiceWorkerClientEvent({
+            type: 'fetchRequest',
+            payload: {
+              url: 'http://localhost:8080/foo.js',
+              isControlled: true,
+            },
+            scope: 'http://localhost:8080',
+          })
+
+          expect(await result).to.be.true
+
+          manager.updateServiceWorkerRegistrations({
+            registrations: [{
+              registrationId: '1',
+              scopeURL: 'http://localhost:8080',
+              isDeleted: true,
+            }],
+          })
 
-      it('will not detect requests when not controlled by an active service worker', async () => {
-        // remove the current service worker
-        manager.updateServiceWorkerRegistrations({
-          registrations: [{
-            registrationId: '1',
-            scopeURL: 'http://localhost:8080',
-            isDeleted: true,
-          }],
+          // A script request emanated from the previous script request is not controlled since the service worker was unregistered
+          expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://example.com/bar.css',
+            callFrameUrl: 'http://localhost:8080/foo.js',
+          }))).to.be.false
         })
 
-        // add a new service worker that is not activated
-        manager.updateServiceWorkerRegistrations({
-          registrations: [{
-            registrationId: '2',
-            scopeURL: 'http://localhost:8080',
-            isDeleted: false,
-          }],
-        })
+        it('supports multiple fetch handler calls first', async () => {
+          manager.handleServiceWorkerClientEvent({
+            type: 'fetchRequest',
+            payload: {
+              url: 'http://localhost:8080/foo.js',
+              isControlled: true,
+            },
+            scope: 'http://localhost:8080',
+          })
+
+          manager.handleServiceWorkerClientEvent({
+            type: 'fetchRequest',
+            payload: {
+              url: 'http://localhost:8080/bar.js',
+              isControlled: false,
+            },
+            scope: 'http://localhost:8080',
+          })
+
+          expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://localhost:8080/foo.js',
+          }))).to.be.true
 
-        // update the service worker to be in a non-activated state
-        manager.updateServiceWorkerVersions({
-          versions: [{
-            versionId: '1',
-            runningStatus: 'running',
-            registrationId: '2',
-            scriptURL: 'http://localhost:8080/sw.js',
-            status: 'activating',
-          }],
+          expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://localhost:8080/bar.js',
+          }))).to.be.false
         })
 
-        manager.addInitiatorToServiceWorker({
-          scriptURL: 'http://localhost:8080/sw.js',
-          initiatorOrigin: 'http://localhost:8080/',
-        })
+        it('supports multiple browser pre-request calls first', async () => {
+          const request1 = manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://localhost:8080/foo.js',
+          }))
 
-        // A script request emanated from the service worker's initiator is not controlled
-        expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://localhost:8080/foo.js',
-        }))).to.be.false
-
-        // A script request emanated from the previous script request is not controlled
-        expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://example.com/bar.css',
-          callFrameUrl: 'http://localhost:8080/foo.js',
-        }))).to.be.false
-
-        // A script request emanated from the previous css is not controlled
-        expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://example.com/baz.woff2',
-          initiatorUrl: 'http://example.com/bar.css',
-        }))).to.be.false
-
-        // A script request emanated from a different script request is not controlled
-        expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://example.com/quux.js',
-          callFrameUrl: 'http://example.com/bar.js',
-        }))).to.be.false
-
-        // A script request emanated from a different css request is not controlled
-        expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://example.com/quux.css',
-          initiatorUrl: 'http://example.com/baz.css',
-        }))).to.be.false
-
-        // A script request emanated from a different document is not controlled
-        expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://example.com/quux.css',
-          initiatorUrl: 'http://example.com/baz.css',
-          documentUrl: 'http://example.com/index.html',
-        }))).to.be.false
-
-        // A preload request is not controlled
-        expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://example.com/quux.css',
-          isPreload: true,
-        }))).to.be.false
-      })
+          const request2 = manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://localhost:8080/bar.js',
+          }))
+
+          manager.handleServiceWorkerClientEvent({
+            type: 'fetchRequest',
+            payload: {
+              url: 'http://localhost:8080/foo.js',
+              isControlled: true,
+            },
+            scope: 'http://localhost:8080',
+          })
+
+          manager.handleServiceWorkerClientEvent({
+            type: 'fetchRequest',
+            payload: {
+              url: 'http://localhost:8080/bar.js',
+              isControlled: false,
+            },
+            scope: 'http://localhost:8080',
+          })
+
+          expect(await request1).to.be.true
+          expect(await request2).to.be.false
+        })
 
-      it('will detect when requests are controlled by a service worker and handles query parameters', async () => {
-        // A script request emanated from the service worker's initiator is controlled
-        let result = manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://localhost:8080/foo.js',
-          documentUrl: 'http://localhost:8080/index.html?foo=bar',
-        }))
+        it('supports no client fetch handlers', async () => {
+          manager.handleServiceWorkerClientEvent({
+            type: 'hasFetchHandler',
+            payload: {
+              hasFetchHandler: false,
+            },
+            scope: 'http://localhost:8080',
+          })
 
-        manager.handleServiceWorkerClientEvent({
-          type: 'fetchRequest',
-          payload: {
+          expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
             url: 'http://localhost:8080/foo.js',
-            isControlled: true,
-          },
+          }))).to.be.false
         })
 
-        expect(await result).to.be.true
-
-        // A script request emanated from the previous script request is controlled
-        result = manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://example.com/bar.css',
-          callFrameUrl: 'http://localhost:8080/foo.js?foo=bar',
-          documentUrl: 'http://localhost:8080/index.html?foo=bar',
-        }))
-
-        manager.handleServiceWorkerClientEvent({
-          type: 'fetchRequest',
-          payload: {
-            url: 'http://example.com/bar.css',
-            isControlled: true,
-          },
+        it('supports a request with a hash parameter', async () => {
+          let result = manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://localhost:8080/foo.js',
+          }))
+
+          manager.handleServiceWorkerClientEvent({
+            type: 'fetchRequest',
+            payload: {
+              url: 'http://localhost:8080/foo.js#hash',
+              isControlled: true,
+            },
+            scope: 'http://localhost:8080',
+          })
+
+          expect(await result).to.be.true
         })
 
-        expect(await result).to.be.true
-
-        // A script request emanated from the previous css is controlled
-        result = manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://example.com/baz.woff2',
-          initiatorUrl: 'http://example.com/bar.css?foo=bar',
-          documentUrl: 'http://localhost:8080/index.html?foo=bar',
-        }))
-
-        manager.handleServiceWorkerClientEvent({
-          type: 'fetchRequest',
-          payload: {
-            url: 'http://example.com/baz.woff2',
-            isControlled: true,
-          },
+        it('supports a redirected request', async () => {
+          expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://localhost:8080/foo.js',
+            hasRedirectResponse: true,
+          }))).to.be.false
         })
 
-        expect(await result).to.be.true
-
-        // A script request emanated from a different script request is not controlled
-        expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://example.com/quux.js',
-          callFrameUrl: 'http://example.com/bar.js?foo=bar',
-          documentUrl: 'http://localhost:8080/index.html?foo=bar',
-        }))).to.be.false
-
-        // A script request emanated from a different css request is not controlled
-        expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://example.com/quux.css',
-          initiatorUrl: 'http://example.com/baz.css?foo=bar',
-          documentUrl: 'http://localhost:8080/index.html?foo=bar',
-        }))).to.be.false
-
-        // A script request emanated from a different document is not controlled
-        expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://example.com/quux.css',
-          initiatorUrl: 'http://example.com/baz.css?foo=bar',
-          documentUrl: 'http://localhost:8080/index.html?foo=bar',
-        }))).to.be.false
-
-        // A preload request is not controlled
-        expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://example.com/quux.css',
-          isPreload: true,
-          documentUrl: 'http://localhost:8080/index.html?foo=bar',
-        }))).to.be.false
+        it('supports a pre-request that times out when it does not receive a fetch event', async () => {
+          expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://localhost:8080/foo.js',
+          }))).to.be.false
+        })
       })
 
-      it('will detect when requests are controlled by a service worker and handles re-registrations', async () => {
-        // A script request emanated from the service worker's initiator is controlled
-        let result = manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://localhost:8080/foo.js',
-        }))
-
-        manager.handleServiceWorkerClientEvent({
-          type: 'fetchRequest',
-          payload: {
-            url: 'http://localhost:8080/foo.js',
-            isControlled: true,
-          },
+      context('without any controlled urls', () => {
+        it('will start handling when clients are claimed', async () => {
+          const registration = manager['serviceWorkerRegistrations'].get('1')
+          const serviceWorker = registration?.activatedServiceWorker
+
+          expect(registration?.isHandlingRequests).to.be.false
+          expect(serviceWorker?.controlledURLs).to.be.empty
+
+          manager.handleServiceWorkerClientEvent({
+            type: 'clientsClaimed',
+            payload: {
+              clientUrls: ['http://localhost:8080/index.html', 'http://localhost:8080/foo.js'],
+            },
+            scope: 'http://localhost:8080',
+          })
+
+          expect(registration?.isHandlingRequests).to.be.true
+          expect(serviceWorker?.controlledURLs).to.include('http://localhost:8080/index.html')
+          expect(serviceWorker?.controlledURLs).to.include('http://localhost:8080/foo.js')
         })
 
-        expect(await result).to.be.true
+        it('will add client urls to the pending list until the service worker is activated', () => {
+          // remove the current service worker
+          manager.updateServiceWorkerRegistrations({
+            registrations: [{
+              registrationId: '1',
+              scopeURL: 'http://localhost:8080',
+              isDeleted: true,
+            }],
+          })
+
+          // add a new service worker that is not activated
+          manager.updateServiceWorkerRegistrations({
+            registrations: [{
+              registrationId: '2',
+              scopeURL: 'http://localhost:8080',
+              isDeleted: false,
+            }],
+          })
+
+          // update the service worker to be in a non-activated state
+          manager.updateServiceWorkerVersions({
+            versions: [{
+              versionId: '1',
+              runningStatus: 'running',
+              registrationId: '2',
+              scriptURL: 'http://localhost:8080/sw.js',
+              status: 'activating',
+            }],
+          })
 
-        manager.updateServiceWorkerRegistrations({
-          registrations: [{
-            registrationId: '1',
-            scopeURL: 'http://localhost:8080',
-            isDeleted: false,
-          }],
-        })
+          manager.addInitiatorToServiceWorker({
+            scriptURL: 'http://localhost:8080/sw.js',
+            initiatorOrigin: 'http://localhost:8080/',
+          })
+
+          const registration = manager['serviceWorkerRegistrations'].get('2')
+
+          expect(registration?.isHandlingRequests).to.be.false
+          expect(registration?.activatedServiceWorker).to.be.undefined
+
+          // add client urls to the pending list
+          manager.handleServiceWorkerClientEvent({
+            type: 'clientsClaimed',
+            payload: {
+              clientUrls: ['http://localhost:8080/index.html', 'http://localhost:8080/foo.js'],
+            },
+            scope: 'http://localhost:8080',
+          })
+
+          expect(registration?.isHandlingRequests).to.be.true
+          expect(registration?.activatedServiceWorker).to.be.undefined
+
+          // update the service worker to be in an activated state
+          manager.updateServiceWorkerVersions({
+            versions: [{
+              versionId: '1',
+              runningStatus: 'running',
+              registrationId: '2',
+              scriptURL: 'http://localhost:8080/sw.js',
+              status: 'activated',
+            }],
+          })
 
-        // A script request emanated from the previous script request is controlled
-        result = manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://example.com/bar.css',
-          callFrameUrl: 'http://localhost:8080/foo.js',
-        }))
+          const serviceWorker = registration?.activatedServiceWorker
 
-        manager.handleServiceWorkerClientEvent({
-          type: 'fetchRequest',
-          payload: {
-            url: 'http://example.com/bar.css',
-            isControlled: true,
-          },
+          expect(serviceWorker?.controlledURLs).to.include('http://localhost:8080/index.html')
+          expect(serviceWorker?.controlledURLs).to.include('http://localhost:8080/foo.js')
         })
 
-        expect(await result).to.be.true
-      })
+        it('will start handling requests if the request is for the document', async () => {
+          const registration = manager['serviceWorkerRegistrations'].get('1')
+          const serviceWorker = registration?.activatedServiceWorker
 
-      it('will detect when requests are controlled by a service worker and handles unregistrations', async () => {
-        // A script request emanated from the service worker's initiator is controlled
-        const result = manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://localhost:8080/foo.js',
-        }))
+          expect(registration?.isHandlingRequests).to.be.false
+          expect(serviceWorker?.controlledURLs).to.be.empty
 
-        manager.handleServiceWorkerClientEvent({
-          type: 'fetchRequest',
-          payload: {
-            url: 'http://localhost:8080/foo.js',
-            isControlled: true,
-          },
-        })
+          let result = manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://localhost:8080/index.html',
+            originalResourceType: 'Document',
+          }))
+
+          expect(registration?.isHandlingRequests).to.be.true
 
-        expect(await result).to.be.true
+          manager.handleServiceWorkerClientEvent({
+            type: 'fetchRequest',
+            payload: {
+              url: 'http://localhost:8080/index.html',
+              isControlled: true,
+            },
+            scope: 'http://localhost:8080',
+          })
 
-        manager.updateServiceWorkerRegistrations({
-          registrations: [{
-            registrationId: '1',
-            scopeURL: 'http://localhost:8080',
-            isDeleted: true,
-          }],
+          expect(await result).to.be.true
+          expect(serviceWorker?.controlledURLs).to.include('http://localhost:8080/index.html')
         })
 
-        // A script request emanated from the previous script request is not controlled since the service worker was unregistered
-        expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://example.com/bar.css',
-          callFrameUrl: 'http://localhost:8080/foo.js',
-        }))).to.be.false
-      })
+        it('will handle a request whose call stack includes a url with the scope url', async () => {
+          const registration = manager['serviceWorkerRegistrations'].get('1')
+          const serviceWorker = registration?.activatedServiceWorker
 
-      it('supports multiple fetch handler calls first', async () => {
-        manager.handleServiceWorkerClientEvent({
-          type: 'fetchRequest',
-          payload: {
-            url: 'http://localhost:8080/foo.js',
-            isControlled: true,
-          },
-        })
+          expect(registration?.isHandlingRequests).to.be.false
+          expect(serviceWorker?.controlledURLs).to.be.empty
 
-        manager.handleServiceWorkerClientEvent({
-          type: 'fetchRequest',
-          payload: {
-            url: 'http://localhost:8080/bar.js',
-            isControlled: false,
-          },
-        })
+          manager.handleServiceWorkerClientEvent({
+            type: 'clientsClaimed',
+            payload: {
+              clientUrls: ['http://localhost:8080/index.html'],
+            },
+            scope: 'http://localhost:8080',
+          })
 
-        expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://localhost:8080/foo.js',
-        }))).to.be.true
+          let result = manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://example.com/bar.css',
+            callFrameUrl: 'http://localhost:8080/foo.js',
+          }))
+
+          expect(registration?.isHandlingRequests).to.be.true
+
+          manager.handleServiceWorkerClientEvent({
+            type: 'fetchRequest',
+            payload: {
+              url: 'http://example.com/bar.css',
+              isControlled: true,
+            },
+            scope: 'http://localhost:8080',
+          })
+
+          expect(await result).to.be.true
+          expect(serviceWorker?.controlledURLs).to.include('http://example.com/bar.css')
+        })
 
-        expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://localhost:8080/bar.js',
-        }))).to.be.false
-      })
+        it('will handle a request whose call stack includes a url with a controlled url', async () => {
+          const registration = manager['serviceWorkerRegistrations'].get('1')
+          const serviceWorker = registration?.activatedServiceWorker
 
-      it('supports multiple browser pre-request calls first', async () => {
-        const request1 = manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://localhost:8080/foo.js',
-        }))
+          expect(registration?.isHandlingRequests).to.be.false
+          expect(serviceWorker?.controlledURLs).to.be.empty
 
-        const request2 = manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://localhost:8080/bar.js',
-        }))
+          manager.handleServiceWorkerClientEvent({
+            type: 'clientsClaimed',
+            payload: {
+              clientUrls: ['http://localhost:8080/index.html'],
+            },
+            scope: 'http://localhost:8080',
+          })
 
-        manager.handleServiceWorkerClientEvent({
-          type: 'fetchRequest',
-          payload: {
-            url: 'http://localhost:8080/foo.js',
-            isControlled: true,
-          },
+          let result = manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://example.com/bar.css',
+            callFrameUrl: 'http://localhost:8080/foo.js',
+          }))
+
+          expect(registration?.isHandlingRequests).to.be.true
+
+          manager.handleServiceWorkerClientEvent({
+            type: 'fetchRequest',
+            payload: {
+              url: 'http://example.com/bar.css',
+              isControlled: true,
+            },
+            scope: 'http://localhost:8080',
+          })
+
+          expect(await result).to.be.true
+          expect(serviceWorker?.controlledURLs).to.include('http://example.com/bar.css')
         })
 
-        manager.handleServiceWorkerClientEvent({
-          type: 'fetchRequest',
-          payload: {
-            url: 'http://localhost:8080/bar.js',
-            isControlled: false,
-          },
-        })
+        it('does not start handling requests if the request is for a document not within the service worker scope', async () => {
+          const registration = manager['serviceWorkerRegistrations'].get('1')
+          const serviceWorker = registration?.activatedServiceWorker
 
-        expect(await request1).to.be.true
-        expect(await request2).to.be.false
-      })
+          let result = manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://localhost:9999/index.html',
+            originalResourceType: 'Document',
+          }))
 
-      it('supports no client fetch handlers', async () => {
-        manager.handleServiceWorkerClientEvent({
-          type: 'hasFetchHandler',
-          payload: {
-            hasFetchHandler: false,
-          },
+          expect(registration?.isHandlingRequests).to.be.false
+          expect(serviceWorker?.controlledURLs).to.be.empty
+          expect(await result).to.be.false
         })
 
-        expect(await manager.processBrowserPreRequest(createBrowserPreRequest({
-          url: 'http://localhost:8080/foo.js',
-        }))).to.be.false
+        it('does not start handling requests if the request is not for a document', async () => {
+          const registration = manager['serviceWorkerRegistrations'].get('1')
+          const serviceWorker = registration?.activatedServiceWorker
+
+          let result = manager.processBrowserPreRequest(createBrowserPreRequest({
+            url: 'http://localhost:8080/index.html',
+            originalResourceType: 'Fetch',
+          }))
+
+          expect(registration?.isHandlingRequests).to.be.false
+          expect(serviceWorker?.controlledURLs).to.be.empty
+          expect(await result).to.be.false
+        })
       })
     })
   })
diff --git a/packages/server/lib/automation/automation.ts b/packages/server/lib/automation/automation.ts
index e047ad195e8e..6e8a2d41d502 100644
--- a/packages/server/lib/automation/automation.ts
+++ b/packages/server/lib/automation/automation.ts
@@ -15,8 +15,7 @@ export type AutomationOptions = {
   screenshotsFolder?: string | false
   onBrowserPreRequest?: OnBrowserPreRequest
   onRequestEvent?: OnRequestEvent
-  onRequestServedFromCache?: (requestId: string) => void
-  onRequestFailed?: (requestId: string) => void
+  onRemoveBrowserPreRequest?: (requestId: string) => void
   onDownloadLinkClicked?: (downloadUrl: string) => void
   onServiceWorkerRegistrationUpdated?: OnServiceWorkerRegistrationUpdated
   onServiceWorkerVersionUpdated?: OnServiceWorkerVersionUpdated
@@ -31,8 +30,7 @@ export class Automation {
   private screenshot: { capture: (data: any, automate: any) => any }
   public onBrowserPreRequest: OnBrowserPreRequest | undefined
   public onRequestEvent: OnRequestEvent | undefined
-  public onRequestServedFromCache: ((requestId: string) => void) | undefined
-  public onRequestFailed: ((requestId: string) => void) | undefined
+  public onRemoveBrowserPreRequest: ((requestId: string) => void) | undefined
   public onDownloadLinkClicked: ((downloadUrl: string) => void) | undefined
   public onServiceWorkerRegistrationUpdated: OnServiceWorkerRegistrationUpdated | undefined
   public onServiceWorkerVersionUpdated: OnServiceWorkerVersionUpdated | undefined
@@ -42,8 +40,7 @@ export class Automation {
   constructor (options: AutomationOptions) {
     this.onBrowserPreRequest = options.onBrowserPreRequest
     this.onRequestEvent = options.onRequestEvent
-    this.onRequestServedFromCache = options.onRequestServedFromCache
-    this.onRequestFailed = options.onRequestFailed
+    this.onRemoveBrowserPreRequest = options.onRemoveBrowserPreRequest
     this.onDownloadLinkClicked = options.onDownloadLinkClicked
     this.onServiceWorkerRegistrationUpdated = options.onServiceWorkerRegistrationUpdated
     this.onServiceWorkerVersionUpdated = options.onServiceWorkerVersionUpdated
diff --git a/packages/server/lib/browsers/cdp_automation.ts b/packages/server/lib/browsers/cdp_automation.ts
index 873435e59424..448bf867bfea 100644
--- a/packages/server/lib/browsers/cdp_automation.ts
+++ b/packages/server/lib/browsers/cdp_automation.ts
@@ -167,6 +167,7 @@ export class CdpAutomation implements CDPClient {
   send: SendDebuggerCommand
   private frameTree: Protocol.Page.FrameTree | undefined
   private gettingFrameTree: Promise<void> | undefined | null
+  private cachedDataUrlRequestIds: Set<string> = new Set()
 
   private constructor (private sendDebuggerCommandFn: SendDebuggerCommand, private onFn: OnFn, private offFn: OffFn, private sendCloseCommandFn: SendCloseCommand, private automation: Automation, private focusTabOnScreenshot: boolean = false, private isHeadless: boolean = false) {
     onFn('Network.requestWillBeSent', this.onNetworkRequestWillBeSent)
@@ -265,7 +266,8 @@ export class CdpAutomation implements CDPClient {
     // Chrome sends `Network.requestWillBeSent` events with data urls which won't actually be fetched
     // Example data url: "data:font/woff;base64,<base64 encoded string>"
     if (url.startsWith('data:')) {
-      debugVerbose('skipping `data:` url %s', url)
+      debugVerbose('skipping data: url %s', url)
+      this.cachedDataUrlRequestIds.add(params.requestId)
 
       return
     }
@@ -281,6 +283,7 @@ export class CdpAutomation implements CDPClient {
       originalResourceType: params.type,
       initiator: params.initiator,
       documentURL: params.documentURL,
+      hasRedirectResponse: params.redirectResponse != null,
       // wallTime is in seconds: https://vanilla.aslushnikov.com/?Network.TimeSinceEpoch
       // normalize to milliseconds to be comparable to everything else we're gathering
       cdpRequestWillBeSentTimestamp: params.wallTime * 1000,
@@ -291,16 +294,27 @@ export class CdpAutomation implements CDPClient {
   }
 
   private onRequestServedFromCache = (params: Protocol.Network.RequestServedFromCacheEvent) => {
-    this.automation.onRequestServedFromCache?.(params.requestId)
+    debugVerbose('received onRequestServedFromCache %o', params)
+
+    // Filter out "data:" urls; they don't have a stored browserPreRequest
+    // since they're not actually fetched
+    if (this.cachedDataUrlRequestIds.has(params.requestId)) {
+      this.cachedDataUrlRequestIds.delete(params.requestId)
+      debugVerbose('skipping data: request %s', params.requestId)
+
+      return
+    }
+
+    this.automation.onRemoveBrowserPreRequest?.(params.requestId)
   }
 
   private onRequestFailed = (params: Protocol.Network.LoadingFailedEvent) => {
-    this.automation.onRequestFailed?.(params.requestId)
+    this.automation.onRemoveBrowserPreRequest?.(params.requestId)
   }
 
   private onResponseReceived = (params: Protocol.Network.ResponseReceivedEvent) => {
     if (params.response.fromDiskCache || (params.response.fromServiceWorker && params.response.encodedDataLength <= 0)) {
-      this.automation.onRequestServedFromCache?.(params.requestId)
+      this.automation.onRemoveBrowserPreRequest?.(params.requestId)
 
       return
     }
diff --git a/packages/server/lib/project-base.ts b/packages/server/lib/project-base.ts
index fae0e0a1a07b..c373438e3c06 100644
--- a/packages/server/lib/project-base.ts
+++ b/packages/server/lib/project-base.ts
@@ -156,7 +156,6 @@ export class ProjectBase extends EE {
     const [port, warning] = await this._server.open(cfg, {
       getCurrentBrowser: () => this.browser,
       getSpec: () => this.spec,
-      exit: this.options.args?.exit,
       onError: this.options.onError,
       onWarning: this.options.onWarning,
       shouldCorrelatePreRequests: this.shouldCorrelatePreRequests,
@@ -333,11 +332,7 @@ export class ProjectBase extends EE {
       this.server.emitRequestEvent(eventName, data)
     }
 
-    const onRequestServedFromCache = (requestId: string) => {
-      this.server.removeBrowserPreRequest(requestId)
-    }
-
-    const onRequestFailed = (requestId: string) => {
+    const onRemoveBrowserPreRequest = (requestId: string) => {
       this.server.removeBrowserPreRequest(requestId)
     }
 
@@ -367,8 +362,7 @@ export class ProjectBase extends EE {
       screenshotsFolder,
       onBrowserPreRequest,
       onRequestEvent,
-      onRequestServedFromCache,
-      onRequestFailed,
+      onRemoveBrowserPreRequest,
       onDownloadLinkClicked,
       onServiceWorkerRegistrationUpdated,
       onServiceWorkerVersionUpdated,
@@ -429,6 +423,8 @@ export class ProjectBase extends EE {
             previousResults: reporterInstance?.results() || {},
           })
         } else if (event === 'end') {
+          debugVerbose('browserPreRequests at the end: %O', this.server.getBrowserPreRequests())
+
           const [stats = {}] = await Promise.all([
             (reporterInstance != null ? reporterInstance.end() : undefined),
             this.server.end(),
diff --git a/packages/server/lib/server-base.ts b/packages/server/lib/server-base.ts
index 34840ee1961a..01df2eae3696 100644
--- a/packages/server/lib/server-base.ts
+++ b/packages/server/lib/server-base.ts
@@ -133,16 +133,13 @@ export interface OpenServerOptions {
   testingType: Cypress.TestingType
   onError: any
   onWarning: any
-  exit?: boolean
   getCurrentBrowser: () => Browser
   getSpec: () => FoundSpec | null
   shouldCorrelatePreRequests: () => boolean
-  protocolManager?: ProtocolManagerShape
 }
 
 export class ServerBase<TSocket extends SocketE2E | SocketCt> {
   private _middleware
-  private _protocolManager?: ProtocolManagerShape
   protected request: Request
   protected isListening: boolean
   protected socketAllowed: SocketAllowed
@@ -214,8 +211,6 @@ export class ServerBase<TSocket extends SocketE2E | SocketCt> {
   }
 
   setProtocolManager (protocolManager: ProtocolManagerShape | undefined) {
-    this._protocolManager = protocolManager
-
     this._socket?.setProtocolManager(protocolManager)
     this._networkProxy?.setProtocolManager(protocolManager)
   }
@@ -329,8 +324,6 @@ export class ServerBase<TSocket extends SocketE2E | SocketCt> {
     shouldCorrelatePreRequests,
     testingType,
     SocketCtor,
-    exit,
-    protocolManager,
   }: OpenServerOptions) {
     debug('server open')
     this.testingType = testingType
@@ -356,6 +349,7 @@ export class ServerBase<TSocket extends SocketE2E | SocketCt> {
       remoteStates: this._remoteStates,
       resourceTypeAndCredentialManager: this.resourceTypeAndCredentialManager,
       shouldCorrelatePreRequests,
+      getCurrentBrowser,
     })
 
     if (config.experimentalSourceRewriting) {
@@ -443,7 +437,7 @@ export class ServerBase<TSocket extends SocketE2E | SocketCt> {
     return e
   }
 
-  createNetworkProxy ({ config, remoteStates, resourceTypeAndCredentialManager, shouldCorrelatePreRequests }) {
+  createNetworkProxy ({ config, remoteStates, resourceTypeAndCredentialManager, shouldCorrelatePreRequests, getCurrentBrowser }) {
     const getFileServerToken = () => {
       return this._fileServer?.token
     }
@@ -461,6 +455,7 @@ export class ServerBase<TSocket extends SocketE2E | SocketCt> {
       request: this.request,
       serverBus: this._eventBus,
       resourceTypeAndCredentialManager,
+      getCurrentBrowser,
     })
   }
 
diff --git a/packages/server/test/unit/browsers/cdp_automation_spec.ts b/packages/server/test/unit/browsers/cdp_automation_spec.ts
index 975321ee214b..65eef466f314 100644
--- a/packages/server/test/unit/browsers/cdp_automation_spec.ts
+++ b/packages/server/test/unit/browsers/cdp_automation_spec.ts
@@ -72,8 +72,7 @@ context('lib/browsers/cdp_automation', () => {
       this.automation = {
         onBrowserPreRequest: sinon.stub(),
         onRequestEvent: sinon.stub(),
-        onRequestServedFromCache: sinon.stub(),
-        onRequestFailed: sinon.stub(),
+        onRemoveBrowserPreRequest: sinon.stub(),
         onServiceWorkerRegistrationUpdated: sinon.stub(),
         onServiceWorkerVersionUpdated: sinon.stub(),
       }
@@ -163,9 +162,11 @@ context('lib/browsers/cdp_automation', () => {
       it('ignore events with data urls', function () {
         this.onFn
         .withArgs('Network.requestWillBeSent')
-        .yield({ request: { url: 'data:font;base64' } })
+        .yield({ requestId: '0', request: { url: 'data:font;base64' } })
 
         expect(this.automation.onBrowserPreRequest).to.not.be.called
+        expect(cdpAutomation['cachedDataUrlRequestIds'].has('0')).to.be.true
+        expect(cdpAutomation['cachedDataUrlRequestIds']).to.have.property('size', 1)
       })
     })
 
@@ -253,7 +254,7 @@ context('lib/browsers/cdp_automation', () => {
     })
 
     describe('.onRequestServedFromCache', function () {
-      it('triggers onRequestServedFromCache', function () {
+      it('triggers onRemoveBrowserPreRequest', function () {
         const browserRequestServedFromCache = {
           requestId: '0',
         }
@@ -262,12 +263,29 @@ context('lib/browsers/cdp_automation', () => {
         .withArgs('Network.requestServedFromCache')
         .yield(browserRequestServedFromCache)
 
-        expect(this.automation.onRequestServedFromCache).to.have.been.calledWith(browserRequestServedFromCache.requestId)
+        expect(this.automation.onRemoveBrowserPreRequest).to.have.been.calledWith(browserRequestServedFromCache.requestId)
+      })
+
+      it('ignores cached data url request ids', function () {
+        this.onFn
+        .withArgs('Network.requestWillBeSent')
+        .yield({ requestId: '0', request: { url: 'data:font;base64' } })
+
+        expect(cdpAutomation['cachedDataUrlRequestIds'].has('0')).to.be.true
+        expect(cdpAutomation['cachedDataUrlRequestIds']).to.have.property('size', 1)
+
+        this.onFn
+        .withArgs('Network.requestServedFromCache')
+        .yield({ requestId: '0' })
+
+        expect(this.automation.onRemoveBrowserPreRequest).to.not.have.been.called
+        expect(cdpAutomation['cachedDataUrlRequestIds'].has('0')).to.be.false
+        expect(cdpAutomation['cachedDataUrlRequestIds']).to.have.property('size', 0)
       })
     })
 
     describe('.onRequestFailed', function () {
-      it('triggers onRequestFailed', function () {
+      it('triggers onRemoveBrowserPreRequest', function () {
         const browserRequestFailed = {
           requestId: '0',
         }
@@ -276,7 +294,7 @@ context('lib/browsers/cdp_automation', () => {
         .withArgs('Network.loadingFailed')
         .yield(browserRequestFailed)
 
-        expect(this.automation.onRequestFailed).to.have.been.calledWith(browserRequestFailed.requestId)
+        expect(this.automation.onRemoveBrowserPreRequest).to.have.been.calledWith(browserRequestFailed.requestId)
       })
     })
 
diff --git a/system-tests/projects/protocol/cypress/fixtures/service-worker-assets/scope/service-worker.js b/system-tests/projects/protocol/cypress/fixtures/service-worker-assets/scope/service-worker.js
index 333d170bdcfa..e420d6140d72 100644
--- a/system-tests/projects/protocol/cypress/fixtures/service-worker-assets/scope/service-worker.js
+++ b/system-tests/projects/protocol/cypress/fixtures/service-worker-assets/scope/service-worker.js
@@ -1,5 +1,5 @@
 const activate = async () => {
-  self.clients.claim()
+  await self.clients.claim()
   if (self.registration.navigationPreload) {
     await self.registration.navigationPreload.enable()
   }
diff --git a/system-tests/test/service_worker_protocol_spec.js b/system-tests/test/service_worker_protocol_spec.js
index 4c3aaebb1ff0..4fa8948cd756 100644
--- a/system-tests/test/service_worker_protocol_spec.js
+++ b/system-tests/test/service_worker_protocol_spec.js
@@ -46,7 +46,8 @@ describe('capture-protocol', () => {
           expect(parsedProtocolEvents.multipleNetworkRequestEventsForSameRequestId).to.be.false
           expect(parsedProtocolEvents.correlatedUrls).to.eql({
             'http://localhost:3131/index.html': ['frame id'],
-            'http://localhost:2121/cypress/fixtures/service-worker-assets/example.json': ['frame id'],
+            // Only correlations occur in the service worker for this asset
+            'http://localhost:2121/cypress/fixtures/service-worker-assets/example.json': ['no frame id'],
             // Only correlations occur in the service worker for this asset
             'http://localhost:2121/cypress/fixtures/service-worker-assets/scope/cached-service-worker.json': ['no frame id'],
             'http://localhost:2121/cypress/fixtures/service-worker-assets/scope/load.js': ['frame id'],