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

C'est une source de confusion, donc je voulais aller dans un peu plus en détail.

j'ai un travail plein de démo ce Gist, et vous pouvez afficher un version live of it merci à RawGit.

Voici la partie pertinente du code des travailleurs des services en ligne, à titre d'exemple:

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 quand ce travailleur de service est en contrôle d'une page, et les demandes sont faites pour one.js,two.js et three.js:

notre employé de service fetch gestionnaire de faire une des trois choses:

• Si c'est une demande d' one.js, il se déclenche un fetch() demande pour la même URL, et ensuite appeler event.respondWith() en utilisant cette réponse. Le premier one.js entrée dans la capture d'écran, celle avec "(from ServiceWorker) "dans la colonne "taille", est là en vertu de la fait que nous avons appelé event.respondWith() à l'intérieur du fetch gestionnaire. Le deuxième one.js entrée dans la capture d'écran, celle avec la petite icône en forme d'engrenage à côté de lui et "(à partir du cache)" dans la "Taille" de la colonne, représente que fetch() demande qui a été faite à l'intérieur du travailleur des services, tout en répondant à l'événement. Étant donné que les one.js le fichier é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 réel demande de réseau avec la taille de la réponse.
• Si c'est une demande d' two.js, il traitera la requête en construisant un nouveau Response objet "de l'air mince". (Oui, vous pouvez le faire! Dans ce cas, nous appelons event.respondWith(), il y a donc une entrée pour two.js avec "(du travailleur de service)" dans la colonne "Taille". Mais contrairement à one.js, nous ne sommes pas à l'aide de fetch() pour remplir la réponse, donc il n'y a aucune entrée supplémentaire dans le panneau Réseau pour two.js.
• Enfin, si c'est une demande d' three.js, notre travailleur des services fetch gestionnaire d'événement ne sera pas réellement appeler event.respondWith(). Du point de vue de la page, et aussi du point de vue du Comité du réseau, il n'y a aucune implication des travailleurs de service dans cette demande, c'est pourquoi il y a juste un "(de cache)" plutôt que "(de ServiceWorker)" dans la colonne "Taille".