सर्विस वर्कर में ES मॉड्यूल

importScripts() का एक आधुनिक विकल्प.

Jeff Posnick

बैकग्राउंड

ईएस मॉड्यूल काफ़ी समय से डेवलपर के पसंदीदा रहे हैं. कई अन्य फ़ायदों के अलावा, ये यूनिवर्सल मॉड्यूल फ़ॉर्मैट का वादा करते हैं. इसमें शेयर किए गए कोड को एक बार रिलीज़ किया जा सकता है और ब्राउज़र के साथ-साथ Node.js जैसे अन्य रनटाइम में चलाया जा सकता है. हालांकि, सभी मॉडर्न ब्राउज़र कुछ हद तक ES मॉड्यूल के साथ काम करते हैं, लेकिन वे हर उस जगह काम नहीं करते जहां कोड चलाया जा सकता है. खास तौर पर, ब्राउज़र के सर्विस वर्कर में ईएस मॉड्यूल इंपोर्ट करने की सुविधा अब ज़्यादा लोगों के लिए उपलब्ध होने लगी है.

इस लेख में, आम तौर पर इस्तेमाल होने वाले ब्राउज़र में सर्विस वर्कर में ईएस मॉड्यूल के साथ काम करने की मौजूदा स्थिति के बारे में बताया गया है. साथ ही, इसमें कुछ ऐसी गड़बड़ियों के बारे में बताया गया है जिनसे बचना चाहिए. इसके अलावा, पुराने सिस्टम के साथ काम करने वाले सर्विस वर्कर कोड को शिप करने के सबसे सही तरीकों के बारे में भी बताया गया है.

उपयोग के उदाहरण

सर्विस वर्कर में ईएस मॉड्यूल का इस्तेमाल करने का सबसे सही तरीका, ऐसी मॉडर्न लाइब्रेरी या कॉन्फ़िगरेशन कोड को लोड करना है जिसे ईएस मॉड्यूल के साथ काम करने वाले अन्य रनटाइम के साथ शेयर किया जाता है.

ईएस मॉड्यूल से पहले, इस तरह से कोड शेयर करने के लिए, UMD जैसे पुराने "यूनिवर्सल" मॉड्यूल फ़ॉर्मैट का इस्तेमाल करना पड़ता था. इनमें ग़ैर-ज़रूरी बॉयलरप्लेट शामिल होते थे. साथ ही, ऐसा कोड लिखना पड़ता था जिससे दुनिया भर में एक्सपोज़ किए गए वैरिएबल में बदलाव होते थे.

अगर ईएस मॉड्यूल के ज़रिए इंपोर्ट की गई स्क्रिप्ट के कॉन्टेंट में बदलाव होता है, तो सर्विस वर्कर के अपडेट फ़्लो को ट्रिगर किया जा सकता है. यह importScripts() के बिहेवियर से मैच करता है.

मौजूदा सीमाएं

सिर्फ़ स्टैटिक इंपोर्ट

ईएस मॉड्यूल को दो में से किसी एक तरीके से इंपोर्ट किया जा सकता है: import ... from '...' सिंटैक्स का इस्तेमाल करके स्टैटिक तौर पर या import() तरीके का इस्तेमाल करके डाइनैमिक तौर पर. फ़िलहाल, सर्विस वर्कर में सिर्फ़ स्टैटिक सिंटैक्स का इस्तेमाल किया जा सकता है.

यह पाबंदी, importScripts() के इस्तेमाल पर लगाई गई पाबंदी जैसी ही है. importScripts() के लिए डाइनैमिक कॉल, सर्विस वर्कर के अंदर काम नहीं करते. साथ ही, सभी importScripts() कॉल, जो स्वाभाविक रूप से सिंक्रोनस होते हैं, सर्विस वर्कर के install फ़ेज़ को पूरा करने से पहले पूरे होने चाहिए. इस पाबंदी से यह पक्का होता है कि ब्राउज़र को सर्विस वर्कर के बारे में पता है. साथ ही, वह इंस्टॉलेशन के दौरान सर्विस वर्कर को लागू करने के लिए ज़रूरी सभी JavaScript कोड को अपने-आप कैश मेमोरी में सेव कर सकता है.

ऐसा हो सकता है कि आने वाले समय में यह पाबंदी हटा दी जाए और डाइनैमिक ईएस मॉड्यूल इंपोर्ट करने की अनुमति दे दी जाए. फ़िलहाल, पक्का करें कि आपने सर्विस वर्कर में सिर्फ़ स्टैटिक सिंटैक्स का इस्तेमाल किया हो.

अन्य कर्मचारियों के बारे में क्या?

"डेडिकेटेड" वर्कर में ईएस मॉड्यूल के लिए सहायता—new Worker('...', {type: 'module'}) के साथ बनाए गए मॉड्यूल—ज़्यादा बड़े पैमाने पर उपलब्ध है. साथ ही, यह वर्शन 80 के बाद से Chrome और Edge के साथ-साथ Safari के हाल ही के वर्शन में भी काम करता है. डेडिकेटेड वर्कर में, स्टैटिक और डाइनैमिक, दोनों तरह के ES मॉड्यूल इंपोर्ट किए जा सकते हैं.

Chrome और Edge, वर्शन 83 से शेयर किए गए वर्कर में ईएस मॉड्यूल के साथ काम करते हैं. हालांकि, फ़िलहाल कोई दूसरा ब्राउज़र इस सुविधा के साथ काम नहीं करता.

इंपोर्ट मैप के लिए कोई सहायता उपलब्ध नहीं है

इंपोर्ट मैप की मदद से, रनटाइम एनवायरमेंट, मॉड्यूल स्पेसिफ़ायर को फिर से लिख सकते हैं. उदाहरण के लिए, किसी पसंदीदा सीडीएन का यूआरएल पहले से जोड़ना, जिससे ईएस मॉड्यूल लोड किए जा सकें.

Chrome और Edge के वर्शन 89 और इसके बाद के वर्शन में, इंपोर्ट मैप काम करते हैं. हालांकि, फ़िलहाल इन्हें सर्विस वर्कर के साथ इस्तेमाल नहीं किया जा सकता.

ब्राउज़र समर्थन

सर्विस वर्कर में ईएस मॉड्यूल, Chrome और Edge के वर्शन 91 और उसके बाद के वर्शन पर काम करते हैं.

Safari ने Technology Preview 122 रिलीज़ में इस सुविधा को जोड़ा है. डेवलपर को आने वाले समय में, Safari के स्टेबल वर्शन में यह सुविधा देखने को मिल सकती है.

कोड का उदाहरण

यह किसी वेब ऐप्लिकेशन के window कॉन्टेक्स्ट में, शेयर किए गए ईएस मॉड्यूल का इस्तेमाल करने का एक बुनियादी उदाहरण है. साथ ही, इसमें एक सर्विस वर्कर को रजिस्टर किया गया है, जो उसी ईएस मॉड्यूल का इस्तेमाल करता है:

// Inside config.js:
export const cacheName = 'my-cache';

// Inside your web app:
<script type="module">
  import {cacheName} from './config.js';
  // Do something with cacheName.

  await navigator.serviceWorker.register('es-module-sw.js', {
    type: 'module',
  });
</script>

// Inside es-module-sw.js:
import {cacheName} from './config.js';

self.addEventListener('install', (event) => {
  event.waitUntil((async () => {
    const cache = await caches.open(cacheName);
    // ...
  })());
});

पुराने सिस्टम के साथ काम करने की सुविधा

ऊपर दिया गया उदाहरण तब ठीक से काम करेगा, जब सभी ब्राउज़र सर्विस वर्कर में ईएस मॉड्यूल के साथ काम करते हों. हालांकि, इस लेख को लिखे जाने तक ऐसा नहीं है.

जिन ब्राउज़र में पहले से यह सुविधा मौजूद नहीं है उनके लिए, ईएस मॉड्यूल के साथ काम करने वाले बंडलर की मदद से, सर्विस वर्कर स्क्रिप्ट को चलाया जा सकता है. इससे एक ऐसा सर्विस वर्कर बनाया जा सकता है जिसमें मॉड्यूल के सभी कोड इनलाइन शामिल हों. साथ ही, यह पुराने ब्राउज़र में भी काम करेगा. इसके अलावा, अगर आपको जो मॉड्यूल इंपोर्ट करने हैं वे पहले से ही IIFE या UMD फ़ॉर्मैट में बंडल किए गए हैं, तो उन्हें importScripts() का इस्तेमाल करके इंपोर्ट किया जा सकता है.

जब आपके पास सर्विस वर्कर के दो वर्शन उपलब्ध हों—एक जो ES मॉड्यूल का इस्तेमाल करता है और दूसरा जो नहीं करता है—तो आपको यह पता लगाना होगा कि मौजूदा ब्राउज़र किस वर्शन के साथ काम करता है. इसके बाद, उससे जुड़े सर्विस वर्कर की स्क्रिप्ट को रजिस्टर करना होगा. फ़िलहाल, सहायता का पता लगाने के सबसे सही तरीके लगातार बदल रहे हैं. हालांकि, सुझाव पाने के लिए, इस GitHub समस्या में दी गई चर्चा को फ़ॉलो किया जा सकता है.