How to return 404 in a PWA

I have an Ionic 5 / Angular 9 app. I want to release it as Android App and as PWA. For PWA, I need a HTTP404 statuscode return when a route is not set, otherwise the search engines do not know, that the page does not exist. I don’t use Angular Universal, and I don`t want to use it.

How is it possible to return 404 status?

Does nobody have an answer to that? Everyone who releases an Ionic App as PWA does have to deal with this problem, or do I see something wrong here?

For lack of better.

Without universal, the app is a SPA, which means all routes are rewritten so the client side router can handle. So the 404 is related to your route rewrites (in angular) that is. So you may want to check how angular handles unkown routes.

This won’t help you with SEO and the likes, as for this you need server side rendering as per angular universal.

So I do believe your assumption could be off, which imho is more related to your choice of angular and not necessarily PWA technology (e.g. service worker etc).

Ok, thank you. I found this video:

This google developer says, that it`s possible to just use javascript redirects. The Google Bot recognizes this.

Good stuff and nice video

Important nuance indeed is that a 404 is a code to be generated by the server which may never occur in PWAs as routes are (generally?) always rewritten to / for the angular router to pickup

At least, when I deploy to Firebase hosting I enable those rewrites

I wonder btw how a search engine could ask for an unknown route. What actually generates an unknown route it would like to follow? Is it your app?

I think that how and where you’re hosting your PWA is relevant to this discussion. For example, I host mine with nginx and deliberately do what @Tommertom is talking about:

    location / {
        index index.html;
        error_page 404 =200 /index.html;
    }

    location index.html {
        add_header Cache-Control 'no-store';
    }

I suppose you could choose to handle things differently, but, (again as @Tommertom describes), nginx’s idea of “does this URL map to an existing resource?” is generally quite different from “would the webapp like me to just feed said URL to it?”, because a single “resource” (index.html) from nginx’s viewpoint is intended to field all sorts of https://coolapp.hosting.com/orders/add?sku=abc123&quantity=4 requests.