Question: should I be able to redirect link/script tags in the <head>? #875

BMCwebdev · 2021-08-19T21:37:06Z

BMCwebdev
Aug 19, 2021

Just getting started, and have been looking around for an answer on this one. Should MSW be able to redirect a GET for a <link> or <script> tag in the <head>? Something along the lines of:
rest.get("/styles.css", (req, res, ctx) => { return res( ctx.status(307), ctx.set("Location", "/test/styles.css") ); })
I forked a demo CodeSandbox, added a link tag in the index.html' s <head> and tried the above code without luck. Link is below:
https://codesandbox.io/s/hardcore-benz-4bw1b

kettanaito · 2021-08-21T09:31:41Z

kettanaito
Aug 21, 2021
Maintainer

Hey, @BMCwebdev.

Although Service Workers can capture such static assets on page load, MSW is a little different. Our worker self-destructs when its last client unloads. This includes the case when you refresh the page. What actually happens is that the worker unregisters itself when the page unloads, then your page loads your JavaScript code that calls worker.start(), which signals the worker to activate again.

There's a loading gap between the page load and its JavaScript being executed. That's one of the reasons why MSW cannot intercept the requests from the <head>. There's also another reason.

We are explicitly bypassing any initial load assets:

msw/src/mockServiceWorker.js

Lines 261 to 266 in 9373ccf

    
           // 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 
        
           }

msw/src/mockServiceWorker.js

Lines 151 to 157 in 9373ccf

    
           // 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 await getOriginalResponse() 
        
           }

We do so that you couldn't mock your index.html, or other cricial assets, by mistake, resulting in a broken application until you manually unregister the worker. I find this a reasonable default and have no intention of changing this behavior.

MSW is primarily meant for interactive requests. Basically, any fetch or other requests you do on runtime. It can still intercept requests on page load, but those must also be issued via fetch.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Question: should I be able to redirect link/script tags in the <head>? #875

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

Question: should I be able to redirect link/script tags in the <head>? #875

BMCwebdev Aug 19, 2021

Replies: 1 comment

kettanaito Aug 21, 2021 Maintainer

BMCwebdev
Aug 19, 2021

kettanaito
Aug 21, 2021
Maintainer