IIS 子文件夹中的 Angular PWA 无法脱机工作

Question

When I publish angular pwa application to subfolder in IIS, pwa application not work in offline.

ng build --prod --baseHref=/subfolder/ does not help.

I use https on web site.

How exactly reconfigure angular pwa application to work offline if application is not published to root of IIS but to subfolder of IIS?

Does anybody have functional demo of angular pwa application working offline after publishing to IIS subfolder?

Answer 1

I know I am very late on this, I have also struggled on this and finally followed these steps to solve the issue:

1. In manifest.JSON file, set "scope": "." and "start_url": "./" . This indicate that you are using sub-directory.

2. Then build the project using CLI command ng build --prod --baseHref=/Your_sub_directory_name/

3. And finally paste the dist folder content to your pointed Your_sub_directory_name IIS location.

4. Then just refresh page and wait to register the service worker, you can check this in application tab of chrome's developer tool. Once service worker is reigstered, just switch to offline mode and you'll the page will work fine in offline.

Answer 2

The --baseHref=/mypath/ for building from Vinod led me the way, thanks!! Some more observations:

• Angular's service-worker seems to be case sensitive on URLs: If in your ngsw.json you have /MyPath/index.html and someone runs the page typing mysite.com/mypath the service worker fails. Nasty! As per the spec the path of a URL is case-sensitive, but well...

• If you use IIS: Just stopping a website will NOT simulate an offline situation for the Angular service-worker. You would have to stop the entire IIS.

• From my observation the manifest does not matter for the service worker / offline functionality. You can comment it out in index.html. Required for install only. Vinod's values worked for that.

Useful steps for newbies to follow what's going on:

1. After a build check ngsw.json in dist. All files should be prefixed with /mypath/.

2. After loading in Chrome check DevTools/Application/Cache storage. The entry "ngsw:/...:assets:app:cache" should contain the files from ngsw.json WITH /mypath/ prefix.

3. Have DevTool/Network open when hitting F5 too see WHERE files come from. For files to work offline a refresh should show (ServiceWorker) in the size column.

I found that putting baseHref in angular.json also works in this situation. Makes sense next to outputPath.

  "outputPath": "D:/somewhere/WwwRoot/full/public/path",
  "baseHref":"/full/public/path/",

Answer 3

Issue that i faced was, After deployment on Azure, Angular PWA service worker does not fetch the api response from cache in Offline mode, and also the manifest created was showing error in deployed version, whereas in localhost it was all working perfect. the main issue for me was: By default, IIS does not serve any files that does not have a MIME map associated with it in its (IIS) core settings. To address this challenge, you will need to map the .webmanifest file extension to its appropriate MIME type. For this you need to add following to web.config file:

        <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
            <mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
        </staticContent>

this helps azure to understand our manifest.webmanifest file which otherwise it will not be able to. After this it was able to detect manifest.webmanifest file which solved my both issues, Fetching the response from cache in Offline mode, And also with manifest file now my Angular PWA app was installable with app icon and all other features. You can also refer to my question to get rest of details on ngsw-config.json file and full code for web.config file etc, After deployment Angular PWA service worker does not fetch the api response from cache in Offline mode