Runtime caching caches at second reload

[ProDeSquare]

I'm using vite-plugin-pwa with my React.js, Typescript, and SWC app. I've noticed in the dev tools it doesn't cache my API requests until the second reload. I tried a solution from this link (from StackOverflow) but it didn't help. I implemented this with:

workbox: {
    clientsClaim: true,
    skipWaiting: true
}

but it still caches the API response on the second reload. I also tried dns-prefetch and preconnect (according to the official documentation) with the API host but it had no effect. Is there any workaround for that, I'm using the GenerateSW method.

[userquin]

@ProDeSquare can you try this GoogleChrome/workbox#1415 (comment) ? You'll need to use any of the virtual modules calling the useRegisterSW (fw ones) or registerSW (vanilljs)

[ProDeSquare]

This is the registerSW.js code, it already has an event listener on window load which registers the sw.js

if('serviceWorker'in navigator){window.addEventListener('load',()=>{navigator.serviceWorker.register('/sw.js',{scope:'/'})})}

Should I delay it even further?

Edit: I've started seeing the pattern. My API requests are lazy loaded.

[ProDeSquare]

@ProDeSquare can you try this GoogleChrome/workbox#1415 (comment) ? You'll need to use any of the virtual modules calling the useRegisterSW (fw ones) or registerSW (vanilljs)

For testing: Now my API requests are delayed 5 seconds after the page load.

Result:

1. Page Loads and service worker gets registered
2. 5 seconds later API requests are made and nothing is added to the cache
3. Waited a couple of seconds to check if the API response is cached and it doesn't
4. The page is refreshed and after 5 seconds the API is called again and this time it's added to the cache