App does not load from SW when refreshing, only when changing route

[cant89]

We have an app in React, I have added the following configuration to the vite.config.js and when I build the application it properly generates the Service worker in the build folder. If I serve the builded app on localhost I see all the resources to be pre-cached being downloaded and by changing page I see the lazy loaded assets being served from the cache through the ServiceWorker.

However if I reload the window, the assets are still being fetched from the server instead of being retrieved from the cache. How can I fix it?

NOTE:

• I have not checked "Update on reload" for the sw in the Dev tools.
• I have tried to set the network to offline and the app does not load. I also tried adding html to the globPatterns.
• my end goal is not to make the app available offline, just to speed up the first loading by getting all the hashed assets from the cache
• dev mode does not seems to work, it caches only index.html (why?) and registerSw.js but both have the __WB_REVISION__ appended, don't know why

Here is my config:

plugins: [
  // ... other plugins
  VitePWA({
    registerType: "autoUpdate",
    workbox: {
      globPatterns: ["**/*.{js,css,wasm}"],
    },
    devOptions: {
      enabled: true,
    },
  });
]

Thanks

[userquin]

Check if there are errors when registering the sw: in dev tools, go to Application > Service Worker, the sw should be in green without any error.

Once the sw is activated (should be with a green dot), you can refresh the page and check Network tab, any entry in the sw precache manifest should be served by the service worker

In dev, offiline will not work.

auto update !== auto page reload, you need to use any of the virtual modules: https://vite-pwa-org.netlify.app/guide/auto-update.html#automatic-reload

[cant89]

Thanks @userquin for your help. The sw seems to be active and running, the only weird thing to me is that deleted at the top, beside localhost:3000

However as said if I refresh the page the assets are not taken from the cache. Only the assets lazily requested subsequently, when changing route, are taken from cache.

Any idea?

[userquin]

Can you try unregistering the sw? In dev tools go to Application > Storage, you should check following checkboxes

• Application: [x] Unregister service worker
• Storage: [x] Local and session storage
• Cache: [x] Cache storage and [x] Application cache

Click on Clear site data button, then go to Application > Service Workers and check the current service worker is missing or has the state deleted and restart browser.

[cant89]

@userquin I did it many times, just never restarted the browser. Is it relevant? Anyway I tried restarting but same behaviour. After clearing the cache:

[userquin]

is the repo public?

[cant89]

is the repo public?

Unfortunately it's not but please ask and I will share whatever can help

[userquin]

try to provide a minimal repro

[cant89]

I can't believe it, there was an unregister sw somewhere in the codebase that was unregistering mine as well.

Now it works, sorry for it 🤦