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

[rudolfbyker]

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.

[dej10]

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 ?

[userquin]

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.

[dej10]

Thanks for taking a look

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

[userquin]

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.

[dej10]

This worked for me after disabling devOptions 👍🏾