Angular 6 PWA 504 error in Chrome. Base href problem?

Question

I've stumbled on a weird error when I'm trying to serve my Angular app on IIS and I cant seem to solve it. When I'm trying to access my PWA offline (in Chrome), a HTTP 504 error appears.

The setup is simple: < 5 min

ng new pwaDemo
cd in to app and ng add @angular/pwa
in app.module.ts add . to ServiceWorkerModule so the app can find ngsw-worker.js ServiceWorkerModule.register('./ngsw-worker.js', { enabled: environment.production })
in manifest change scope and start_url: "scope": "/pwaDemo/", "start_url": "/pwaDemo/",
build the app to prod with ng build --prod --base-href /pwaDemo/
add a application to your IIS with unmanaged code and pointing to C:\Users\myUsername\Desktop\myAngularApp\pwaDemo\dist\pwaDemo
navigate to https://computername/pwaDemo/ with Chrome
service worker is downloaded and manifest all fine and dandy
Make Chrome go offline (F12 -> Application -> Service Workers -> Offline)
Reload page: -> 504 error.

I cant seem to figure out what is wrong. When I'm trying in Firefox everything works (even in offline mode).

When I'm using http-server to host the app (without --base href) everything works in Chrome (including offline).

Can anybody please help? I'm really stuck.

Version:

Angular CLI: 6.0.8

Can you try with latest versions for cli, Angular, etc.? Also, what does https://computername/pwaDemo/ngsw/state show? — gkalpak
@gkalpak Tried with Angular CLI: 7.0.5. Same problem. /ngsw/state gives 404 — wallef
I tried with http-server and it seems to work fine. If /ngsw/state gives 404, it means that the SW is not serving requests. It sounds like an IIS configuration (or SSL certificate) issue. — gkalpak
@gkalpak do you have any idea how I can test it? This seems like a quite simple setup but I haven't find anyone else that has this problem. — wallef

Sean Sean · Accepted Answer · 2020-08-05T12:28:29

Check if IIS is serving your manifest.webmanifest file correctly (check your network tab and see if that file is being downloaded when you first visit the site).

If not, you need to configure a MIME type for .webmanifest in IIS - use application/manifest+json.

Alternatively, you can follow this option and not use the web.config at all: https://stackoverflow.com/a/53266152/214980

What also fixed it for me, was having the manifest.appmanifest file in the ClientApp\src folder, but then also including it in the angular.json file so it gets copied correctly during build. In my case this included an assets folder too, something like:

"architect": {
    "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
            "assets": [ "src/assets", "src/manifest.webmanifest" ],

Angular 6 PWA 504 error in Chrome. Base href problem?

1 Answers