javascript "स्टेटस कोड: क्रोम नेटवर्क DevTools में 200 ओके(ServiceWorker से)"?




html5 google-chrome (3)

यह सामान्य बात है । हर अनुरोध के लिए 200 उत्पन्न भ्रम से बचने के लिए। यह दिखा रहा है कि अनुरोध एक SUCCESS लेकिन service-worker ने network/server बजाय संसाधन / अनुरोध के लिए जवाब दिया network/server

मैं http स्टेटस कोड से परिचित हूं, लेकिन हाल ही में मैंने अपने क्रोम डीबगर में एक अजीब रेखा देखी है। सामान्य Status Code:200 OK बजाय Status Code:200 OK मैंने निम्नलिखित देखा: Status Code:200 OK (from ServiceWorker)

मेरा अनुमान है कि यह सिर्फ मुझे बताता है कि ServiceWorker किसी भी तरह से इस दस्तावेज़ तक पहुंचने के लिए ज़िम्मेदार है, लेकिन यह सिर्फ यादृच्छिक अनुमान है। क्या कोई भी अधिकृत रूप से (अनुमान के बिना, सम्मानित संसाधनों के लिंक के साथ) मुझे बता सकता है कि इसका क्या अर्थ है और क्या प्रभाव हैं?


एक सेवा कर्मचारी एक स्क्रिप्ट है जो पृष्ठभूमि में आपके ब्राउज़र द्वारा चलाया जाता है। तो स्थिति कोड: 200 ओके (सेवावर्कर से) का मतलब है कि "ओके" सफलता कोड, जीईटी या हेड अनुरोध के लिए और यह स्थिति ServiceWorker से आती है।

आप इस बारे में अधिक समझने के लिए इस लिंक को पढ़ सकते हैं। http://www.html5rocks.com/en/tutorials/service-worker/introduction/


यह भ्रम का एक आम स्रोत है, इसलिए मैं थोड़ा और विस्तार में जाना चाहता था।

मेरे पास इस गीस्ट में एक पूर्ण कामकाजी डेमो है, और आप इसका एक लाइव संस्करण देख सकते हैं रॉगिट के लिए धन्यवाद।

चित्रकारी उद्देश्यों के लिए सेवा कार्यकर्ता कोड इनलाइन का प्रासंगिक भाग यहां दिया गया है:

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

और यहां बताया गया है कि नेटवर्क पैनल का एक फ़िल्टर संस्करण क्रोम 48 में कैसा दिखता है जब वह सेवा कर्मचारी पृष्ठ के नियंत्रण में होता है, और अनुरोध एक one.js , two.js , और three.js लिए किए जाते हैं:

हमारे सेवा कर्मचारी का fetch हैंडलर तीन चीजों में से एक करेगा:

  • यदि यह one.js अनुरोध है, तो वह उसी यूआरएल के लिए एक fetch() अनुरोध को बंद कर देगा, और फिर उस प्रतिक्रिया का उपयोग करके event.respondWith() कॉल करें। स्क्रीनशॉट में पहली एक। one.js प्रविष्टि, "आकार" कॉलम में "( one.js से)" वाला एक तथ्य है, इस तथ्य के आधार पर कि हम fetch हैंडलर के अंदर event.respondWith() कहलाते हैं। स्क्रीनशॉट में दूसरी one.js प्रविष्टि, "आकार" कॉलम में उसके आगे के छोटे गियर आइकन और "(कैश से)" वाला एक व्यक्ति, उस कार्यकर्ता fetch() अनुरोध का प्रतिनिधित्व करता है जो सेवा कार्यकर्ता के अंदर किया गया था घटना। चूंकि वास्तविक one.js फ़ाइल पहले से ही HTTP कैश में थी, मैंने इस स्क्रीनशॉट को लिया था, आप "(कैश से)" देखते हैं, लेकिन यदि HTTP कैश में पहले से ही वह प्रतिक्रिया नहीं है, तो आपको एक वास्तविक नेटवर्क अनुरोध दिखाई देगा प्रतिक्रिया आकार के साथ।
  • यदि यह two.js लिए अनुरोध है, तो यह "पतली हवा से" एक नई Response वस्तु का निर्माण करके अनुरोध को संभालेगा। (हाँ, आप यह कर सकते हैं!) इस मामले में, हम event.respondWith() कॉल कर रहे हैं event.respondWith() , इसलिए "आकार" कॉलम में "(ServiceWorker से)" के साथ two.js लिए एक प्रविष्टि है। लेकिन एक one.js विपरीत, हम प्रतिक्रिया को पॉप्युलेट करने के लिए fetch() का उपयोग नहीं कर रहे हैं, इसलिए नेटवर्क पैनल में two.js लिए कोई अतिरिक्त प्रविष्टि नहीं है।
  • आखिरकार, अगर यह three.js लिए अनुरोध है, तो हमारे सेवा कर्मचारी के fetch इवेंट हैंडलर वास्तव में ईवेंट को कॉल नहीं करेंगे। event.respondWith() । पृष्ठ के परिप्रेक्ष्य से और नेटवर्क पैनल के परिप्रेक्ष्य से, उस अनुरोध के साथ कोई सेवा कार्यकर्ता भागीदारी नहीं है, यही कारण है कि "आकार (सेवा से)" के बजाय "(सेवा से)" के बजाय केवल "कैश से)" है "कॉलम।






service-worker