`navigateFallbackAllowlist` not working

[jeannen]

Hi,

I'm trying to set up my app as PWA. Only a part of the app is PWA (/dashboard, and technically /auth)

But as soon as I install the module in Nuxt, all my pages redirect to "/" no matter what config I try to add. I've tried to add workbox.navigateFallback, navigateFallbackAllowlist, and navigateFallbackAllowlist, but none of them work no matter what I do, it always ends up with all pages redirecting to /

For example:

• I open my /dasboard page, I get redirected to /
• I have an iframe embedding in the homepage (pointing to a page /embed/chat of my nuxt app), it shows the homepage instead of the embedding

Here is my config inside nuxt.config.ts:

// ...
pwa: {
        registerType: 'autoUpdate',
        manifest: {
            name: 'Heyo',
            short_name: 'Heyo',
            description: 'The human-first livechat widget',
            start_url: '/dashboard',
            display: 'standalone',
            theme_color: '#09090b',
            background_color: '#09090b',
            icons: [
                { src: '/pwa/icon-48.png', sizes: '48x48', type: 'image/png' },
                { src: '/pwa/icon-72.png', sizes: '72x72', type: 'image/png' },
                { src: '/pwa/icon-96.png', sizes: '96x96', type: 'image/png' },
                { src: '/pwa/icon-144.png', sizes: '144x144', type: 'image/png' },
                { src: '/pwa/icon-192.png', sizes: '192x192', type: 'image/png' },
                { src: '/pwa/icon-512.png', sizes: '512x512', type: 'image/png' },
            ],
            screenshots: [
                {
                    src: '/pwa/screenshots/desktop-1.png',
                    sizes: '1920x1080',
                    type: 'image/png',
                    form_factor: 'wide',
                    label: 'Desktop view',
                },
           
            ],
           
        },
        // workbox: { // Tried multiple variants of allowlist/denylist with regex/undefined, nothing works
        //     navigateFallback: undefined,
        //     navigateFallbackAllowlist: undefined,
        //     navigateFallbackDenylist: undefined,
        // },

        devOptions: {
            enabled: true,
            type: 'module',
        },
    },

I have <VitePwaManifest /> in my app.vue file (Nuxt 4)

What am I doing wrong?

[userquin]

navigateFallbackAllowlist: [/^\/dashboard$/, /^\/auth$/] didn't work?

You should also add /^\/$/ to the list.

are you prerendering the rest of pages? If so, you also need to exclude their html files via gobIgnores

[jeannen]

navigateFallbackAllowlist: [/^\/dashboard$/, /^\/auth$/] didn't work?

You should also add /^\/$/ to the list.

are you prerendering the rest of pages? If so, you also need to exclude their html files via gobIgnores

Will try with this. And I'm not pre-rendering any page, I use the PWA mainly to have a quick desktop shortcut