問題タブ [angular-service-worker]

以前のバージョンの Angular Service Worker 実装では、構成オプションの 1 つが"routing". これは、この未回答の SO の質問で見ることができ、このAngular CLI の問題で参照されました。残りの最良のドキュメントは、(Angular チームの) Stephen Fluin によるブログ投稿と、Alex RickabaughによるI/O トークのようです。 （Google から）。

Angular 5 では、が適切に構築されており、ほとんどの構成をファイルServiceWorkerModuleを使用して処理できるようになりました。ただし、 angular.io ガイドやドキュメントngsw-config.jsonのどこにも、ルートのリダイレクトを処理する方法についての言及はありません。したがって、次の問題が発生します。アプリにアクセスしてオフラインにしても、直接アクセスするとアプリにアクセスできます: https://jackkoppa.github.io/cityaq-sw-issue。ただし、ロード時にアプリはルートにリダイレクトされ、ほとんどのユーザーはhttps://jackkoppa.github.io/cityaq-sw-issue/search?cities=Shanghaiのような URL からロードしようとします。search（簡単にするために、今のところ Chrome デスクトップとモバイルについて話しているだけで、可能な場合はシークレット モードで話しています）。

オフラインでその URL にアクセスしようとすると、すぐに 504 - Gateway Timeout が表示されます。これは、Service Worker がインデックスをキャッシュしただけであり、他のルートがインデックスをロードできるようにリダイレクトする必要があることを認識していないために発生しています。特定のルートのインデックスへのリダイレクトを設定することで、Angular Service Worker 実装の以前の反復でこのシナリオを処理できたと確信しています。現在のAngular 5+ ngsw-config.json、または生成されたngsw.jsonファイルでこのリダイレクトを処理する方法はありますか? それを除けば、別の Service Worker JS ファイルで回避策をどのように処理する必要がありますか?

angular5 Service Worker を動作させるのに問題があります。主な問題が 2 つあります。

1. Service Worker は、背景画像として使用されるアセット画像をキャッシュしません
2. ネットワーク切断をシミュレートした後、Service Worker は最初にキャッシュからファイルをプルします (前述のキャッシュされていないファイルを除く) が、2 回目の更新後にエラーが発生します。

以下は、私の問題のより詳細なレポートです。ここにあるこの問題を強調するために作成したレポを複製することで、フォローできます。

--service-worker タグを指定してアプリケーションを作成しました。次に、こちらの Angular ドキュメントに記載されている 5 つの手順に従っていることを確認しました。つまり、次のとおりです。

1. サービスワーカーパッケージが追加されました。
2. angular-cli.json には service-worker が true に設定されています
3. Service Worker がインポートされ、app.module.ts に登録されます
4. ngsw-config.json は、ドキュメントの説明に従って生成および構成されています。
5. ng build --prod を実行して、アプリケーションの dist フォルダーにバンドルを生成します。

node/express と server.js ドキュメントを使用してアプリケーションを提供しています。(ドキュメントで推奨されているように) シークレット ウィンドウでアプリケーションを開くと、Service Worker が登録され、バンドルとインデックス ファイルがキャッシュに保存されます。img タグで使用されている画像もキャッシュしますが、css background-image で指定された画像はキャッシュしません。Service Worker のオフライン ボックスをオンにしてネットワークの問題をシミュレートし、ページを更新すると、背景画像が必要な部分を除いてすべてがページに正しく表示されます。

しかし、最後の/主な問題は、アプリケーションをもう一度更新するか、別のタブを開くと発生します (同じシークレット ウィンドウで Service Worker がまだ登録されていて、キャッシュがまだアクティブな場合)。この時点で、何も表示されません。コンソールに次の 3 つのエラーが表示されます。

1. http://localhost:3000/favicon.ico net::ERR_INTERNET_DISCONNECTED を取得します
2. スクリプトのフェッチ中に不明なエラーが発生しました。
3. リソースの読み込みに失敗しました: net::ERR_INTERNET_DISCONNECTED

最後のエラーは ngsw-worker.js からのものです。これらのエラーをどうすればよいかよくわかりません。新しい Service Worker が登録しようとしているのかもしれませんが、なぜそれが起こるのかわかりません...

要求された私の ng-config.json ファイルは次のとおりです。

これについて何か助けていただければ幸いです。皆さんありがとう

アップデート

そのため、サーバーを実行せずに localhost:3000 にアクセスすると、エラーが発生することに気付きました。

エラーも表示されます：

私のすべてのリソースから来る

Update2

ノードを使用してこのプロジェクトをテストし、dist フォルダー (ng build --prod の実行後に生成される) にある私の angular アプリケーションにすべての要求を送信する高速アプリケーションを提供しています。シンプルな http サーバーでテストすることにしました。また、直接リロードすると Service Worker が壊れることもわかりましたが、別のページに移動してから元のページに戻ると、Service Worker が機能します (奇妙ですが、この質問とは関係ありません)。

私はまだService WorkerをExpressで動作させることができません...

サーバーを毎分ポーリングして Service Worker の更新を確認するにはどうすればよいですか?

SWUpdate angular の利用可能なメソッドを使用しましたが、サーバーをポーリングせず、代わりに、ページが更新されたときに更新とキャッシュをフェッチしましたが、これは必要ありません。

非常によく似た checkForUpdate() メソッドに出くわしましたが、どのように機能するかわかりませんか?

任意のヘルプをいただければ幸いです。

2 回目のリロードでキャッシュからデータをフェッチする上記のコード。