vite-plugin-pwa removes mock service worker

[houtan-rocky]

Issue: when VitePWA is activated, it conflicts with my MSWJS mock service worker and apparently removes Mock Service Worker from my application.

steps to reproduce:
Install React-App through vite installation

    "vite": "^5.0.7",
"vite-plugin-pwa": "^0.19.7",

install and configure vite-plugin-pwa:

    VitePWA({
      registerType: 'autoUpdate',
      devOptions: {
        enabled: true,
      },
      injectRegister: 'auto',
      manifest: {
        name: 'test-app',
        short_name: 'TA',
        start_url: '',
        display: 'fullscreen',
        theme_color: '#000',
        background_color: '#fff',
        icons: [
          {
            src: 'favicon/android-chrome-192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: 'favicon/android-chrome-512x512.png',
            sizes: '512x512',
            type: 'image/png',
          },
        ],
      },
    }),

Behaviour:
the vite-pwa extension, when enabled, removes the mock service worker, and the below error is shown in the console:

createStartHandler.ts:57 Uncaught (in promise) Error: [MSW] Failed to locate the Service Worker registration using a custom "findWorker" predicate.

Please ensure that the custom predicate properly locates the Service Worker registration at "/mockServiceWorker.js".
More details: https://mswjs.io/docs/api/setup-worker/start#findworker

    at startWorkerInstance (createStartHandler.ts:57:15)
    at async SetupWorkerApi.start (setupWorker.ts:179:12)

Expected:
Extension to not conflict and remove the mock service worker

[userquin]

you can try adding an env var when testing, then use it to disable PWA.

[houtan-rocky]

@userquin Isn't there a way to not unregister other SW's?
If you can show me the direction I might be able to help with that.

[userquin]

using generateSW I guess no, can you provide a minimal reproduction? Maybe I can check what's happening...

[userquin]

If you use a custom service worker you can import mockServiceWorker.js script, but since you use generateSW strategy there is no way to include that script (iirc you can only have one sw per scope).

[userquin]

check registering the msw sw in another scope: check last entry here https://stackoverflow.com/questions/77292614/vite-pwa-not-able-to-register-mock-service-worker-in-parallel-with-other-servi

[userquin]

@houtan-rocky can you try adding a custom sw importing this module on it? It is a custom msw/mockServiceWorker.js registering logic when import.meta.vitest is present (if not using Vitest you will need to add some entry to Vite define or use some env variable, the code shouldn't be included in production build).

You can use JavaScript, just remove all types from the module.

mock-sw.ts

/// <reference lib="webworker" />
/// <reference types="vitest/import-meta" />

/**
 * Mock Service Worker.
 * @see https://github.com/mswjs/msw
 * - Please do NOT modify this file.
 * - Please do NOT serve this file on production.
 */

declare let self: ServiceWorkerGlobalScope

if (import.meta.vitest) {
    
    interface MswMessage {
        type: string
        data?: any
        payload?: any,
    }

    const PACKAGE_VERSION = '2.3.0'
    const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
    const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
    const activeClientIds = new Set()


    self.addEventListener('message', async function (event) {
        const clientId = event.source && 'id' in event.source ? event.source.id : null

        if (!clientId || !self.clients) {
            return
        }

        const client = await self.clients.get(clientId)

        if (!client) {
            return
        }

        const allClients = await self.clients.matchAll({
            type: 'window',
        })

        switch (event.data) {
            case 'KEEPALIVE_REQUEST': {
                sendToClient(client, {
                    type: 'KEEPALIVE_RESPONSE',
                })
                break
            }

            case 'INTEGRITY_CHECK_REQUEST': {
                sendToClient(client, {
                    type: 'INTEGRITY_CHECK_RESPONSE',
                    payload: {
                        packageVersion: PACKAGE_VERSION,
                        checksum: INTEGRITY_CHECKSUM,
                    },
                })
                break
            }

            case 'MOCK_ACTIVATE': {
                activeClientIds.add(clientId)

                sendToClient(client, {
                    type: 'MOCKING_ENABLED',
                    payload: true,
                })
                break
            }

            case 'MOCK_DEACTIVATE': {
                activeClientIds.delete(clientId)
                break
            }

            case 'CLIENT_CLOSED': {
                activeClientIds.delete(clientId)

                const remainingClients = allClients.filter((client) => {
                    return client.id !== clientId
                })

                // Unregister itself when there are no more clients
                if (remainingClients.length === 0) {
                    self.registration.unregister()
                }

                break
            }
        }
    })

    self.addEventListener('fetch', function (event) {
        const { request } = event

        // Bypass navigation requests.
        if (request.mode === 'navigate') {
            return
        }

        // Opening the DevTools triggers the "only-if-cached" request
        // that cannot be handled by the worker. Bypass such requests.
        if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
            return
        }

        // Bypass all requests when there are no active clients.
        // Prevents the self-unregistered worked from handling requests
        // after it's been deleted (still remains active until the next reload).
        if (activeClientIds.size === 0) {
            return
        }

        // Generate unique request ID.
        const requestId = crypto.randomUUID()
        event.respondWith(handleRequest(event, requestId))
    })

    async function handleRequest(event: FetchEvent, requestId: string) {
        const client = await resolveMainClient(event)
        const response = await getResponse(event, requestId, client)

        // Send back the response clone for the "response:*" life-cycle events.
        // Ensure MSW is active and ready to handle the message, otherwise
        // this message will pend indefinitely.
        if (client && activeClientIds.has(client.id)) {
            ;(async function () {
                const responseClone = response.clone()

                sendToClient(
                    client,
                    {
                        type: 'RESPONSE',
                        payload: {
                            requestId,
                            isMockedResponse: IS_MOCKED_RESPONSE in response,
                            type: responseClone.type,
                            status: responseClone.status,
                            statusText: responseClone.statusText,
                            body: responseClone.body,
                            headers: Object.fromEntries(responseClone.headers.entries()),
                        },
                    },
                    [responseClone.body],
                )
            })()
        }

        return response
    }

    // Resolve the main client for the given event.
    // Client that issues a request doesn't necessarily equal the client
    // that registered the worker. It's with the latter the worker should
    // communicate with during the response resolving phase.
    async function resolveMainClient(event: FetchEvent) {
        const client = await self.clients.get(event.clientId)

        if (client?.frameType === 'top-level') {
            return client
        }

        const allClients = await self.clients.matchAll({
            type: 'window',
        })

        return allClients
            .filter((client) => {
                // Get only those clients that are currently visible.
                return client.visibilityState === 'visible'
            })
            .find((client) => {
                // Find the client ID that's recorded in the
                // set of clients that have registered the worker.
                return activeClientIds.has(client.id)
            })
    }

    async function getResponse(event: FetchEvent, requestId: string, client?: Client) {
        const { request } = event

        // Clone the request because it might've been already used
        // (i.e. its body has been read and sent to the client).
        const requestClone = request.clone()

        function passthrough() {
            const headers = Object.fromEntries(requestClone.headers.entries())

            // Remove internal MSW request header so the passthrough request
            // complies with any potential CORS preflight checks on the server.
            // Some servers forbid unknown request headers.
            delete headers['x-msw-intention']

            return fetch(requestClone, { headers })
        }

        // Bypass mocking when the client is not active.
        if (!client) {
            return passthrough()
        }

        // Bypass initial page load requests (i.e. static assets).
        // The absence of the immediate/parent client in the map of the active clients
        // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
        // and is not ready to handle requests.
        if (!activeClientIds.has(client.id)) {
            return passthrough()
        }

        // Notify the client that a request has been intercepted.
        const requestBuffer = await request.arrayBuffer()
        const clientMessage = await sendToClient(
            client,
            {
                type: 'REQUEST',
                payload: {
                    id: requestId,
                    url: request.url,
                    mode: request.mode,
                    method: request.method,
                    headers: Object.fromEntries(request.headers.entries()),
                    cache: request.cache,
                    credentials: request.credentials,
                    destination: request.destination,
                    integrity: request.integrity,
                    redirect: request.redirect,
                    referrer: request.referrer,
                    referrerPolicy: request.referrerPolicy,
                    body: requestBuffer,
                    keepalive: request.keepalive,
                },
            },
            [requestBuffer],
        )

        switch (clientMessage.type) {
            case 'MOCK_RESPONSE': {
                return respondWithMock(clientMessage.data)
            }

            case 'PASSTHROUGH': {
                return passthrough()
            }
        }

        return passthrough()
    }

    function sendToClient(client: Client, message: MswMessage, transferrables: any[] = []) {
        return new Promise<MswMessage>((resolve, reject) => {
            const channel = new MessageChannel()

            channel.port1.onmessage = (event) => {
                if (event.data && event.data.error) {
                    return reject(event.data.error)
                }

                resolve(event.data)
            }

            client.postMessage(
                message,
                [channel.port2].concat(transferrables.filter(Boolean)),
            )
        })
    }

    async function respondWithMock(response: Response) {
        // Setting response status code to 0 is a no-op.
        // However, when responding with a "Response.error()", the produced Response
        // instance will have status code set to 0. Since it's not possible to create
        // a Response instance with status code 0, handle that use-case separately.
        if (response.status === 0) {
            return Response.error()
        }

        const mockedResponse = new Response(response.body, response)

        Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
            value: true,
            enumerable: true,
        })

        return mockedResponse
    }
}

Then in your custom sw.ts import the mock-sw.ts:

import './mock-sw.ts'`

[userquin]

For example, using @vite-pwa/create-pwa with inject manifest (the prompt-sw.ts should be sw.ts):