title: Angular Pwa not refreshing html on installed app
body: <p>I've an <strong>Angular PWA</strong> with refreshing problem.
  I have a <strong>TAB disabled</strong>.</p>
  <pre><code>&lt;nz-collapse-panel [nzActive]=&quot;false&quot; [nzDisabled]=&quot;true&quot;&gt;   
  </code></pre>
  <p>Now on the code i set this tab to <strong>enabled</strong> and build the solution and deployed on the webspace.</p>
  <pre><code>&lt;nz-collapse-panel [nzActive]=&quot;false&quot; [nzDisabled]=&quot;false&quot;&gt;  
  </code></pre>
  <p>If a go to the <strong>PWA</strong> and <strong>refresh</strong>, this Collapse <strong>remain disabled</strong>. I must reload the page more and more time and at the end, the Tab is enabled.</p>
  <p>I close and reopen the app, the tab is disabled...</p>
  <p>The data is correct and refreshed. <strong>It seem's only the HTML is using some cache that is not refreshed</strong>.</p>
  <p>The strange thing is that <strong>after reload the page more time, the TAB become enabled</strong> (so i think have update the cache) and <strong>when reopen the app</strong>, the TAB is <strong>disabled again.</strong></p>
  <p>Also the menù doesn't refresh the list. It seems only html element's are not refreshing.</p>
  <p>My configuration is with Angular 11 with Ng-Zorro</p>
  <p>P.s
  Obviously if i go on browser on Developer Tool -&gt; Application -&gt; Delete site data, the cache is cleared and the PWA is Updated but on mobile phone i can't and i don't want to do this</p>
  <p>This is my ngsw file:</p>
  <pre><code>{
  &quot;version&quot;: 3,
  &quot;$schema&quot;: &quot;./node_modules/@angular/service-worker/config/schema.json&quot;,
  &quot;index&quot;: &quot;/index.html&quot;,
  &quot;assetGroups&quot;: [
      {
          &quot;name&quot;: &quot;app&quot;,
          &quot;installMode&quot;: &quot;prefetch&quot;,
          &quot;resources&quot;: {
              &quot;files&quot;: [&quot;/favicon.ico&quot;, &quot;/index.html&quot;, &quot;/manifest.webmanifest&quot;, &quot;/*.css&quot;, &quot;/*.js&quot;]
          }
      },
      {
          &quot;name&quot;: &quot;assets&quot;,
          &quot;installMode&quot;: &quot;lazy&quot;,
          &quot;updateMode&quot;: &quot;prefetch&quot;,
          &quot;resources&quot;: {
              &quot;files&quot;: [&quot;/assets/**&quot;, &quot;/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)&quot;]
          }
      }
  ],
  &quot;cacheConfig&quot;: {
      &quot;strategy&quot;: &quot;freshness&quot;
  }
  </code></pre>
  <p>}</p>
  <p>and my appcomponent file</p>
  <pre><code>constructor(public baseService: BaseService, public webapi: WebapiService, private swUpdate: SwUpdate) {
      this.baseService.initialize();
      this.baseService.setWidth(window.innerWidth);
      //#region Check for updates
      if (this.swUpdate.isEnabled) {
          this.swUpdate.activated.subscribe((upd) =&gt; {
              window.location.reload();
          });
          this.swUpdate.available.subscribe(
              (upd) =&gt; {
                  this.swUpdate.activateUpdate();
              },
              (error) =&gt; {
                  console.error(error);
              }
          );
          this.swUpdate
              .checkForUpdate()
              .then(() =&gt; {})
              .catch((error) =&gt; {
                  console.error('Could not check for app updates', error);
              });
      }
      //#endregion
  }
  </code></pre>