angular: Service worker registration failed in Safari angular 8

@H--o-l Thanks for your thoughtful reply. Yes you are right. We have found the issue and resolved it and initially it felt like a regression but after doing intense debugging it appears to have been an error occurring due to some library updates on Server Side.

It was indeed a bug that was only showing up in Safari when the ServiceWorker was trying to send a POST request to server and being denied access. Everything was working fine on Chrome and Firefox. Safari was adding Pragma and Cache-control headers with the service worker request which were being denied on the server because they weren’t in the allowed headers list. I cannot seem to understand why we are unable to reproduce this error using Postman. Anyways - Yes, what appeared to have been a regression was NOT actually a regression (but it was indeed quite weird issue to debug)

@kara Service worker using Safari is not working in Angular 8.2.0 anymore. The POST requests are giving Gateway 504 errors.

UPDATE: This is the error i am getting

[Error] Fetch API cannot load MY_API_URL due to access control checks.
[Error] Failed to load resource: Request header field Cache-Control is not allowed by Access-Control-Allow-Headers.

2nd UPDATE: Turns out the error was coming in Safari due to some server side configuration. Its not a regression in Angular 8.2.0

Wow, that’s awesome. Great sleuthing, @H--o-l 👏 It seems indeed to be the case that Safari chokes when the second argument is undefined (or even ''), even though according to MDN:

A USVString representing the base URL to use in case url is a relative URL. If not specified, it defaults to ''.

But it is fine, when the second argument is not provided at all:

new URL('https://angular.io/')  // OK
new URL('https://angular.io/', undefined)  // TypeError

So, I guess we could work-around that by changing Adapter#parseUrl() like this:

 parseUrl(url: string, relativeTo?: string): {origin: string, path: string, search: string} {
-  const parsed = new URL(url, relativeTo);
+  const parsed = !relativeTo ? new URL(url) : new URL(url, relativeTo);
   return {origin: parsed.origin, path: parsed.pathname, search: parsed.search};
 }

@H--o-l, would you like to submit a PR with that fix (after verifying that it does indeed work 😁)?

Could you try (a) to replace / with _ and (2) log more info about the error?

Ok, I change / and _ and log all the /ngsw/state trace :

NGSW Debug Info:

Driver state: SAFE_MODE (Initialization failed due to error: Type error
[native code]
parseUrl@https://toto/ngsw-worker.js:51:35
AssetGroup@https://toto/ngsw-worker.js:360:48
PrefetchAssetGroup
https://toto/ngsw-worker.js:1377:54
map@[native code]
AppVersion@https://toto/ngsw-worker.js:1370:64
https://toto/ngsw-worker.js:2234:63
forEach@[native code]
https://toto/ngsw-worker.js:2229:47
generatorResume@[native code]
fulfilled@https://toto/ngsw-worker.js:1786:66
promiseReactionJob@[native code])
Latest manifest hash: none
Last update check: 29s762u



=== Idle Task Queue ===
Last update tick: 5s245u
Last update run: 14s696u
Task queue:


Debug log:

Can you tell me if https://github.com/angular/angular/issues/31061#issuecomment-503631576 seems like a good lead to you ?

No, I tested it in new project with enabled service workers and I faced same issue. But safari loads both module and nomodule scripts.