Угловой рабочий службы SwUpdate.available не срабатывает

Мне сложно интегрировать сервис-менеджера углов в мое приложение. Я последовал за гидом, и он работает до сих пор. Я могу создать ярлык на моем рабочем столе и запустить в свое приложение. Проблема в том, что мое приложение каким-то образом не обновляется. Если я изменю имя кнопки, создам приложение и помещаю его на свой сервер, приложение по-прежнему показывает старую версию, пока не нажму F5 (перезапуск приложения тоже не поможет).

Я попытался поместить следующий код в свой ngOnInot моего приложения, но это не помогло

ngOnInit() {
if (this._SwUpdate.isEnabled) {

  setInterval( () => {
    this._SwUpdate.checkForUpdate().then(() => console.log('checking for updates'));
  }, this.updateInterval);

  this._SwUpdate.available.subscribe(() => {

    console.log('update found');

    this._SwUpdate.activateUpdate().then(() => {
      console.log('updated');
      window.location.reload();
    });

  });

}

}

Приложение работает на моей машине apache2 linux. Является ли apache кэшированием чего-то или почему мое приложение не понимает, что есть новая версия?

Заранее спасибо за помощь :)

Редактировать:

Мой ngsw-config.json

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "roomPlan",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/index.html",
        "/*.css",
        "/*.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

Изменить 2:

Он работает, если я запускаю приложение локально, используя "http-server", но когда я копирую файлы на свой apache, он не обнаруживает обновление. На вкладке "Сеть" я вижу, что интервал работает, приложение получает новый "ngsw.json" с сервера каждые 3 секунды. Если я обновляю свое приложение, я вижу, что в ответ на "ngsw.json" есть новые значения хэш-функции. После этого браузер загружает новые "index.html" и "main. ***. Js" с моего сервера, но приложение не применяет новую версию. Согласно моему коду, он должен сказать "обновление найдено", но ничего не происходит.

Ответ 1

Вероятно, вам нужно будет сообщить сервисному работнику проверить сервер на наличие обновлений, я обычно использую службу для этого:

export class UpdateService {

  constructor(public updates: SwUpdate) {
    if (updates.isEnabled) {
      interval(6 * 60 * 60).subscribe(() => updates.checkForUpdate()
        .then(() => console.log('checking for updates')));
    }
  }

  public checkForUpdates(): void {
    this.updates.available.subscribe(event => this.promptUser());
  }

  private promptUser(): void {
    console.log('updating to new version');
    this.updates.activateUpdate().then(() => document.location.reload())); 
  }

В вашем app-component.ts:

  constructor(private sw: UpdateService) {
    // check the service worker for updates
    this.sw.checkForUpdates();
  }

По какой-то причине, иногда Угловой не является должным образом рабочим службы. Таким образом, вы можете изменить main.ts:

Заменить:

platformBrowserDynamic().bootstrapModule(AppModule);

С:

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

Ответ 2

При внесении изменений в ваше приложение вам понадобится активироватьUpdate (

import { SwUpdate } from '@angular/service-worker';

export class AppComponent implements OnInit {
  constructor(private swUpdate: SwUpdate) { }
  ngOninit() {
    this.swUpdate.available.subscribe(event => {
      console.log('A newer version is now available. Refresh the page now to update the cache');
    });
    this.swUpdate.checkForUpdate()
  }
}

Проверьте эту ссылку: https://angular.io/guide/service-worker-getting-started

Ответ 3

После того, как все остальные решения в стеке не сработали, я начал отлаживать угловой скрипт ngsw-worker.js. Я проследил логику обновления и оказался в методе "PrefetchAssetGroup". Я вставлял запись в журнал каждый раз, когда вызывался метод, и затем я понял, что он постоянно пытается кэшировать мой favicon.ico. Я проверил местоположение favicon.ico в моем ngsw.json и понял, что favicon там не находится. Как только я поместил значок в этом месте, все стало работать нормально.