Я знаком с кодами состояния http, но недавно я увидел странную строку в своем отладчике Chrome. Вместо обычного Status Code:200 OK я увидел следующее: Status Code:200 OK (from ServiceWorker).
Я предполагаю, что это просто говорит мне, что ServiceWorker каким-то образом отвечает за доступ к этому документу, но это просто случайное предположение. Кто-нибудь может авторитетно (без догадок, со ссылками на уважаемые ресурсы) сказать, что это значит и каковы последствия?
Это распространенный источник путаницы, поэтому я хотел бы остановиться на нем немного подробнее.
У меня есть полная рабочая демонстрация в этом 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 на снимке экрана с пометкой «(from 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)». " столбец.Service Worker — это скрипт, который запускается вашим браузером в фоновом режиме. Таким образом, код состояния: 200 OK (от ServiceWorker) означает, что код успеха «ОК» для запроса GET или HEAD, и этот статус исходит от ServiceWorker.
Вы можете прочитать эту ссылку, чтобы узнать больше об этом. http://www.html5rocks.com/en/tutorials/service-worker/introduction/
Это нормально . Чтобы избежать путаницы, возникающей 200 для каждого запроса. Он показывает, что запрос является SUCCESS, но service-worker ответил на ресурс/запрос вместо network/server
