web-dev-qa-db-ja.com

Angular Service Worker 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にコピーしても更新は検出されません。 [ネットワーク]タブで、間隔が機能していることがわかります。アプリは3秒ごとにサーバーから新しい「ngsw.json」を取得します。アプリを更新すると、「ngsw.json」の応答内に新しいハッシュ値があることがわかります。その後、ブラウザはサーバーから新しい「index.html」と「main。***。js」を読み込みますが、アプリは新しいバージョンを適用しません。私のコードによれば、「アップデートが見つかりました」と表示されるはずですが、何も起こりません。

angularcachingapache2angular6pwa
14
user9973068

アプリケーションを変更するには、このメソッドactivateUpdate（

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

0
Chellappan

スタック上の他のすべてのソリューションが機能しなかった後、angularのngsw-worker.jsスクリプトのデバッグを開始しました。更新ロジックをトレースし、「PrefetchAssetGroup」メソッドになりました。メソッドが呼び出されるたびにロギングを挿入しましたが、favicon.icoを常にキャッシュしようとしていることに気付きました。 ngsw.jsonでfavicon.icoの場所を確認しましたが、ファビコンがそこにないことに気付きました。その場所にアイコンを配置すると、すべてが正常に動作し始めました。

0
ivan92