Я знаком с кодами статуса 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 на скриншоте, одна с "(из 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)" в "Размер".Рабочим сервисом является script, который выполняется вашим браузером в фоновом режиме. Таким образом, код состояния: 200 OK (из ServiceWorker) означает, что код успеха "ОК", для запроса GET или HEAD, и этот статус поступает из ServiceWorker.
Вы можете прочитать эту ссылку, чтобы узнать больше об этом. http://www.html5rocks.com/en/tutorials/service-worker/introduction/
Это нормально. Во избежание путаницы, вызванной 200 для каждого запроса. Его показ, что запрос является SUCCESS, но service-worker ответил на ресурс/запрос вместо network/server