web-dev-qa-db-fra.com

"Code d'état: 200 OK (de ServiceWorker)" dans Chrome Network DevTools?

Je connais les codes d'état http, mais récemment j'ai vu une étrange ligne dans mon chrome débogueur. Au lieu de l'ordinaire Status Code:200 OK J'ai vu ce qui suit: Status Code:200 OK (from ServiceWorker) .

enter image description here

Je suppose que cela me dit simplement que ServiceWorker est en quelque sorte responsable de l'accès à ce document, mais ce n'est qu'une supposition aléatoire. Quelqu'un peut-il faire autorité (sans suppositions, avec des liens vers des ressources respectées) me dire ce que cela signifie et quelles sont les implications?

javascripthtml5google-chromehttp-headersservice-worker
29
Salvador Dali

C'est une source courante de confusion, donc je voulais entrer dans un peu plus de détails.

J'ai une démo complète en this Gist , et vous pouvez voir une version live de celui-ci grâce à RawGit.

Voici la partie pertinente du code de l'employé de service en ligne, à des fins d'illustration:

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.
});

Et voici à quoi ressemble une version filtrée du panneau Réseau dans Chrome 48 lorsque ce technicien de service contrôle une page et que des demandes sont faites pour one.js, two.js Et three.js:

Chrome DevTools Network panel

Le gestionnaire fetch de notre technicien effectuera l'une des trois opérations suivantes:

  • S'il s'agit d'une demande pour one.js, Il lancera une demande fetch() pour la même URL, puis appellera event.respondWith() en utilisant cette réponse. La première entrée one.js Dans la capture d'écran, celle avec "(de ServiceWorker)" dans la colonne "Taille", est là en raison du fait que nous avons appelé event.respondWith() à l'intérieur du fetch gestionnaire. La deuxième entrée one.js Dans la capture d'écran, celle avec la petite icône d'engrenage à côté d'elle et "(du cache)" dans la colonne "Taille", représente cette fetch() requête qui a été faite à l'intérieur de l'employé de service tout en répondant à l'événement. Étant donné que le fichier one.js Réel était déjà dans le cache HTTP au moment où j'ai pris cette capture d'écran, vous voyez "(du cache)", mais si le cache HTTP n'avait pas déjà cette réponse, vous verriez un demande réseau réelle avec la taille de la réponse.
  • S'il s'agit d'une demande pour two.js, Il traitera la demande en construisant un nouvel objet Response "à partir de l'air". (Oui, vous pouvez le faire!) Dans ce cas, nous appelons event.respondWith(), il y a donc une entrée pour two.js Avec "(de ServiceWorker)" dans la colonne "Taille". Mais contrairement à one.js, Nous n'utilisons pas fetch() pour remplir la réponse, il n'y a donc pas d'entrée supplémentaire dans le panneau Réseau pour two.js.
  • Enfin, s'il s'agit d'une demande de three.js, Le gestionnaire d'événement fetch de notre agent de service n'appellera pas réellement event.respondWith(). Du point de vue de la page, et également du point de vue du panneau Réseau, il n'y a aucune implication du technicien de service dans cette demande, c'est pourquoi il y a juste un "(du cache)" plutôt que "(de ServiceWorker)" dans la "Taille "colonne.
54
Jeff Posnick

Un technicien de service est un script exécuté par votre navigateur en arrière-plan. Donc, le code d'état: 200 OK (de ServiceWorker) signifie que le code de réussite "OK", pour GET ou HEAD request et cet état provient de ServiceWorker.

Vous pouvez lire ce lien pour en savoir plus à ce sujet. http://www.html5rocks.com/en/tutorials/service-worker/introduction/

3
Hoang Tran Son

C'est normal . Pour éviter toute confusion résultant de 200 pour chaque demande. Il montre que la demande est un SUCCESS mais service-worker a répondu pour la ressource/demande au lieu de network/server

1
Atul Sharma