0

Basically I have the same issue as this unanswered question describes.

When I am serving our PWA with http-server, everything seems to run fine, but when I deploy it to our live environment which is a Windows Server with IIS it only runs fine online. When I go offline, I cannot refresh the page. The service worker returns status 504 and I can't figure out why.

I'm running out of ideas how to troubleshoot.

Are there any useful guides how to correctly setup Angular apps on IIS? (specifically PWAs with offline capability)

Does anybody have ideas what I could check e.g. in my HTTP headers?

E4est
  • 65
  • 1
  • 7
  • This might solve your issue:- https://stackoverflow.com/a/44600609/1289713. Basically angular is a SPA application and you need to handle the routing for that in IIS. – Vimal Patel Jun 09 '21 at 16:41
  • 1
    You can use [failed request tracking](https://learn.microsoft.com/en-us/iis/extensions/url-rewrite-module/using-failed-request-tracing-to-trace-rewrite-rules) to view detailed error information. – samwu Jun 10 '21 at 06:41
  • @VimalPatel Thanks for your input. I tried to change the rewrite rule in my web.config from rewriting to "/index.html" to just "/", everything else was the same as in the link. Unfortunately this didn't help either. – E4est Jun 10 '21 at 09:33
  • @samwu Thank you, I set up the tracking and am going to watch what happens. – E4est Jun 10 '21 at 09:34
  • Did you get error messages from frt? – samwu Jun 11 '21 at 01:14
  • @samwu Unfortunately no, nothing was tracked at all. But it looks like I was able to resolve the issue. – E4est Jun 11 '21 at 08:45

1 Answers1

0

So apparently my issue didn't have anything to do with my IIS configuration. I still can't explain why it worked on http-server, but now I got it working on IIS, too.

After a lot of research and unsuccessful experiments, I tried to observe, what exactly ngsw-worker.js does that leads to this error. After putting some breakpoints and finding new keywords to search for I stumbled across this GitHub issue which led me to this much discussed issue. In one of his comments the user jackkoppa mentioned his StackOverflow Question where he found a workaround to fix such an issue.

Basically, I just added his script to our project and added the command for it to our project.json.

Here are the steps he describes:

To use the workaround: (Angular 5, tested w/ Angular 5.2.1)

  1. npm install replace-in-file --save-dev
  2. Include this script in your app, e.g. at build/fix-sw.js
  3. In your package.json:
"scripts": {
    ...
    "sw-build": "ng build --prod && node build/fix-sw",   
    "sw-build-live": ng build --prod --base-href https://your-url.com/ && node build/fix-sw"
    ...
}
  1. To run locally
npm run sw-build
cd dist
http-server -p 8080
  1. And to prepare a build for your live URL, before sending to a server (e.g. with angular-cli-ghpages) npm run
sw-build-live

After adding the script, my Angular app finally behaves as intended.

We don't use base-href in our case, so all it does for us, is comment out every time the service worker would write EXISTING_CLIENTS_ONLY to its state.

Dharman
  • 30,962
  • 25
  • 85
  • 135
E4est
  • 65
  • 1
  • 7