2015-11-08 596 views
19

我很熟悉http狀態碼,但最近我在我的chrome調試器中看到了一條奇怪的線。而不是普通的Status Code:200 OK我看到以下內容:Status Code:200 OK (from ServiceWorker)」狀態代碼:200 OK(來自ServiceWorker)?

enter image description here

我的猜測是,這只是告訴我,ServiceWorker來訪問此文件在某種程度上負責,但是這僅僅是隨機的猜測。任何人都可以權威地(沒有猜測,並鏈接到受尊重的資源)告訴我這是什麼意思,什麼影響?

回答

34

這是一個常見的混淆來源,所以我想進一步詳細一點。

我有一個完整的工作演示this Gist,您可以查看live version of it感謝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.jstwo.js製成,並且three.js

Chrome DevTools Network panel

我們的服務人員的fetch手柄R將做三件事情之一:

  • 如果它是one.js的請求時,它會激發關閉了同樣的URL fetch()請求,然後使用該響應呼叫event.respondWith()。第一one.js條目的截圖中,一個以「(來自ServiceWorker)」中的「大小」一欄,有憑藉的事實,即我們俗稱的event.respondWith()處理fetch裏面。第二one.js條目屏幕截圖,所述一個與小齒輪圖標旁邊和「(從高速緩存)」中的「尺寸」列,表示fetch()請求被服務人員內部取得同時響應該事件。由於實際的one.js文件在我使用此屏幕截圖時已經在HTTP緩存中,因此您會看到「(from cache)」,但如果HTTP緩存中沒有該響應,您會看到一個實際的網絡請求響應大小。
  • 如果它是two.js的請求時,它會處理的「憑空」建設一個新的Response對象的請求。 (是的,你可以這樣做!)在這種情況下,我們呼叫event.respondWith(),因此在「大小」列中有一個條目two.js和「(來自ServiceWorker)」。但與one.js不同,我們沒有使用fetch()來填充響應,因此two.js網絡面板中沒有其他條目。
  • 最後,如果它是three.js的要求,我們的服務人員的fetch事件處理程序實際上不會調用event.respondWith()。從頁面的角度來看,也從Network面板的角度看,服務工作者沒有參與該請求,這就是爲什麼在「Size」中只有「(來自緩存)」而不是「(來自ServiceWorker)」 「專欄。
+2

帶有齒輪圖標的所有條目在啓動器列中的值均爲「其他」。也許更具描述性的價值會更有意義? –

+1

https://code.google.com/p/chromium/issues/detail?id=555070 –

2

服務工作者是通過在後臺瀏覽器中運行的腳本。因此狀態代碼:200 OK(來自ServiceWorker)表示GET或HEAD請求的「OK」成功代碼,此狀態來自ServiceWorker。

你可以閱讀這個鏈接,瞭解更多關於此。 http://www.html5rocks.com/en/tutorials/service-worker/introduction/

+0

它會產生什麼影響? –

1

這是正常現象。爲了避免每個請求200引起的混淆。它顯示請求是SUCCESSservice-worker已迴應資源/請求而不是network/server