6

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
wallef
  • 487
  • 3
  • 11
  • 1
    Can you try with latest versions for cli, Angular, etc.? Also, what does `https://computername/pwaDemo/ngsw/state` show? – gkalpak Nov 13 '18 at 16:30
  • @gkalpak Tried with Angular CLI: 7.0.5. Same problem. /ngsw/state gives 404 – wallef Nov 13 '18 at 16:46
  • 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 Nov 13 '18 at 17:10
  • @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 Nov 13 '18 at 17:23
  • Hard to tell without being able to reproduce. I would ensure the SSL certificate is valid (for the domain used) according to Chrome (you can click on the lock icon in the address bar for more info) and try to find out if the SW is installed (and if not why). `DevTools > Application > Service Workers` and `chrome://serviceworker-internals/` may have useful info. – gkalpak Nov 13 '18 at 18:37
  • @gkalpak thanks, I will try tomorrow. There's no problem when I'm looking at the lock icon. I know I'm using a self signed cert. Is that a problem? Firefox doesn't like self signed, so I made a exception for my site and maybe that's why it's working on Firefox? – wallef Nov 13 '18 at 19:58
  • Could be. HTTPS is a prerequisite for SWs and maybe Chrome does not trust your self-signed certificate enough to install the SW. Browsers make an exception for localhost, allowing SW over HTTP (for development purposes). Try serving over HTTP on `localhost` to see if the problem persists. – gkalpak Nov 13 '18 at 20:06
  • @gkalpak Well it can't be the certificate, becuase the problem still exists on our development server where we have a certificate from Terena. When I'm in `chrome://serviceworker-internals/` I find my service worker and it looks OK. – wallef Nov 14 '18 at 07:02
  • Info from `chrome://serviceworker-internals/` `Scope: https://computername/pwaDemo/ Registration ID: 354 Navigation preload enabled: false Navigation preload header length: 4 Active worker: Installation Status: ACTIVATED Running Status: RUNNING Fetch handler existence: EXISTS Script: https://computername/pwaDemo/ngsw-worker.js Version ID: 6226 Renderer process ID: 41184 Renderer thread ID: 13976 DevTools agent route ID: 15` – wallef Nov 14 '18 at 07:04
  • No idea then :/ Happy to take a look if there is a publicly accessible instance that has the issue. – gkalpak Nov 14 '18 at 11:35
  • @gkalpak Is it OK to contact you on your mail? – wallef Nov 14 '18 at 12:53
  • @gkalpak I can mail you the url to our test-site. It seems to be related to the browser!? Everything is offline testing: It works on Firefox (Both mobile and desktop).It doesn't work on Android phone (In Chrome or downloaded PWA) It works on iPhone on downloaded PWA. It doesn't work on Safari (Desktop or iPhone). – wallef Nov 14 '18 at 15:01
  • feel free to contact me via e-mail. – gkalpak Nov 14 '18 at 17:05
  • @gkalpak great! thanks alot, I've sent you an mail :) – wallef Nov 15 '18 at 10:10
  • 2
    did you solve this?, if yes please add an answer – Alessandro Santamaria Oct 17 '19 at 12:14
  • Hi, Did Anyone was able to find a solution to this problem? – Pawanpreet Singh Mar 04 '21 at 12:44

1 Answers1

0

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" ],
Sean
  • 14,359
  • 13
  • 74
  • 124