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

user_4329861 0
Viewed 4658

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
service-worker progressive-web-apps angular google-chrome iis
1 Answers

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" ],
user_2149800
Related