"Код состояния: 200 OK (из ServiceWorker)" в Chrome Network DevTools?

Ответ 1

Это общий источник путаницы, поэтому я хотел бы остановиться немного подробнее.

У меня есть полная рабочая демонстрация в этом Gist, и вы можете просмотреть живую версию благодаря RawGit.

Здесь соответствующая часть кода рабочего сотрудника встроена, в качестве иллюстрации:

self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('one.js')) {
    // Requests for one.js will result in the SW firing off a fetch() request,
    // which will be reflected in the DevTools Network panel.
    event.respondWith(fetch(event.request));
  } else if (event.request.url.endsWith('two.js')) {
    // Requests for two.js will result in the SW constructing a new Response object,
    // so there won't be an additional network request in the DevTools Network panel.
    event.respondWith(new Response('// no-op'));
  }

  // Requests for anything else won't trigger event.respondWith(), so there won't be
  // any SW interaction reflected in the DevTools Network panel.
});

И вот какая отфильтрованная версия панели "Сеть" выглядит как в Chrome 48, когда этот сервисный рабочий контролирует страницу, и запросы выполняются для one.js, two.js и three.js:

Наш обработчик службы fetch выполнит одно из трех действий:

• Если это запрос для one.js, он отключит запрос fetch() для того же URL-адреса, а затем вызовет event.respondWith() с помощью этого ответа. Первая запись one.js на скриншоте, одна с "(из ServiceWorker)" в столбце "Размер" , есть в силу того факта, что мы вызвали event.respondWith() внутри обработчика fetch. Вторая запись one.js на скриншоте, одна с маленькой шестеркой рядом с ней и "(из кеша)" в столбце "Размер" , представляет запрос fetch(), который был сделан внутри рабочего, пока отвечает на событие. Поскольку фактический файл one.js уже был в кеше HTTP в момент, когда я взял этот снимок экрана, вы видите "(из кеша)" , но если в кеше HTTP уже не было этого ответа, вы увидите фактический сетевой запрос наряду с размером ответа.
• Если это запрос для two.js, он обработает запрос, создав новый объект Response "из тонкого воздуха". (Да, вы можете это сделать!) В этом случае мы вызываем event.respondWith(), поэтому в столбце "Размер" есть запись для two.js с "(из ServiceWorker)" . Но в отличие от one.js, мы не используем fetch() для заполнения ответа, поэтому на панели "Сеть" для two.js нет дополнительной записи.
• Наконец, если это запрос для three.js, наш обработчик рабочего процесса fetch на самом деле не вызовет event.respondWith(). С точки зрения страницы, а также с точки зрения панели "Сеть" не задействован сервис-работник с этим запросом, поэтому есть "(из кеша)" , а не "(из ServiceWorker)" в "Размер".

Ответ 2

Рабочим сервисом является script, который выполняется вашим браузером в фоновом режиме. Таким образом, код состояния: 200 OK (из ServiceWorker) означает, что код успеха "ОК", для запроса GET или HEAD, и этот статус поступает из ServiceWorker.

Вы можете прочитать эту ссылку, чтобы узнать больше об этом. http://www.html5rocks.com/en/tutorials/service-worker/introduction/

Ответ 3

Это нормально. Во избежание путаницы, вызванной 200 для каждого запроса. Его показ, что запрос является SUCCESS, но service-worker ответил на ресурс/запрос вместо network/server