PWA swupdate.available is triggered only on localhost. Doesn’t work when deployed with custom base href using nginx reverse proxy [Angular 9]

I have hosted an angular app converted to PWA on nginx reverse proxy server.

There are multiple other angular apps hosted as follows:

https://domain.name/angularApp1
https://domain.name/angularApp2
https://domain.name/angularApp3
https://domain.name/angularPWA (my app)

I see that the angularPWA has the service worker activated and running in application tab of the inspection window.

However, swupdate.available observable is never triggered.

Below are the following code changes:

Added service worker with ng add @angular/pwa

Angular CLI: 9.1.7 "@angular/service-worker": "~9.1.3", Index.html is updated with <base href=“/angularPWA/”>

Updated code as suggested here but the issue is not yet resolved.

I also got a warning no matching service worker detected in application -> mainfest in chrome dev tools.

Manifest.webmanifest:

"name": “angular-pwa”,
  "short_name": "angular-pwa",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": “/angularPwa/“,

App.module.ts:

Imports:[ServiceWorkerModule.register('./ngsw-worker.js', {
      enabled: environment.production,
    }),
]

Main.ts:

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then(() => {
    if ('serviceWorker' in navigator && environment.production) {
      navigator.serviceWorker.register(‘./ngsw-worker.js');
    }
  })
  .catch((err) => console.error(err));

App.component.ts:

Construtor(public pwaUpdate: PwaService)     
{
 this.pwaUpdate.checkForUpdates();
}

PWA service:

@Injectable({
  providedIn: 'root',
})
export class PwaService {
  promptEvent;
  updateAvailabe = false;

  constructor(private swUpdate: SwUpdate, private appRef: ApplicationRef) {
    window.addEventListener('beforeinstallprompt', (event) => {
      this.promptEvent = event;
    });
    this.checkUpdate();
  }

  checkForUpdates() {
    this.swUpdate.available.subscribe((event) => {
      console.log('swupdate available');
      this.promptUser();
    });
  }

  promptUser() {
    if (
      confirm(
        'This site has been updated with new data. Do you wish to reload the site to get the new data?'
      )
    ) {
      this.swUpdate.activateUpdate().then(() => document.location.reload());
    }
  }

  checkUpdate() {
    this.appRef.isStable.subscribe((isStable) => {
      if (isStable) {
        const timeInterval = interval(8 * 60 * 60 * 1000);
        // const timeInterval = interval(20000);

        timeInterval.subscribe(() => {
          this.swUpdate.checkForUpdate().then(() => console.log('checked'));
        });
      }
    });
  }
}