Angular Сервисный работник с Firebase обрабатывает все запросы Firebase

Question

Я преобразовал свое приложение Angular firebase в PWA с помощью установки angular / pwa ng.

все прекрасно работает, но я начинаю сомневаться, почему запросы происходят дважды.

Мой рабочий конфиг-конфиг

{
  "$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"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

Открывая вкладку сети, я вижу

Как видите все запросы как бы удвоены. Возможно, мои знания ограничены. Поэтому я поднял глаза и показал, что первый запрос с иконкой cog - это подготовка, а следующий - фактический запрос.

Я делаю что-то не так или беспокоюсь ни о чем?

Это проблема производительности? Должен ли обслуживающий работник обрабатывать эти запросы?

Answer 1

Поведение, которое вы наблюдаете, совершенно нормально, строки, содержащие (ServiceWorker) в столбце Размер, показывают, что соответствующий запрос был перехвачен работником службы. Значок cog показывает запрос, инициированный работником сервиса в сеть. Так как вы используете ngsw-worker.js из Angular, эти запросы являются клонами из исходных, но вы можете представить себе собственную реализацию работника сервиса, отправляющую совершенно другие запросы, чем те, которые инициированы основным кодом JavaScript .

Простой пример:

self.addEventListener('fetch', function(event) {
    event.respondWith(fetch('other-request'));
};

Вы также не можете инициировать запрос и обслуживать запросы из кэша (подразумевая, что он был ранее кэширован), например:

self.addEventListener('fetch', function(event) {
    event.respondWith(caches.match(event.request));
}

Angular ngsw-worker.js использует кэш для файлов, определенных в assetGroups, и для ресурсов, определенных в dataGroups (в зависимости от стратегии cacheConfig).

dataGroups cacheConfig позволяет выбирать между производительностью и свежестью, а также позволяет установить тайм-аут, который отдает приоритет кешу по истечении.

Answer 2

Это нормальное поведение.

Первый вызов извлекает информацию из кэша, второй проверяет, изменился ли ресурс.

И если он изменился, он заменяет ресурс в кэше новым ресурсом