astro: Trailing slash resolves in 404

Hi, The pwa works great but I would like to know how to redirect /blog/post/ to blog/post trailing slashes in the url are not resolving.

It is a static build

build: {
    format: "file"
  },

AstroPWA({
      mode: "production",
      base: "/",
      scope: "/",
      includeAssets: [`icons/${process.env.THEME}/favicon.svg`],
      registerType: "autoUpdate",
      manifest: manifest,
      workbox: {
        navigateFallback: "/404",
        globPatterns: ["**/*.{js,css,html,txt,json,svg,woff,woff2,ico,xml}"],
      },
      devOptions: {
        enabled: false,
        navigateFallbackAllowlist: [/^\/404$/],
      },
    }),

About this issue

Original URL
State: closed
Created 9 months ago
Comments: 31 (18 by maintainers)

Most upvoted comments

@userquin thanks for the release! I am now using the new flag and it works 😃

felixroos on Nov 1, 2023

You mean because an opt-in flag won’t break existing setups that rely on the old behavior?

YES (I’ll check it next week, maybe you can update the PR, I need to rest…)

I can see what I can do, please give yourself some rest. I can also wait or use the tgz

felixroos on Oct 22, 2023

I’m not sure as I have too little knowledge of this project to give my opinion on it. Of course, having less config options is always a plus, but maybe the old behavior is sometimes desired, not sure. From my perspective this looks more like a bug that should probably be fixed by default, but maybe it introduces some regression. Maybe start with the feature flag and test it with a handful of existing projects to see if it has downsides? Either way, I would be very happy to be able to use this as it will finally fix this annoying bug I was having for some time now.

felixroos on Oct 22, 2023

done: https://felixroos.github.io/astro-test-pwa/ works!

felixroos on Oct 22, 2023

https://felixroos.github.io/astro-test-pwa/ now deployed with autoUpdate + menu

felixroos on Oct 22, 2023

IIRC there is a directoryIndex and cleanUrl in workbox option: https://developer.chrome.com/docs/workbox/modules/workbox-precaching/#directory-index

EDIT: maybe both options wth another names, the link is about using the workbox modules.

On first sight that sounds like it would help in this case!

I Will try to check your repro tmr.

Thanks!

For completeness sake, I’ve now done a full reproduction that shows how adding @vite-pwa/astro to the mix results in wrong caching behavior:

https://felixroos.github.io/astro-test-pwa/ ✅ works
https://felixroos.github.io/astro-test-pwa/test ✅ works, redirects to test/ on hard refresh (!)
https://felixroos.github.io/astro-test-pwa/test/ ❌ loads index.astro, works only with hard refresh

felixroos on Oct 20, 2023

I Will try to check your repro tmr.

userquin on Oct 20, 2023

I have done a quick test repro with a simple astro project that builds using build.format: 'directory': https://github.com/felixroos/astro-test/

Both of these urls work:

https://felixroos.github.io/astro-test/test/
https://felixroos.github.io/astro-test/test (redirects to above url)

So it seems the problem is really service worker related…

felixroos on Oct 20, 2023

Just found: https://github.com/slorber/trailing-slash-guide which explains the behavior of github pages for different links, notably:

/file - ✅ /file/ - 💢 404 /folder - ➡️ /folder/ /folder/ - ✅

This further confirms that build.format: 'file' will cause a 404 with a trailing slash. Without using a service worker, it looks like it would work with build.format: 'directory', as it will just do a redirect. So is suspect that the service worker will interpret urls without trailing slashes as a file and for some reason serve the root file.

felixroos on Oct 20, 2023