Sometimes does not register service worker when deployed to Vercel

[crunchwrap89]

When i run lighthouse on my Nuxt 3 app that has been deployed to Vercel, the score will sometimes fail due to this "Does not register a service worker" issue:

Sometimes when refreshing the page and running lighthouse again it works fine:

It looks like This is my config:

´´´ pwa: { registerType: 'autoUpdate', manifest: { name: 'GeoQuestr', short_name: 'GeoQuestr', theme_color: '#0a1a1f', description: 'Build and play location based games.', background_color: '#0a1a1f', icons: icons.icons }, workbox: { navigateFallback: '/', globPatterns: ['*/.{js,css,html,ico,png,svg,gltf,bin}'], maximumFileSizeToCacheInBytes: 25097152 } }, ´´´

Any ideas why its not stable? Also, the asset downloads by the service worker is super slow, is this related to any throttling on vercel's side?

[userquin]

Check if sw.js and manifest webmanifest are there, latter should be served with custom content type (https://github.com/vite-pwa/nuxt/blob/main/src/module.ts#L159), try enabling https://github.com/vite-pwa/nuxt/blob/main/src/types.ts#L47 in nuxt pwa options

[tberk]

I am also having this issue with the lighthouse, I always get the "Does not register a service worker that controls page and start_url" error. I have deployed on Plesk and Vercel both same.

Application tab looks normal:

[userquin]

@crunchwrap89 @tberk can you test adding client.registerWebManifestInRouteRules = true in pwa options?

Check the local build using "NITRO_PRESET=vercel in the build script: https://github.com/vite-pwa/nuxt/blob/main/package.json#L41

[tberk]

• Build logs on vercel says: "Running "vercel build""
• Tried adding registerWebManifestInRouteRules: true to pwa config.

Still getting the same error. I also tested on dev, it detects start_url fine there, no problem.

pwa: {
    registerType: 'autoUpdate',
    registerWebManifestInRouteRules: true,
    manifest: {
      name: 'appname',
      short_name: 'appname',
      description: 'Some description.',
      theme_color: '#fff',
      icons: [
        {
          src: 'pwa/pwa-64x64.png',
          sizes: '64x64',
          type: 'image/png',
        },
        {
          src: 'pwa/pwa-192x192.png',
          sizes: '192x192',
          type: 'image/png',
        },
        {
          src: 'pwa/pwa-512x512.png',
          sizes: '512x512',
          type: 'image/png',
          purpose: 'any',
        },
        {
          src: 'pwa/maskable-icon-512x512.png',
          sizes: '512x512',
          type: 'image/png',
          purpose: 'maskable',
        },
      ],
    },
    workbox: {
      navigateFallback: null,
      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
    },
    client: {
      installPrompt: true,
    },
    devOptions: {
      enabled: true,
      suppressWarnings: true,
      navigateFallbackAllowlist: [/^\/$/],
      type: 'module',
    },
  },

[userquin]

@tberk can you share the url?

[tberk]

Sure, I sent an email to you with the link.

btw, I noticed something, If I test in Incognito mode all checks seem fine, it shows start_url.

[userquin]

Are you using nuxi generate or nuxi build? On my local when running nuxi build, it is generating config.json, but missing when using nuxi generate (with repo playground, I've sent a DM to Daniel Roe):

[userquin]

btw, I noticed something, If I test in Incognito mode all checks seem fine, it shows start_url.

This is weird, tested you app in private browsing and it is working, I'll check it in normal browsing and review the headers...

In the mean time, check out https://vite-pwa-org.netlify.app/deployment/, the sw is quite sensible...

[userquin]

@tberk seems working, http headers properly configured by Nuxt, can you remove storage including (check Unregister service worker) service worker from Dev Tools > Application > Storage > Clear site data button?

[userquin]

it is working properly also with lighthouse in normal browsing:

[tberk]

I'm beginning to suspect this might be some sort of peculiar UI bug or something similar. Aside from that check, I don't encounter any issues with PWA.

In addition to incognito mode, PWA testing tools also appear to be successful.

I've used the "Clear Site Data" function along with other methods to try and clear site data, but the start_url still isn't visible on either my Edge or Chrome browsers. However, I am ready to overlook this issue for now as it doesn't cause anything that I noticed.

Thank you for your responses, @userquin.