0

I am experiencing the same, or a very similar, problem as was reported here by Linwe: Angular : service worker configuration (no answer at the time of this question).

I created a new project using the Angular CLI, and then added support for service workers, following the steps set out here: https://angular.io/guide/service-worker-getting-started. I changed the content of the site to say nothing more than “This is the App Component,” so it is extremely simple, with no functionality. I'm just trying to test service workers alone.

The service worker technology uses a file called “manifest.webmanifest”, which had no MIME type defined in my local IIS, so I added it (application/manifest+json). But even then my web browser (Chrome) could not always find the file (and was getting the index.html page instead on the fetch request). But, according to manifest.json vs manifest.webmanifest, there is nothing magical in the name, so I added ".json" to the end of the file, and modified references to work with that name instead. That seems to be working fine.

Running in Visual Studio 2019 (using IIS Express, and handling requests on https://localhost:44303/), the service worker was never created at all. When I went to the Application tab of Chrome's DevTools, and looked for service workers, I saw nothing.

But when I deployed the site to my local IIS, I could see (either under http or under https) that the service worker was created and running: enter image description here

And when, running online, I could see that content was being served from the service worker (like Linwe). But when I went to the Network tab and put the browser offline, I got the same error as if I were not using service workers at all:

enter image description here

In the network tab, I see a failed fetch command (expected??), but I'm not seeing any other errors: enter image description here

I am only moving to service workers for this (fairly simple) application because Chrome is discontinuing support for AppCache in April. I don't know what alternative there is if the service workers won't work in Chrome...

Any help would be most greatly appreciated.

(I note that Linwe indicated his issue was only on browsers running on Windows - he said that browsers running on a MAC were OK. I don't have a MAC to verify it, but that comment suggests something specific to Windows.)

UPDATE: I started over, following exactly the steps set out here: https://angular.io/guide/service-worker-getting-started. Then I ran it using http-server, and everything worked perfectly. I took it offline, and refreshed the page, and saw the cached content.

Then I took that complete project and copied all of the files into the ClientApp folder of a Visual Studio 2019 Angular project (after first deleting all files from that folder). Then I published it to my local IIS, and got the same problem as reported previously. The service worker is created and I can see it, but when going offline I don't get any cached content. The only change I made was to the outputPath in my angular.json file, because I wanted it deployed to the root of the dist directory, not to a subfolder beneath the dist directory (where IIS could not find it).

Then, to further experiment, I copied all the files from the dist/[project name] folder in the original application created via the CLI and placed them at the root of the application folder in IIS (after first deleting all other files). I changed the base href of the index.html file to match the application name, but made no other changes. And, again, I see the same problem as originally reported - I see the service worker, but cached content is not served when offline. (This happens whether I hit the IIS site via http or https - makes no difference.)

So, it seems to me that the exact same files which run and function correctly when I am serving them with http-server do not work correctly when my server is IIS (this is on a Windows 10 professional PC).

Where do I go from here???

JRS
  • 569
  • 9
  • 26

1 Answers1

1

OK, it turns out that this has nothing to do with IIS, but instead the root of the problem has to do with the scope of the service worker registration. The node server just works with localhost on some port. But in IIS, the code is deployed to an application, not just to localhost (e.g., http://localhost/myapplication/).

The angular solution has to be built for this, which can be done by passing a baseHref parameter to the build command:

ng build --prod --baseHref=/myapplication/

After hours of digging, I found out about this here: https://github.com/angular/angular/issues/29163.

Once you do that, you can push the generated files to the folder the application is pointing to, and it works.

Now, if you want to deploy the same code to some other application, with a different name, it's not going to work. You cannot just change the base href value of the index.html file - you need to do a new build with the application name you are going to deploy to. This is not a problem in my particular situation, but I can see it being a nightmare if somebody wants the same code deployed to lots of different applications each having a different name, i.e. customer1AppInstance, customer2AppInstance, etc. I would have expected it to be sufficient just to change the base href in the index.html file, but not so - the application name is apparently baked into the generated javascript.

Anyway, it works.

JRS
  • 569
  • 9
  • 26