How to make Angular Universal and PWA work together?

Question

I have a SSR Angular app which I am trying to transform into a PWA. I want it to be server-side rendered for SEO and for the "fast first rendering" that it provides.

The PWA mode works fine when combined with SSR, but once the app is loaded, when we refresh it, the client index HTML file is loaded instead of the server-side rendered page.

I have dug into the code of ngsw-worker.js and I saw this:

// Next, check if this is a navigation request for a route. Detect circular
// navigations by checking if the request URL is the same as the index URL.
if (req.url !== this.manifest.index && this.isNavigationRequest(req)) {
    // This was a navigation request. Re-enter `handleFetch` with a request for
    // the URL.
    return this.handleFetch(this.adapter.newRequest(this.manifest.index), context);
}

I have no control over this file since it's from the framework and not exposed to developers. Did anybody find a solution or workaround for this?

Answer 1

I have found a working solution, the navigationUrls property of ngsw-config.json contains a list of navigation URLs included or excluded (with an exclamation mark) like explained in the documentation.

Then I configured it like this:

"navigationUrls": [
    "!/**"
]

This way, none of the URLs redirect to index.html and the server-side rendered app comes into play when the app is first requested (or refreshed), whatever the URL is.

To go further, the three kinds of URLs managed by the service worker are:

• Non-navigation URLs: static files cached by the service worker and listed in the generated ngsw.json file with their corresponding hashes
• Navigation URLs: redirected to index.html by default, forwarded to the server if the "!/**" configuration is used
• GET requests to the backend: forwarded to the backend

In order to distinguish a GET XMLHttpRequest from a navigation request, the service worker uses the Request.mode property and the Accept header that contains text/html when navigating and application/json, text/plain, */* when requesting the backend.

Edit:

This is actually not a good practice to do that for two reasons:

• Depending on the network quality, there is no guarantee that the server-side version will render faster than the cached browser version
• It breaks the "update in background" mechanism. Indeed, the server-side rendered app will always refer to the latest versions of the JavaScript files

For more details on this, please take a look at the Angular's team member answer to my feature request: https://github.com/angular/angular/issues/30861