2

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?

bmi
  • 652
  • 2
  • 10
  • 17

4 Answers4

7

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.

vndpal
  • 697
  • 6
  • 20
  • Yes, it works - thx. Should by as part of pwa docs. And - I have to add manifest.webmanifest into MIME types on IIS - see https://stackoverflow.com/questions/49566446/how-can-i-have-iis-properly-serve-webmanifest-files-on-my-web-site – bmi Dec 19 '19 at 13:05
  • happy to help and thanks for sharing manifest MIME type settings, these are important when someone dealing with IIS. – vndpal Dec 19 '19 at 13:24
  • I'm still unable to test this on local IIS. I'm using Angular 9 and the PWA works fine when I serve the SSR version (npm run serve:ssr). the project is hosted on local IIS 10 on Windows 10 and everything works fine except the service worker is not registered. my guess is a valid SSL certificate is required. if that's the case, how come the SSR version works on HTTP using express-engine? – Nexus Apr 14 '20 at 10:51
1

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/",
AndreasS
  • 315
  • 3
  • 12
0

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.

miken32
  • 42,008
  • 16
  • 111
  • 154
ASR
  • 311
  • 2
  • 14
0

For Angular v10.24.0 I did the following:

  1. ng build --prod

  2. Add a new website on IIS

  3. Copy all the files to the website folder

  4. Add the MIME Type for the newly added website.

    File name extension: .webmanifest

    MIME type: application/manifest+json

enter image description here

I did not change manifest.json or baseHREF. Everything worked as expected after adding MIME type.

Please refer to How to add MIME type

Syed Nasir Abbas
  • 1,722
  • 17
  • 11