title: PWA swupdate.available is triggered only on localhost. Doesn’t work when deployed with custom base href using nginx reverse proxy [Angular 9]
body: <p>I have hosted an angular app converted to PWA on nginx reverse proxy server.</p>
  <p>There are multiple other angular apps hosted as follows:</p>
  <pre><code>https://domain.name/angularApp1
  https://domain.name/angularApp2
  https://domain.name/angularApp3
  https://domain.name/angularPWA (my app)
  </code></pre>
  <p>I see that the angularPWA has the service worker activated and running in application tab of the inspection window.</p>
  <p><strong>However, swupdate.available observable is never triggered.</strong></p>
  <p>Below are the following code changes:</p>
  <p>Added service worker with ng add @angular/pwa</p>
  <p>Angular CLI: 9.1.7
  &quot;@angular/service-worker&quot;: &quot;~9.1.3&quot;,
  Index.html is updated with <code>&lt;base href=“/angularPWA/”&gt;</code></p>
  <p>Updated code as suggested <a href="https://github.com/angular/angular-cli/issues/8515#issuecomment-486017106" rel="noreferrer">here</a> but the issue is not yet resolved.</p>
  <p>I also got a warning <em>no matching service worker detected</em> in application -&gt; mainfest in chrome dev tools.</p>
  <p>Manifest.webmanifest:</p>
  <pre><code>&quot;name&quot;: “angular-pwa”,
    &quot;short_name&quot;: &quot;angular-pwa&quot;,
    &quot;theme_color&quot;: &quot;#1976d2&quot;,
    &quot;background_color&quot;: &quot;#fafafa&quot;,
    &quot;display&quot;: &quot;standalone&quot;,
    &quot;scope&quot;: &quot;/&quot;,
    &quot;start_url&quot;: “/angularPwa/“,
  </code></pre>
  <p>App.module.ts:</p>
  <pre><code>Imports:[ServiceWorkerModule.register('./ngsw-worker.js', {
        enabled: environment.production,
      }),
  ]
  </code></pre>
  <p>Main.ts:</p>
  <pre><code>platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .then(() =&gt; {
      if ('serviceWorker' in navigator &amp;&amp; environment.production) {
        navigator.serviceWorker.register(‘./ngsw-worker.js');
      }
    })
    .catch((err) =&gt; console.error(err));
  </code></pre>
  <p>App.component.ts:</p>
  <pre><code>Construtor(public pwaUpdate: PwaService)     
  {
   this.pwaUpdate.checkForUpdates();
  }
  </code></pre>
  <p>PWA service:</p>
  <pre><code>@Injectable({
    providedIn: 'root',
  })
  export class PwaService {
    promptEvent;
    updateAvailabe = false;
  
    constructor(private swUpdate: SwUpdate, private appRef: ApplicationRef) {
      window.addEventListener('beforeinstallprompt', (event) =&gt; {
        this.promptEvent = event;
      });
      this.checkUpdate();
    }
  
    checkForUpdates() {
      this.swUpdate.available.subscribe((event) =&gt; {
        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(() =&gt; document.location.reload());
      }
    }
  
    checkUpdate() {
      this.appRef.isStable.subscribe((isStable) =&gt; {
        if (isStable) {
          const timeInterval = interval(8 * 60 * 60 * 1000);
          // const timeInterval = interval(20000);
  
          timeInterval.subscribe(() =&gt; {
            this.swUpdate.checkForUpdate().then(() =&gt; console.log('checked'));
          });
        }
      });
    }
  }
  </code></pre>