Example project renders home page on missing routes

[kelvindecosta]

Overview

When navigating to missing routes (404) within the example project, the home page (/) is rendered instead.

I've adopted almost the same configuration and service worker script for a personal project. I've noticed that the service worker even redirects server routes (+server.ts) to /.

Cause

I think that the issue lies within the following lines within the service worker script:

https://github.com/vite-pwa/sveltekit/blob/c6c34992a1cd5cec2bb58ea1ae82273c9308048c/examples/sveltekit-ts/src/prompt-sw.ts#L21-L29

When getting rid of these lines from my personal project, I no longer run into this issue.

• Missing routes render the default 404 error page
• +server.ts routes behave as expected

Note

I've also run a Lighthouse test to check that the PWA functionality isn't compromised. When previewing locally, when offline, the service worker performs as expected.

Conclusion

I would appreciate it if some more context could be added as to why these lines are required.

Thank you for your time.

[userquin]

I assume you're talking about dev server: we configure the entry point to avoid caching any resource, you're in dev mode and so the sw will intercept any request, any change made to the UI will not be updated.

[kelvindecosta]

Hey, thanks for the quick response!

I noticed that this is meant for development only, but it seems to be affecting production too.

Note To clarify what I meant about "previewing", I ran pnpm build && pnpm preview and checked the resulting local website.

Maybe it makes sense to run the following code only in development?

+  if (import.meta.env.DEV) {
 // to prevent service worker from intercepting requests in dev mode
 registerRoute(new NavigationRoute( 
   createHandlerBoundToURL('/'), 
   { allowlist }, 
 ))
+ }

[userquin]

@kelvindecosta then your app will not work when offline

EDIT: I mean, your service worker will work in both envs, createHandlerBoundToURL will allow work offline (you'll need to add some logic) to avoid chrome dinossour for example... If you're using the sw only to cache assets previous code will work (you can also remove that route from the sw).

[kelvindecosta]

Thanks for the information!

To be completely clear, the app seems to work when in offline mode, after the above change. Here's what I've done:

• pnpm build && pnpm preview
• Visit http://localhost:4173 in incognito mode
• Clear cache (including existing service worker registration)
• Reload
• Enable network throttling Offline mode
• Reload

The app seems to be working fine.

Note

I only see the dinosaur for a split second when I Hard Reload or Empty Cache and Hard Reload. It immediately loads the app from the service worker (confirmed in the Headers > General)

Even the +server.ts routes work fine.

By strictly following the example project code, the +error.svelte pages and +server.ts pages never get rendered, and are always redirected to home, by the sw.

[jasoneliu]

I'm having the same issue using generateSW #44. Is there a way to get this working with generateSW?