Отправка запроса PUT отправляется дважды Angular ServiceWorker

Question

Мы используем serviceWorker в приложении Angular 7.Когда пользователь загружает файл (изображение или PDF) из приложения с помощью запроса PUT на AWS S3, вместо 1 запускается 2 PUT запроса. Первый запрос PUT поступает от ServiceWorker, хотя ине следует, загрузка производится из основного потока.Второй - не из ServiceWorker, и, похоже, он отправляется без файла.

В результате файл загружен неверно, размером 0 байт на S3.Проблема возникает только тогда, когда мы запускаем приложение с включенным ServiceWorker.Похоже, что ServiceWorker кэширует запросы на загрузку.

Как мне избежать этого?

Это то, что я вижу на вкладке сети в инструментах разработчика: https://prnt.sc/odoaac

Вот angular.json конфигурация:

"production": {
    "fileReplacements": [
      {
        "replace":"apps/echo/src/environments/environment.ts",
        "with":"apps/echo/src/environments/environment.prod.ts"
      }
    ],
  "serviceWorker": true,
  "ngswConfigPath": "apps/echo/src/ngsw-config.json",
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true,
  "budgets": [
    {
      "type": "initial",
      "maximumWarning": "2mb",
      "maximumError": "5mb"
    }
  ]
}

А вот ngsw-config.json dataGroups:

"dataGroups": [
  {
    "cacheConfig": {
      "maxSize": "1",
      "maxAge": "0u",
      "timeout": "10m",
      "strategy": "freshness"
    },
    "name": "API",
    "urls": [
      "https://api.editorial.reali.com",
      "https://api.editorial.reali.com/",
      "https://api.editorial.reali.com/*",
      "https://api.editorial.reali.com/**",
      "https://s3.amazonaws.com",
      "https://s3.amazonaws.com/",
      "https://s3.amazonaws.com/*",
      "https://s3.amazonaws.com/**",
      "/version.json"
    ]
  },
  {
    "name": "GoogleFonts",
    "cacheConfig": {
      "maxSize": "20",
      "maxAge": "5d",
      "timeout": "1s",
      "strategy": "performance"
    },
    "urls": [
      "https://fonts.googleapis.com/**"
    ]
  }
]

Answer 1

На самом деле существует только один PUT-запрос к серверу. Вы должны быть в состоянии подтвердить это в журналах доступа S3.

То, что происходит на скриншоте devtools (я добавляю его сюда для дальнейшего использования!), Выглядит следующим образом:

1. страница JS отправляет запрос PUT, что ПО перехватывает
2. SW после перехвата запроса решает сделать фактический запрос к серверу
3. Когда фактический запрос сделан, браузер видит, что целевой домен отличается
4. Из-за другого домена браузер автоматически отправляет предварительный запрос CORS (https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request) на сервер и подтверждает , что сервер поддерживает PUT
5. Сервер отвечает на предварительный запрос и говорит, что PUT в порядке
6. Браузер отправляет на сервер реальный, окончательный, единственный запрос PUT

По какой-то причине где-то здесь ваш файл удален. Я не уверен, почему, так как я не занимался загрузкой файлов в Service Workers.