angular5 Service Worker を動作させるのに問題があります。主な問題が 2 つあります。
- Service Worker は、背景画像として使用されるアセット画像をキャッシュしません
- ネットワーク切断をシミュレートした後、Service Worker は最初にキャッシュからファイルをプルします (前述のキャッシュされていないファイルを除く) が、2 回目の更新後にエラーが発生します。
以下は、私の問題のより詳細なレポートです。ここにあるこの問題を強調するために作成したレポを複製することで、フォローできます。
--service-worker タグを指定してアプリケーションを作成しました。次に、こちらの Angular ドキュメントに記載されている 5 つの手順に従っていることを確認しました。つまり、次のとおりです。
- サービスワーカーパッケージが追加されました。
- angular-cli.json には service-worker が true に設定されています
- Service Worker がインポートされ、app.module.ts に登録されます
- ngsw-config.json は、ドキュメントの説明に従って生成および構成されています。
- ng build --prod を実行して、アプリケーションの dist フォルダーにバンドルを生成します。
node/express と server.js ドキュメントを使用してアプリケーションを提供しています。(ドキュメントで推奨されているように) シークレット ウィンドウでアプリケーションを開くと、Service Worker が登録され、バンドルとインデックス ファイルがキャッシュに保存されます。img タグで使用されている画像もキャッシュしますが、css background-image で指定された画像はキャッシュしません。Service Worker のオフライン ボックスをオンにしてネットワークの問題をシミュレートし、ページを更新すると、背景画像が必要な部分を除いてすべてがページに正しく表示されます。
しかし、最後の/主な問題は、アプリケーションをもう一度更新するか、別のタブを開くと発生します (同じシークレット ウィンドウで Service Worker がまだ登録されていて、キャッシュがまだアクティブな場合)。この時点で、何も表示されません。コンソールに次の 3 つのエラーが表示されます。
- http://localhost:3000/favicon.ico net::ERR_INTERNET_DISCONNECTED を取得します
- スクリプトのフェッチ中に不明なエラーが発生しました。
- リソースの読み込みに失敗しました: net::ERR_INTERNET_DISCONNECTED
最後のエラーは ngsw-worker.js からのものです。これらのエラーをどうすればよいかよくわかりません。新しい Service Worker が登録しようとしているのかもしれませんが、なぜそれが起こるのかわかりません...
要求された私の ng-config.json ファイルは次のとおりです。
{
"index": "/index.html",
"assetGroups": [{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html"
],
"versionedFiles": [
"/*.bundle.css",
"/*.bundle.js",
"/*.chunk.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}]
}
これについて何か助けていただければ幸いです。皆さんありがとう
アップデート
そのため、サーバーを実行せずに localhost:3000 にアクセスすると、エラーが発生することに気付きました。
Uncaught (in promise) Error: Response not Ok (fetchAndCacheOnce): request for http://localhost:3000/assets/images/background-silver-grainy.jpg returned response 504 Gateway Timeout
エラーも表示されます：
Failed to load resource: the server responded with a status of 504 (Gateway Timeout)
私のすべてのリソースから来る
Update2
ノードを使用してこのプロジェクトをテストし、dist フォルダー (ng build --prod の実行後に生成される) にある私の angular アプリケーションにすべての要求を送信する高速アプリケーションを提供しています。シンプルな http サーバーでテストすることにしました。また、直接リロードすると Service Worker が壊れることもわかりましたが、別のページに移動してから元のページに戻ると、Service Worker が機能します (奇妙ですが、この質問とは関係ありません)。
私はまだService WorkerをExpressで動作させることができません...
