Service Worker not detecting updates

[IlariaCallegari]

Hello,

I’m hoping someone can help 🆘 , as I’ve been struggling with this issue for the past week. We’ve been using VitePWA for over a year now, but since October last year, we’ve noticed a strange behavior in our production application.

When we release a new version, the service worker does not seem to detect the new version update. We use generateSW as our strategy and use registerType: 'prompt', so a dialog box should appear prompting users to update to the new version.

Lately though, the dialog box does not appear, or some users report an erratic behaviour: i.e. they click on 'update' and nothing happens. If a user clears the cache and hard reloads the browser, they will receive the latest version of the app. But as soon as they log out and back in again, the service worker will serve the old assets, rolling the app back to the previous version.

From my understanding, a hard reload does not clear service worker files, which might explain the rollback effect, but I don’t understand why the service worker is not detecting the update in the first place.

I’ve spent a good amount of time debugging, and the service worker appears to register correctly. Below is our current configuration:

export default defineConfig({
    base: '/',
    build: {
        outDir: './build',
    },
    define: {
        APP_VERSION: JSON.stringify(process.env.npm_package_version),
        APP_BUILD_TIME: JSON.stringify(new Date().toISOString()),
    },
    plugins: [
        react(), 
        svgr(), 
        VitePWA({
            includeAssets: ['favicon.ico', 'apple-touch-icon.svg', 'maskable-icon-512x512.svg'],
            manifest,
            workbox: {
                skipWaiting: true,
                clientsClaim: true,
            }
            //DEFAULT OPTIONS 
            //strategies: 'generateSW'.
            //registerType: 'prompt',
            // comment back these lines to test PWA requirements in dev mode
            // devOptions: {
            //    enabled: true,
            // }
        })
    ],
    server: {    
        open: true,  
        port: 3000, 
    },
    esbuild: {
        loader: 'jsx',
        include: /src\/.*\.(jsx?|js)$/,
        exclude: [],
    },
}) 

Apologies in advance if this is a duplicated question, but I spent a good amount of time reading discussions on similar issues and tried the proposed solutions without any luck.

Any insights or suggestions would be greatly appreciated. Thanks! 🙏🏻

[userquin]

can you share the app url?

[IlariaCallegari]

It's a private application, sorry. If you tell me what to look at I can report back.

[userquin]

• is your app an SPA or MPA?
• are you using some backend like ngix or apache
• check the sw.js and index.html response cache headers (shouldn't be cached, always 200): check https://vite-pwa-org.netlify.app/deployment/
• vite and pwa plugin versions
• check there is no workbox build warnings in a local build about maximum asset sizes: check https://vite-pwa-org.netlify.app/guide/faq.html#missing-assets-from-sw-precache-manifest (using latest pwa plugin will throw an error when warnibg is present)
• ensure you are using virtual pwa module in all layouts
• ensure your app doesn't switch between context/origin
• check in your local with 2 or more local builds (change some text between builds)

[IlariaCallegari]

Hi,
thanks for replying, and sorry for my slow reply.

• is your app an SPA or MPA?
  SPA

• are you using some backend like ngix or apache
  Nope, we serve the files via AWS s3 + cloudfront

• check the sw.js and index.html response cache headers (shouldn't be cached, always 200): check https://vite-pwa-org.netlify.app/deployment/
  The headers are fine, the cache controls for index.html and sw.js are --cache-control max-age=0,must-revalidate,public
  We did not set the cache controls for manifets.webmanifest, though, but our manifest is fairly basic, don't think that should be an issue.

• vite and pwa plugin versions

"vite": "^4.5.5",
 "vite-plugin-pwa": "^0.21.1"

I bumped vite-plugin-pwa to the latest version last week when trying to solve the issue, but did not help.

• check there is no workbox build warnings in a local build about maximum asset sizes: check https://vite-pwa-org.netlify.app/guide/faq.html#missing-assets-from-sw-precache-manifest (using latest pwa plugin will throw an error when warning is present)
  No workbox build warnings when building in local

• ensure you are using virtual pwa module in all layouts
  Yes, we are using 'virtual:pwa-register/react'

• ensure your app doesn't switch between context/origin
  Don't think this is a problem for us

• check in your local with 2 or more local builds (change some text between builds)
  If I run npm run preview and run a build, change something, and run a build again, the prompt does not appear.
  Looking inside Chrome DevTools Application > Service Workers there is no service worker that appears to be waiting, or installing. So nothing that says that the service worker has picked up there is a new version of the app.
  If I click 'update', I get the new service worker and the new app version. Same if I refresh. I tried to change the registerType into autoUpdate and I have the same problem.

A couple of other bits that are worth mentioning:

• It seems this problem is affecting only prod. In dev the service worker seems to be working ok. We've already checked if there is any difference in cache-controls, etc. but they are the same.
• I tried different browsers, and have the same problem

FYI I am going on holiday next week - so will pick this up when I am back.

Thanks again!

[userquin]

You need:

• build + preview or start the app via serve or similar
• open the app in private browsing => await sw green (installed and activated)
• once sw green, stop the server
• change some text in the html or any css/html/js/ts/jsx/tsx file
• build + preview again
• back to the browser and refresh the page => the new sw should be detected => installing then awaiting (continue reading)

Since you're using the default registerType, that it is prompt, you should show some prompt in the app when needRefresh is activated with the refresh/update buttonm, then when clicking on refresh/update button call to updateServiceWorker, otherwise the sw will keep yellow (awaiting activation, workbox.skipWaiting = true will be ignored when workbox builds the sw).

If you are using registerType: 'autoUpdate', then the sw will be activated; if using the pwa react virtual module, then the page will be also reloaded => the sw should be green in dev tools (note: only if you're using workbox.clientsClaim = true and workbox.skipWaiting = true). Check the warning here https://vite-pwa-org.netlify.app/guide/auto-update.html#automatic-reload .

You can repeat previous step, don't forgot to change some text in the app between builds, otherwise the sw shouldn't change (workbox will compare the current and the new sw bit by bit to detect if there is a new version).

DON'T forget to revert changes before deploying 😅

If you want the app to check for updates every X seconds, read https://vite-pwa-org.netlify.app/guide/periodic-sw-updates.html#periodic-service-worker-updates (use 20 seconds only for testing purposes and use the last code snipet in the page => Handling Egde Cases)

About production, check if there are errors in the console, the sw should be green in dev tools.