When using PWA in development mode, it's not possible to visit routes directly

[Rudolf Byker]

When using the PWA in development mode, it's not possible to visit routes directly after the service worker has been registered. It always sends you to the front page of the app.

Reproduction: https://github.com/rudolfbyker/repro-nuxt-pwa-dev-mode

Follow the steps in the README to see the problem.

[Ayodeji Alarape]

i also have this same problem

this is my current pwa settings

  pwa: {
    manifest: {
   ....
    },
    workbox: {
      navigateFallback: '/',
      globPatterns: ['**/*.{js,css,html,png,svg,ico}']
    },
    devOptions: { enabled: true, type: 'module', navigateFallbackAllowlist: [/^\/$/] },
    client: {
      installPrompt: true
    }
  } 

any possible fixes anyone ?

[Joaquín Sánchez]

I'll check if we can bypass the problem, it should work using app navigation, the dev options are only for webmanifest and custom service worker logic (push notifications, web shared target api, background sync), once tested, should be disabled.

[Ayodeji Alarape]

Thanks for taking a look

Despite disabling devOptions, I am still unable to access routes directly.

[Joaquín Sánchez]

Remove the service worker, check https://vite-pwa-org.netlify.app/examples/#how-to-run-examples-projects, you have instructions to remove it and the storage.

When running the app with PWA dev options enabled, use private browsing with a chromium browser and so when closing the window the sw and the storage will be removed.

[Ayodeji Alarape]

This worked for me after disabling devOptions 👍🏾