3

ローカルホストでは、Angular PWA サービス ワーカーはすべてのシナリオで正常に動作しますが、展開後 (GIT パイプラインを使用する Azure サーバー上)、オンライン モードではすべて正常に動作します: 1. サービス ワーカーが登録されます。2. API 応答がキャッシュされます。オフラインにすると、Service Worker は引き続きネットワークから API 応答をフェッチしようとします (オフライン モードであるため 504 エラーが発生します)。これらの応答をキャッシュから取得する代わりに。キャッシュ内のデータを見ることができますが、問題は ServiceWorker がオフライン モードでもネットワークからのみデータを取得しようとすることです。

ngsw-config.json
{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ],
        "urls": [
          "https://fonts.googleapis.com/css?family=Roboto:400,700",
          "https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap",
          "https://fonts.gstatic.com/s/",
          "https://fonts.googleapis.com/icon?family=Material+Icons",
          "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"          
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "api-performance",
      "urls": [
        "https://api***************.com/fuzzy",
        "https://api*********************.com/kdks"
      ],
      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "3d"
      }
    },
    {
      "name": "api-freshness",
      "urls": [
        "https://pwa***********************.com/TS_LIST",
        "https://ap***********************.com/ores/",
        "https://as*************************.com/ands/"
      ],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 200,
        "maxAge": "1h",
        "timeout": "10s"
      }
    }
  ]
}

展開ビルドの場合、次のコマンドを実行します。

ng build --prod

次に、dist フォルダーに生成されたビルド ファイルがデプロイ ブランチの GIT リポジトリにプッシュされ、そこから git パイプラインを使用して Azure サーバーに自動的にデプロイされます。いくつかの GIT の回答では、ngsw-config.json ファイルから「$schema」タグを削除することを提案していますが、それでも問題は解決しません。親切に助けてください。前もって感謝します。

4

1 に答える 1