Always show 404 page on all pages except root

[zoxon]

All links no longer work
After clicking on any link if developer console closed I see a 404 page, if open noting happens

My config

AstroPWA({
  mode: 'development',
  base: '/',
  scope: '/',
  registerType: 'autoUpdate',
  manifest,
  includeAssets: ['**/favicons/*.{png,svg,ico,xml}'],
  workbox: {
    navigateFallback: '/404',
    globPatterns: ['**/*.{css,js,html,svg,png,ico,txt}'],
  },
  devOptions: {
    enabled: true,
    navigateFallbackAllowlist: [/^\/404$/],
  },
}),

Click on /help/ link

[userquin]

@zoxon weird, can you provide a minimal repro? I'll check it later...

[userquin]

@zoxon tested with latest Astro version and it is working properly

[zoxon]

@userquin I tried to create a minimal reproduction, but without success. Everything works as expected, not sure what the problem is.

Do you have any ideas or ways of debugging?

[zoxon]

If change config to navigateFallback: null and remove html from globPatterns

I get the error "Uncaught (in promise) non-precached-url: createHandlerBoundToURL('/') was called, but that URL is not precached. Please pass in a URL that is precached instead." and stay on the same page.

But it works when developer console is closed

[userquin]

@zoxon can you check #16 (comment) ?

[zoxon]

We decided not to use this in production until it worked stably. In any case, we're not using SSR yet

[Clarkkkk]

I encounter the similar problem. Here is the reproduction.

npm run dev seems ok.

But in npm run build and npm run preview, all routes point to the root html.

It seems in Astro the navigateFallback should not be set , which is for single page app according to the workbox doc.

I patch the package to disable the navigateFallback, and the issue is gone.

// src/index.ts
if (useWorkbox.navigateFallback === undefined)
      useWorkbox.navigateFallback = config.base ?? config.vite?.base ?? '/'

// astro.config.ts
// ...
workbox: {
  // ...
  navigateFallback: null
}

[userquin]

@Clarkkkk if you set the fallback to null, offline will not work.

I'll try to add similar patch to this added to Vitepress integration ( when I have time ): https://github.com/vite-pwa/vitepress/pull/23/files#diff-616b1f25a229de030f09926b82dafdc6aa0c93a00bd851f2b1f41796570fd629

[userquin]

@Clarkkkk it seems a problem with Astro 3, the pwa integration hook being called before Astro builds the dist folder (check there is a workbox-build warning about regex):

[Clarkkkk]

@userquin I notice that too. But it turns out that the plugin will be called twice, before and after the generation of html files. And the generated sw.js contains the correct precacheAndRoute.

[userquin]

@Clarkkkk I don't think so, first [build] at the bottom should be before the workbox warning:

[userquin]

check also the sitemap, there is no entry with last modified, only the paths

[userquin]

your Base.astro cannot resolve /src/pwa.ts, changing the src to relative:

[Clarkkkk]

@Clarkkkk I don't think so, first [build] at the bottom should be before the workbox warning:

I am not familiar with the whole process. It is called twice in my test, for example using something like globPatterns: ["**/*.{js,css}", "**/*.impossible"], and it outputs with two warnings.

I notice that you're using globPatterns: "{**/*.{svg,jpg,js,css,html}", which should be globPatterns: "**/*.{svg,jpg,js,css,html}", is that relavant?

[Clarkkkk]

check also the sitemap, there is no entry with last modified, only the paths

Thank you, I simply use a start template, didn't check that.

your Base.astro cannot resolve /src/pwa.ts, changing the src to relative:

I copy those lines from the doc, and it works on my windows, but relative path is better.

[userquin]

If you add N entries to the glob patterns array, you will get N logs, 1 per entry. Astro generates the dist folder after the astro:build:done hook or in paralel (first [buid] log at bottom after the warnings).