Firefox 147 ने मॉड्यूल-प्रकार सेवा कार्यकर्ताओं को जोड़ा — पूर्ण‑स्टैक टीमों को अब क्या करना चाहिए

क्या हुआ

• Firefox 147 (स्थिर, जनवरी 2026) ने सेवा कार्यकर्ताओं के लिए ECMAScript मॉड्यूल के रूप में समर्थन पेश किया — अर्थात्, आप { type: 'module' } के साथ एक सेवा कार्यकर्ता पंजीकृत कर सकते हैं और कार्यकर्ता के अंदर import/export और मॉड्यूल अर्थशास्त्र का उपयोग कर सकते हैं। (developer.mozilla.org)

यह क्यों महत्वपूर्ण है (उच्च प्रभाव)

• कार्यकर्ता में आधुनिक, पुन: प्रयोज्य कोड: आप साझा उपयोगिता मॉड्यूल आयात कर सकते हैं, छोटे पेलोड के लिए ट्री-शेक कर सकते हैं, और मुख्य थ्रेड और कार्यकर्ता कोड के बीच समानता बनाए रख सकते हैं।
• टॉप-लेवल await, सख्त ESM अर्थशास्त्र, और अंतर्निहित मॉड्यूल समाधान importScripts और नाजुक संयोजन पैटर्न की आवश्यकता को समाप्त करते हैं।
• सरल उपकरण श्रृंखला एकीकरण: रोलअप/बंडलर जो ESM आउटपुट उत्पन्न करते हैं, सीधे सेवा कार्यकर्ताओं को फीड कर सकते हैं, जिससे निर्माण-समय हैक्स कम होते हैं।
• सुरक्षा और रखरखाव: कार्यकर्ताओं के अंदर स्पष्ट मॉड्यूल सीमाएँ और निर्भरता ग्राफ का आसान ऑडिटिंग।

पूर्ण‑स्टैक टीमों को अब क्या करना चाहिए — ठोस, प्राथमिकता दी गई चेकलिस्ट

1. त्वरित संगतता जांच

   • अपने लक्षित ब्राउज़रों और उपयोगकर्ता आधार की पुष्टि करें (Firefox 147+ उपलब्धता आपके टेलीमेट्री में)। यदि उपयोगकर्ताओं का एक महत्वपूर्ण हिस्सा पुराने Firefox या अन्य ब्राउज़रों का उपयोग करता है जो आपके वातावरण में स्वचालित अपडेट पर नहीं हो सकते हैं, तो एक बैकअप योजना बनाएं। (developer.mozilla.org)

2. फ़ीचर-डिटेक्ट करें और सुरक्षित रूप से पंजीकरण करें

   • फ़ीचर डिटेक्शन और शर्तीय पंजीकरण का उपयोग करें: जब समर्थित हो, तो navigator.serviceWorker.register('/sw.js', { type: 'module' }) का प्रयास करें, अन्यथा क्लासिक पंजीकरण पर वापस जाएं। सार्वजनिक उत्पादों में बैकअप के बिना मॉड्यूल पंजीकरण को मजबूर न करें।

3. कार्यकर्ता कोड को ESM में माइग्रेट करें

   • importScripts(...) को import ... from '...' से बदलें और CommonJS-शैली के कोड को ESM में परिवर्तित करें (या ESM-संगत प्रवेश बिंदु प्रदान करें)।
   • उन वैश्विक साइड इफेक्ट्स को हटा दें जो importScripts क्रम पर निर्भर थे; स्पष्ट आयात और प्रारंभ पर भरोसा करें।

4. निर्माण पाइपलाइन में परिवर्तन

   • बंडलरों को सेवा कार्यकर्ताओं के लिए ESM आउटपुट उत्पन्न करने के लिए कॉन्फ़िगर करें (आवश्यकतानुसार आयात कथनों को बनाए रखें या .mjs उत्पन्न करें)।
   • सुनिश्चित करें कि आपका सर्वर मॉड्यूल फ़ाइलों के लिए सही MIME प्रकार (जैसे, text/javascript या application/javascript) लौटाता है और मॉड्यूल लोडिंग के लिए आवश्यक CORS क्रेडेंशियल का समर्थन करता है।
   • यदि आप हैश किए गए फ़ाइल नामों या एसेट CDNs का उपयोग करते हैं, तो पुष्टि करें कि कार्यकर्ता रनटाइम पर उन URL को आयात कर सकते हैं (या एक छोटा मैनिफेस्ट इनलाइन करें)।

5. सामग्री सुरक्षा नीति (CSP) और हेडर

   • CSP की समीक्षा करें: कार्यकर्ताओं में मॉड्यूल आयात सामान्य मॉड्यूल की तरह लाए जाते हैं; सुनिश्चित करें कि script-src/worker-src नियम उन अनुरोधों को अवरुद्ध नहीं करते हैं।
   • यदि आप सेवा-कार्यकर्ता पंजीकरण विकल्पों का उपयोग करते हैं जो फ़ेच व्यवहार को बदलते हैं, तो समान-उत्पत्ति/क्रॉस-उत्पत्ति नियमों और कुकीज़/क्रेडेंशियल्स को मान्य करें।

6. पुस्तकालय और उपकरण

   • मॉड्यूल-प्रकार संगतता के लिए Workbox और अन्य सामान्य SW पुस्तकालयों का परीक्षण करें; उन संस्करणों में अपडेट करें जो स्पष्ट रूप से type: 'module' का समर्थन करते हैं (या मैन्युअल नियंत्रण में माइग्रेट करें)।
   • स्थानीय विकास सर्वरों (और CI) को लगातार मॉड्यूल कार्यकर्ताओं को सेवा देने के लिए अपडेट करें (डेव सर्वर डिफ़ॉल्ट्स पर ध्यान दें जो रैपर इंजेक्ट करते हैं या गलत CORS हेडर का उपयोग करते हैं)।

7. परीक्षण और रोलआउट

   • अंत‑से‑अंत परीक्षण जोड़ें जो:
     • मॉड्यूल मोड में कार्यकर्ता को पंजीकृत करें,
     • पुष्टि करें कि आयात हल होते हैं (और यदि उपयोग किया जाता है तो टॉप-लेवल await काम करता है),
     • ऑफ़लाइन व्यवहार और मॉड्यूल कार्यकर्ताओं पर कैश जीवनचक्र को मान्य करें।
   • ट्रैफ़िक के एक छोटे प्रतिशत के लिए परिवर्तन को कैनरी करें; सेवा कार्यकर्ता पंजीकरण, सक्रियण विफलताओं, और त्रुटि लॉग की निगरानी करें।
   • ServiceWorkerContainer.register() के चारों ओर टेलीमेट्री या त्रुटि ट्रैपिंग (sentry/logging) प्रदान करें ताकि असमर्थित-क्लाइंट बैकअप का पता लगाया जा सके।

सामान्य pitfalls जिन पर ध्यान दें

• बंडलर आउटपुट मॉड्यूल लोडर के साथ असंगत (IIFE बनाम ESM)। कार्यकर्ताओं के लिए ESM प्रवेश बिंदु उत्पन्न करें।
• importScripts अनुक्रम अर्थशास्त्र पर निर्भर रहना — स्पष्ट आयात और प्रारंभ क्रम के साथ बदलें।
• पुराने ब्राउज़रों (या लॉक किए गए उद्यम वातावरण) का पंजीकरण विफल हो जाता है यदि आप एक क्लासिक बैकअप छोड़ देते हैं।
• गलत MIME/CORS या CSP मॉड्यूल आयातों को अवरुद्ध कर रहा है और पंजीकरण पर चुप्पी से विफलताएँ पैदा कर रहा है।

संक्षिप्त रोलआउट योजना (एक पृष्ठ)

• सप्ताह 0: फ़ीचर-डिटेक्ट + बैकअप पंजीकरण जोड़ें; स्टेजिंग पर स्मोक टेस्ट करें।
• सप्ताह 1: कार्यकर्ता को ESM में परिवर्तित करें; निर्माण और सर्वर MIME/CORS को अपडेट करें।
• सप्ताह 2: e2e परीक्षण जोड़ें; कैनरी पर तैनात करें (1–5%)।
• सप्ताह 3: त्रुटियों/मैट्रिक्स की निगरानी करें; रोलआउट को 25% तक बढ़ाएं, फिर स्वच्छ टेलीमेट्री के बाद 100%।

निष्कर्ष Firefox 147 का मॉड्यूल-प्रकार सेवा कार्यकर्ता समर्थन कार्यकर्ताओं को पहले श्रेणी के ESM उपभोक्ताओं में बदल देता है। पूर्ण‑स्टैक टीमों के लिए इसका मतलब है साफ़ कोड साझा करना, सरल निर्माण, और अधिक शक्तिशाली सेवा कार्यकर्ता लॉजिक — लेकिन इसके लिए जानबूझकर निर्माण, पंजीकरण, और रोलआउट परिवर्तनों की आवश्यकता होती है। फ़ीचर डिटेक्शन और एक चरणबद्ध माइग्रेशन के साथ शुरू करें ताकि उन वातावरणों में आश्चर्य से बचा जा सके जो अभी भी पुराने क्लाइंट चला रहे हैं। (developer.mozilla.org)

स्रोत:

स्रोत

• Source