प्रॉम्प्ट और संदर्भ
एक PWA रिलीज़ के बाद, कुछ यूज़र्स अभी भी पुराने Service Worker द्वारा नियंत्रित होते हैं और नए HTML के साथ पुराना JavaScript लोड करते हैं, जिससे ChunkLoadError होता है। लाइफ़साइकिल, कैश वर्ज़न, खुले टैब, skipWaiting, clientsClaim, और रोलबैक के ट्रेड-ऑफ़ समझाएं।
यह प्रश्न फ़्रंटएंड, वेब-प्लेटफ़ॉर्म और फुल-स्टैक भूमिकाओं के लिए उपयुक्त है। यह किसी विशेष फ़्रेमवर्क की आवश्यकता के बिना डिप्लॉयमेंट सुरक्षा और यूज़र अनुभव का परीक्षण करता है। गड़बड़ी की दरें (error rates) और पुराने कैश का अनुपात अभ्यास डेटा हैं, सार्वभौमिक सीमाएँ नहीं।
इंटरव्यूअर क्या जांच रहा है
लाइफ़साइकिल
उम्मीदवार को install, waiting, activate और पेज नियंत्रण के बारे में समझाना चाहिए, विशेष रूप से यह कि पुराने क्लाइंट खुले रहने के दौरान अपडेट किया गया वर्कर इंतज़ार क्यों करता है।
एसेट कंसिस्टेंसी
HTML, हैश किए गए JavaScript, रनटाइम API डेटा और प्रीकैश (precache) प्रविष्टियों को अलग करें। पुराने कैश को हटाने से वह पेज नहीं टूटना चाहिए जो अभी भी उसके एसेट्स को संदर्भित करता है।
अपनाने की रणनीति (Adoption strategy)
skipWaiting अपनाने की प्रक्रिया को तेज़ कर सकता है लेकिन पेज के लाइफ़टाइम के दौरान नियंत्रण बदल सकता है। एक मजबूत उत्तर कम्पैटिबिलिटी और यूज़र की सहमति का मूल्यांकन करता है।
रोलबैक और ऑब्जर्वेबिलिटी
वर्ज़न ID, एक समाप्ति विंडो (expiry window), एरर मॉनिटरिंग और एक no-op वर्कर ख़राब रोलआउट को रोकने का एक तरीका प्रदान करते हैं।
पहले स्पष्ट करने योग्य प्रश्न
- क्या HTML और स्टैटिक एसेट्स कंटेंट हैश का उपयोग करते हैं?
- क्या Service Worker का URL और स्कोप स्थिर है?
- क्या यूज़र्स पेजों को घंटों तक खुला रख सकते हैं या उनके पास अनसेव्ड स्टेट हो सकती है?
- क्या API दोनों क्लाइंट वर्ज़न के साथ बैकवर्ड कम्पैटिबल है?
- क्या प्रोडक्ट सुरक्षित समय पर रिफ़्रेश के लिए प्रॉम्प्ट कर सकता है?
- क्या प्लेटफ़ॉर्म वर्कर स्क्रिप्ट और एसेट मेनिफ़ेस्ट को जल्दी से रोलबैक कर सकता है?
30-सेकंड का उत्तर
“एक अपडेटेड वर्कर सामान्यतः इंस्टॉल होता है और waiting में चला जाता है जबकि पुराना वर्कर खुले पेजों को नियंत्रित करता है। मैं पहले HTML, हैश किए गए एसेट्स और API अनुबंधों को वर्ज़न-कम्पैटिबल बनाऊँगा, फिर तय करूँगा कि क्या skipWaiting स्वीकार्य है। मैं रिवीज़न किए गए प्रीकैश एंट्रीज़ का उपयोग करूँगा और activate के दौरान केवल ज्ञात-पुराने कैश को ही डिलीट करूँगा।
पेज updatefound और controllerchange को ऑब्ज़र्व करेगा, सुरक्षित होने पर रिफ़्रेश के लिए प्रॉम्प्ट करेगा, और वर्कर वर्ज़न, ChunkLoadError और एक्टिवेशन समय को रिकॉर्ड करेगा। ख़राब रिलीज़ के लिए, मैं रोलआउट रोक दूँगा या पिछले एसेट्स को बनाए रखते हुए एक no-op वर्कर शिप करूँगा, फिर मरम्मत कर धीरे-धीरे आगे बढ़ूँगा।”
चरण-दर-चरण विस्तृत उत्तर
चरण 1: लाइफ़साइकिल को समझें
रजिस्ट्रेशन एक installing वर्कर बनाता है। install के बाद यह waiting बन जाता है; पुराना वर्कर अभी भी मौजूदा पेजों को नियंत्रित करता है। एक बार जब पुराने क्लाइंट बंद हो जाते हैं या नेविगेट करते हैं, तो नया वर्कर activate हो जाता है और नियंत्रण ले लेता है।
चरण 2: एसेट्स को कम्पैटिबल बनाएं
HTML को हैश किए गए एसेट्स को संदर्भित करना चाहिए, और APIs को माइग्रेशन विंडो के दौरान पुराने फ़ील्ड्स को स्वीकार करना चाहिए। केवल कैश का नाम बदलने से कोई मदद नहीं मिलती यदि पुराने पेज हटाए गए चंक्स (chunks) का अनुरोध करते हैं।
चरण 3: अपडेट चेक्स डिज़ाइन करें
वर्कर का URL स्थिर रखें। ब्राउज़र नेविगेशन और रजिस्ट्रेशन पर बाइट परिवर्तनों की जांच करते हैं; लंबे समय तक चलने वाले सत्र स्पष्ट रूप से registration.update को कॉल कर सकते हैं, लेकिन उन्हें आक्रामक रूप से पोल (poll) नहीं करना चाहिए।
~~~js const registration = await navigator.serviceWorker.ready; await registration.update(); ~~~
चरण 4: वेटिंग और प्रॉम्प्ट्स को संभालें
डिफ़ॉल्ट रूप से waiting सबसे सुरक्षित है। यदि तत्काल अपनाने की आवश्यकता है, तो अनसेव्ड स्टेट और प्रोटोकॉल कम्पैटिबिलिटी की जांच करें, यूज़र से पूछें, फिर एक नियंत्रित संदेश के माध्यम से skipWaiting भेजें। बिना रिफ़्रेश लूप बनाए controllerchange को संभालें।
चरण 5: कैश साफ़ करें और रोलबैक करें
activate के दौरान, केवल अनुमत सूची (allowlist) से बाहर के कैश को ही डिलीट करें। रोलबैक के लिए पिछली एसेट विंडो रखें। यदि कोई रिलीज़ ख़राब है, तो प्रत्येक कैश को डिलीट करने के बजाय एंट्री पॉइंट को रोलबैक करें या एक no-op वर्कर शिप करें।
चरण 6: निरीक्षण और सत्यापन करें
वर्कर वर्ज़न, कैश हिट्स, एक्टिवेशन टाइम, controllerchange, एसेट 404s, और ChunkLoadError रिकॉर्ड करें। पुराने और नए टैब, ऑफ़लाइन स्टार्टअप, रिफ़्रेश, चरणबद्ध रोलआउट (staged rollout), और रोलबैक का परीक्षण करें।
मॉडल उत्तर
“ChunkLoadError तब हो सकता है जब कोई पुराना वर्कर किसी पेज को नियंत्रित करता है जबकि डिप्लॉयमेंट ने उस पेज द्वारा संदर्भित चंक्स को पहले ही हटा दिया हो। नया वर्कर डिफ़ॉल्ट रूप से इंतज़ार करता है, इसलिए मैं पहले विश्व स्तर पर skipWaiting को कॉल नहीं करूँगा।
मैं एक स्थिर वर्कर URL रखूँगा, हैश किए गए एसेट्स का उपयोग करूँगा, और एक API कम्पैटिबिलिटी विंडो बनाए रखूँगा। प्रीकैश रिवीज़न को स्पष्ट रूप से प्रबंधित किया जाएगा, और activate केवल अनुमत सूची वाले पुराने कैश को हटाएगा। पेज एक वेटिंग वर्कर का पता लगाएगा और कोई अनसेव्ड स्टेट न होने पर रिफ़्रेश की पेशकश करेगा; तत्काल स्विचिंग के लिए कम्पैटिबिलिटी और सावधानीपूर्वक controllerchange हैंडलिंग की आवश्यकता होगी।
मैं रिलीज़ को चरणों में लागू करूँगा और वर्कर वर्ज़न, एसेट 404s, और ChunkLoadError की निगरानी करूँगा। यदि वर्ज़न ख़राब है, तो एंट्री-पॉइंट रोलआउट को रोकें या पुराने एसेट्स को बनाए रखते हुए एक no-op वर्कर डिप्लॉय करें। रिकवरी में कई टैब, ऑफ़लाइन स्टार्टअप, रिफ़्रेश और एक पूर्ण रोलबैक शामिल होना चाहिए।”
सामान्य गलतियाँ
- यह मान लेना कि install तुरंत हर पेज को नियंत्रित कर लेता है।
- अनहैश किए गए JavaScript को उसी स्थान पर ओवरराइट करना।
- बिना शर्त skipWaiting को कॉल करना और पेज के बीच में वर्ज़न मिक्स करना।
- activate के दौरान प्रत्येक कैश को डिलीट करना।
- अपडेट बाध्य करने के लिए वर्कर स्क्रिप्ट का नाम बदलना।
- केवल नए खोले गए पेज का परीक्षण करना, लंबे समय से खुले टैब का नहीं।
- केवल फ़्रंटएंड एंट्री को रोलबैक करते समय API को तोड़ देना।
- कोई वर्कर-वर्ज़न टेलीमेट्री या no-op रोलबैक न होना।
फ़ॉलो-अप प्रश्न
फ़ॉलो-अप 1: एक नया वर्कर प्रतीक्षा (wait) क्यों करता है?
पुराना वर्कर अभी भी खुले क्लाइंट्स को नियंत्रित करता है। डिफ़ॉल्ट लाइफ़साइकिल उन क्लाइंट्स के बंद होने या नेविगेट करने की प्रतीक्षा करती है ताकि नियंत्रण अप्रत्याशित रूप से न बदले।
फ़ॉलो-अप 2: skipWaiting कब उचित है?
जब एसेट्स और APIs बैकवर्ड कम्पैटिबल हों, कोई महत्वपूर्ण स्टेट अनसेव्ड न हो, और तत्काल रिफ़्रेश स्वीकार्य हो। अन्यथा यूज़र की सहमति या नेविगेशन की प्रतीक्षा करें।
फ़ॉलो-अप 3: आप असीमित कैश वृद्धि को कैसे रोकते हैं?
वर्ज़न या रिवीज़न अनुमत सूचियों (allowlists) का उपयोग करें और activate के दौरान केवल अप्रयुक्त कैश को ही डिलीट करें। एक परिभाषित रोलबैक विंडो के लिए पिछली रिलीज़ को बनाए रखें।
फ़ॉलो-अप 4: आप बग वाले वर्कर को कैसे रोकते हैं?
एंट्री रोलआउट को रोकें, और यदि आवश्यक हो तो एक no-op वर्कर डिप्लॉय करें या ज्ञात-अच्छी स्क्रिप्ट को पुनर्स्थापित करें। रिलीज़ को ठीक करते समय पुराने एसेट्स को उपलब्ध रखें।
फ़ॉलो-अप 5: आप कैसे साबित करते हैं कि अपडेट सुरक्षित है?
मल्टीपल टैब्स, ऑफ़लाइन स्टार्टअप, नए एसेट्स के साथ पुराना HTML, रिफ़्रेश, अपडेट प्रॉम्प्ट्स, API कम्पैटिबिलिटी, एरर मॉनिटरिंग और संपूर्ण रोलबैक पथ का परीक्षण करें।