Questa è una fonte comune di confusione, quindi volevo entrare un po 'più in dettaglio.
Ho una demo funzionante completa in this Gist, ed è possibile visualizzare un live version of it grazie a RawGit.
Ecco la quota di competenza del codice inline operaio di servizio, a scopo illustrativo:
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.
});
Ed ecco quello che una versione filtrata del pannello Network si presenta come in Chrome 48, quando il lavoratore servizio è in controllo di un di pagina, e le richieste sono fatte per one.js, two.js, e three.js:
del nostro operaio di servizio fetch maniglia r farà una delle tre cose:
- Se si tratta di una richiesta di
one.js, si sparare una richiesta fetch() per lo stesso URL, e quindi chiamare event.respondWith() utilizzando tale risposta. La prima voce one.js nello screenshot, quella con "(da ServiceWorker)" nella colonna "Dimensioni", è presente in virtù del fatto che abbiamo chiamato event.respondWith() all'interno del gestore fetch. La seconda voce one.js nello screenshot, quella con la piccola icona dell'ingranaggio accanto e "(dalla cache)" nella colonna "Dimensioni", rappresenta la richiesta fetch() che è stata effettuata all'interno dell'operatore del servizio durante la risposta all'evento. Poiché il file effettivo one.js era già nella cache HTTP nel punto in cui ho scattato questa schermata, viene visualizzato "(dalla cache)", ma se la cache HTTP non aveva già quella risposta, si vedrebbe una richiesta di rete effettiva insieme a la dimensione della risposta.
- Se si tratta di una richiesta per
two.js, gestirà la richiesta creando un nuovo oggetto Response "dal nulla". (Sì, puoi farlo!) In questo caso, stiamo chiamando event.respondWith(), quindi c'è una voce per two.js con "(da ServiceWorker)" nella colonna "Dimensione". Ma a differenza di one.js, non stiamo usando fetch() per popolare la risposta, quindi non ci sono voci aggiuntive nel pannello Rete per two.js.
- Infine, se si tratta di una richiesta per
three.js, il gestore dell'evento del servizio di assistenza fetch non chiamerà in realtà event.respondWith().Dal punto di vista della pagina, e anche dal punto di vista del pannello Network, non vi è alcun coinvolgimento del service worker con quella richiesta, motivo per cui c'è solo un "(dalla cache)" piuttosto che "(da ServiceWorker)" nella "Dimensione" "colonna.
fonte
2015-11-11 16:30:14
Tutte le voci con l'icona a forma di ingranaggio hanno il valore "Altro" nella colonna Iniziatore. Forse un valore più descrittivo avrebbe più senso? –
https://code.google.com/p/chromium/issues/detail?id=555070 –